Picassa’s progressive photo rendering
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.
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
March 5th, 2009 at 6:19 am
In the olden days when I did some web development the image tag had a LOWSRC attribute that did this for you. Has that been disappeared? I found documentation here: http://www.cs.huji.ac.il/labs/parallel/Docs/Html/tags8.htm
Before broadband it was really useful. Now we’re loading huge images it might be useful again.
March 5th, 2009 at 6:28 am
I remember a property lowsrc that is supposed to do exactly that.
I’ve never used it or looked into browser support for it though.
March 5th, 2009 at 8:13 pm
yeah, true, I’ve seen lowsrc, but I’ve never used it personally
March 5th, 2009 at 8:25 pm
I’ve find lowsrc in the documentation david mentioned too, but it seems not in W3 spec.
June 11th, 2009 at 7:30 pm
I have lost two sets of images through Picassa. How do I lose the whole image set. Both were very
important and one day they were there; the next they were gone. What is happening?
April 20th, 2010 at 10:23 pm
I have been using Picassa for several years, and was very pleased until today. I received amessage that Picassa was compacting files to save space and lost all files of pictures except the most recent ones taken this year. Where did they go? Is there any possiblity of recovering any of those lost? At the moment I feel that I have to go to some other picture management, and would not recomend Picassa to anyone any more, if I cannot recover my pictures lost by Picassa today.
Leroy Watts
VXA Publications
417-498-6865
65769-7503
September 28th, 2010 at 7:39 pm
I’m not sure it was ever part of the HTML recommendations. Netscape created it, IE 3(?) copied it (because it was a great idea) and all modern browsers have slowly dropped support or never implemented it.
It is possible to mimic however:
http://blog.throbs.net/2009/05/27/Hey+JLo+Where+Did+LowSRC+Go.aspx
November 10th, 2010 at 7:59 pm
“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. ”
Is that really true? I’ve observed the whole image being loaded even if you move on quickly. Navigate quickly through a number of images and watch firebug. All the requests for the images are loaded completely regardless if you waited around to view them. Browse back over those images and you will see that the larger ones are indeed fully loaded.
So once you request an image, it will load the whole image even if you reassign the src property.
November 18th, 2011 at 1:29 pm
send it quick
January 30th, 2012 at 8:57 am
Wonderful issues altogether, you just gained a logo new reader. What may you suggest about your put up that you just made a few days ago? Any positive?