phpied.com

If you've followed the series of image optimization posts on the YUIblog, you've probably seen the one about progressive JPEGs. In short, if a photo is over 10K it has a high probability of being smaller in file size when you use progressive JPEG.

How do you turn a normal, baseline JPEG into a progressive one? Well, most image software has this capability. On the command line you can use JPEGTRAN's -progressive flag.

Progressive JPEGs don't render progressively in IE but that's not a big deal, they still render.

Mi casa, Pi-cassa

That's all nice and good, but as I was browsing Picassa, I noticed some serious progressive photo rendering going on. Imagine my surprise when I found the photos on picassa seemed to be rendering progressively even in IE. And upon inspecting one photo - it wasn't even using progressive encoding!

small thumb first, bigger image later

Picassa uses a clever trick where they quickly load a small thumbnail of the photo you want to see, and then start loading the real big image. This way you get something that gives you an idea of the image and if you don't like it, you can click next and move on without loading for the whole image. And what gives the feeling of progressive loading is the fact that the thumbnail is stretched to take the whole width/height of the real image.

See for yourself

This page initially shows a small 128x96 image:

But this image is stretched to 640x480 so it looks like:

The actual final image is

This is pretty trivial to achieve, something like (not tested, just typing away):

var i = new Image();
i.onload = function() {
    document.getElementById('small').src = i.src;
}
i.src = "big.jpg";

So once the big image arrives, it replaces the small one and the visual effect is like progressive rendering - as if the image increases quality gradually.

This entry was posted on Thursday, March 5th, 2009 and is filed under images, performance. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Get notification for future posts: follow me on Twitter or subscribe to my RSS feed