[Pro] Images - Resources - Responsive: Picturefill

Freeway
1

Hi guys’n gals,

with the idea of adaptive content, we now know, that it’s mainly about adjusting one single set of HTML (content) to all (most) thinkable devices and browser-situations the best we can.

I’m exclusively talking about images and doable concepts handling those often heavy weighted resources. Especially if it comes to hero images they are more than often huge (if not to say crazy huge) 300-800kb. We need a clever and more selective solution.

####The CSS way

In Freeway we call this “background-image” and it’s fairly easy to do. Just “replace” them on lower breakpoints by smaller versions - done!

####The Tag

Did I already mentioned that we do a “single set of HTML”? The img-Tag IS HTML so we won’t have a chance to simply replace them for lower breakpoints. But with Picturefill there seems to be a solution. I don’t want to go in details here, but I gave it a go. Once I am aware what I did, I try to wrap this in a video-screencast. But before I do, I beg your help:

Call the shared link on several devices such as cell-phone and tablets and tell me if:

Tablets call the 1200px image version and cells the 600px version?

Browsers are redundant (in fact it should work in Safari and Chrome but not in Fox).

http://backstage.kimmich-digitalmedia.com/testings/imageresize/img-res-adjusted.html

And another thing I probably miss:

I did the example on the img-Tag but how would one create natively a picture element, necessarily with srcset and sizes, something like:

<picture>
<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
<img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

I thank you for your kind help in advance.

Cheers

Thomas

http://backstage.kimmich-digitalmedia.com/testings/imageresize/img-res-adjusted.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Hi Thomas,
iPhone 6 plus shows

iPhone 6 Plus
6 Plus360×640 60.5 KB

iPhone 4s and iPad 2 show as expected.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

Hi Simon,

thanks for testing. Yep - the Xcode simulator shows the same. I honestly can’t really explain it, but it must have to do with kind of display tech-specs.

If it is Retina 1334px, it won’t take the 1200px version cause it is obviously too small - or in this case the way better version one above 1823px.

Hm - I have to mind a lil bit about, cause @media in the scrset doesn’t seem to change anything.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

Hi Thomas,
I like your sample page and PictureFill in general although it tends to suffer along with other image replacement techniques in that the page will load the high resolution image (big-1823.jpg) before reloading the image with an optimised version. If you clear your cache and reload the page with the network inspector open (in WebKit browsers) you’ll see the larger image gets loaded and then the smaller image loaded over the top of it. Obviously if you are on a mobile device and you’ve already downloaded the larger file then downloading a replacement image isn’t going to save you any time but will in fact decrease the overall page performance.

I ran a similar set of tests a while ago (see link below) using TimThumb (no relation!) to dynamically load different sized images from a single base image depending on the browser width;
http://www.freewayactions.com/test/timthumb/
TimThumb - Google Code Archive - Long-term storage for Google Code Project Hosting.

TimThumb uses PHP (and specifically the GD library on the server) to size the images on the fly. These are then automatically cached should they be needed again.
As you adjust the browser width the image will get swapped out for one that has been sized specifically for that breakpoint.

Again the page suffers from the double load issue as the page loads the original image and then reloads it again once the script has run. You can improve overall page performance by loading your smallest image and then sizing it up for the available browser width with the only issue being that if the script failed users would see a low resolution image instead of the optimised one.

Lastly neither script takes into account if a larger image has already been downloaded (and therefore cached) before replacing this with a smaller image. If a user loads a page on an iPhone in landscape mode and loads a medium sized image I would rather then continue using that image if they switch to portrait mode than reload a smaller image which may need to get swapped back out again if they then later switch back to landscape mode.
Regards,
Tim.

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

Hi Tim,

thanks a lot having you here.

I am not sure if I can trust Xcode as the simulator of reality, but obviously it loads the dedicated image:

The “smallest” as the fallback (fallback) is as well way better (however it looks a bit weird in the FW-doc :slight_smile:

Regarding Landscape/Portrait I’m not really concerned, cause my breakpoint philosophy is anyway slightly different:

1200px for Tablet - 600px for SmartPhones which will mean:

The same situation on both - or:

I’m not after devices, I’m after device-ranges.

It is still a confusing concept (to me) at all and I have to review this (your example using php to include as well). And I’m still not sure how funny life will be creating 6 versions of a single image (3x for breakpoints and each a 2x version for Retina) - especially in slideshows and galleries.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

6

Hi Thomas,

On 11 Jun 2015, at 14:42, Thomas Kimmich wrote:

I’m not after devices, I’m after device-ranges.
Yes I agree that it makes a lot more sense than specific image sizes for each breakpoint.

It is still a confusing concept (to me) at all and I have to review this (your example using php to include as well). And I’m still not sure how funny life will be creating 6 versions of a single image (3x for breakpoints and each a 2x version for Retina) - especially in slideshows and galleries.
If I recall correctly I think I first saw TimThumb used to automatically populate a src-set with different sized images from a master image. The script works well for straight sizing but although it can do cropping it still needs to be told which parts of the image to concentrate on. Nothing is going to beat creating these images manually and adjusting the size and crop in Photoshop as you’ll be able to get them just as you like but for images supplied by a client (through a CMS for example) TimThumb can be useful for making sure the image doesn’t blow the layout apart.

I used TimThumb on an overhaul of this existing site recently where the home page slider expects the image to be a particular aspect ratio;
http://www.studio2000design.com/
The client can upload any sized image (the site is managed by Pulse) and the script will cut it to the specified size for the slider.
Regards,
Tim.

FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

Hi Tim,

hm - this opens another aspect, so allow me two questions, cause obviously I can’t implement it correctly:

  1. Why did they stop developing TimThumb

And I got Internal Server Error 500 on this example:

http://backstage.kimmich-digitalmedia.com/testings/imageresize/imageres-timthumb.html

Kind of path issues? Or even not?

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

8

Hi Thomas,

On 11 Jun 2015, at 16:02, Thomas Kimmich wrote:

  1. Why did they stop developing TimThumb
    The developer mentions security issues that he’s mainly now patched but doesn’t have time to continue devoting time to.

And I got Internal Server Error 500 on this example:

http://backstage.kimmich-digitalmedia.com/testings/imageresize/imageres-timthumb.html

Kind of path issues? Or even not?
I suspect it could be a permissions issue. I’ve seen this myself on a couple of my servers if I try and give scripts permissions that are too high for the user account. Have a look at this thread and see if CHMODing the files helps;
php - 500 Error on Timthumb - Stack Overflow
Regards,
Tim.

FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

9

That’s what I loved to hate regarding PHP - CHMOD fiddling all over the place - each host reacting different (I remember WebYep - TinyMCE and tinyBrowser integration … gosh).

So if I understand this correctly, it’s not just the cache folder, but the Resources folder as well - or even each image? Hm - clever solution - incredible integration and a user not smart enough is not the best combination.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at: