How to render image like in google picasaweb?

April 15, 2008 2:08 PM

How to render image like in google picasaweb?: I'm developing a web page. If I use img tag to put image in the web page, while loading the page, image loads very slowly (especially large images). Also the upper part of image is loaded first and then the lower part, as page is downloaded from server. But in applications like google picasa, a very low quality version is rendered first, so that you see the whole image at once (even though its blurred), slowly as the page is downloaded, image becomes sharper. How can I implement this functionality in my web page? Can someone please point me to helpful resources regarding this?
posted by tvjoshi to computers & internet (10 comments total)

Progressive images
posted by special-k at 2:15 PM on April 15, 2008

Ideally you should size the images correctly for your web page. Don't try to scale down a huge 1Mb picture to fit in a small size on your website. A 600x400 pixel jpeg with 70% compression should load quickly and then you won't need any progressive jpegs. Visitors to your site will love you so they don't have to progressively wait for jpegs to load.
posted by JJ86 at 2:29 PM on April 15, 2008

What you're seeing is progressive JPEG. Photoshop (or any other graphics program worth anything) can save them.
posted by neckro23 at 3:58 PM on April 15, 2008

Special-K got it - that's what Picasa does.

Note that progressive images take up more space on your server than doing what JJ86 said. If you want to use progressive images, you should still make sure that the image is the same size as how you will use it on the page.

Also, make sure that you correctly define the size of the images in your source code, so the browser knows to allocate the space on the page for the image, even before it loads.
posted by gemmy at 4:00 PM on April 15, 2008

You could also achieve this effect with some CSS. Place one tiny, fast loading image on the page, then overlay the larger image on top using CSS. As long as the smaller one is listed first in the source code, I believe that it will have the effect you're looking for.
posted by chrisamiller at 6:45 PM on April 15, 2008

Progressive jpeg images are not necessarily larger than regular ones.

As an example, I took a random 6-megapixel jpeg image direct from camera (canon drebel, probably in L/fine quality mode). I converted it with "jpegtran -optimize -copy all" and "jpegtran -optimize -progressive -copy all", both of which are lossless transformations and which preserve EXIF and other header information (-copy all). In this case, using -progressive gave an additional 3% savings in size.

Original: 1253836 100%
Optimized: 974049 77%
Progressive: 929656 74%

The conversion time for a progressive image was longer -- about 1 second vs about .4 seconds for the non-progressive optimization. Either way, this is something to do off-line, not each time you send an image to a browser.
posted by jepler at 6:54 PM on April 15, 2008 [1 favorite]

Thanks everyone! But I was kind of hoping to do it on the fly, like programmatically. I intend to develope (just for fun) a simple photo album application (probably in asp.net). So if user upload their images, I guess I have to save them as progressive, if that's what it takes to create picasa like effect. Or are there any other ways, like mentioned by crissamiller. I was hoping to get solutions or pointer (urls) on that line.
Thanks again!
_tejas.
posted by tvjoshi at 8:23 PM on April 15, 2008

If you use a two image approach (either loaded with CSS, or some javascript), you'll want to look into using imagemagick, which is the most commong server-side image manipulation program. (There are others as well)
posted by chrisamiller at 10:15 PM on April 15, 2008

What jepler wrote could easily be done online; just fork off a copy of jpegtran from the script. I'd probably have the website generate a scaled-down progressive jpeg for each image when it's uploaded and store it along with the original.
posted by hattifattener at 11:34 PM on April 15, 2008

Can somebody please redirect me to any online resources (as in articles, code snippets, etc) to achieve what hattifattener is saying? I think "generate scaled-down progressive jpeg for each image when its uploaded and store it along with the original" is my best option from discussion so far. Also if there is any other way I can produce that diffusing effect with the same image (using just one original high quality image), that would also be nice. Any pointers guys (& gals)?
_tejas.
posted by tvjoshi at 2:16 PM on April 16, 2008