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.
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.
