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: