December 14, 2005
I'm a big fan of showing the user visual feedback as soon as possible, whether you're downloading a web page or rendering a windows form.
Images already render progressively in a web browser -- but you can do even better. Simply save your GIF or PNG images with the "interlaced" option, or your JPEG images with the "progressive" option.
Stephan Lavavej has a great page outlining the difference between fancy interlacing and plain old progressive rendering:
There are four ways to transmit an image over the Internet. Over a fast connection there won't be any apparent difference, but over a modem connection the difference is stunningly obvious. Choosing the right way can make your connection seem much faster than it really is.
- Wait until every bit of image data has been sucked through the modem before displaying the whole image. So blindingly dumb that not even Internet Explorer does it.
- Display image data as it is received, resulting in a top-down filling in of the image. One variant -- the one that everyone has seen -- of JPEG does this. This is noninterlaced display, and both GIF and PNG are capable of it as well. Non-interlaced images are smaller than interlaced images.
- Use a one-dimensional interlacing scheme. This is how GIF interlacing works. Every eighth horizontal line is transmitted in the first "pass", filling up the dimensions of the image in 1/8th of the time that the entire image will take to download. The next pass transmits every fourth line, making the image less distorted. The next pass transmits every second line, making the image even less distorted, and the fourth and final pass transmits the remaining lines.
- Use a two-dimensional interlacing scheme. This is how PNG interlacing works. Instead of four passes through the image, PNG makes seven passes. In 1/64 of the time that the whole image will take to display, one pass is already completed, showing the image in a very rough manner. Successive passes fill in more information, never distorting the pixels by more than a factor of two to one.
Here's a demo of simple progressive as-received rendering:
And here's a demo of the superior PNG style two-dimensional interlaced rendering:
You don't get this for free, of course -- turning this feature on adds about 20% to the size of PNG images, and about 10% to the size of JPEG and GIF images. Whether this improved rendering behavior is worth the bandwidth cost I leave as an exercise to the reader.
I am not aware of any browsers that actually bilinearly interpolate the low-resolution incremental images, as shown in the sample screenshots on Stefan's page. But that would be really cool! Why doesn't Firefox add this?
Posted by Jeff Atwood
I prefer to set the absolute width and height for an image, so that the page layout doesn't jump around whilst being loaded
I agree-- definitely a best practice-- but that's a seperate issue.
In practice, the user is forced to look at a fuzzy full-size proxy for the image while all the bits are loading. Is it done? Well, it looks kind of fuzzy.
I hadn't ever considered it this way, but I think he (and you) may be right. Interlaced rendering may violate the "Don't Make Me Think" canon.
If the difference between the loaded and unloaded states is very large, I think it's OK. For example, in the non-interlaced case, the difference is HUGE and obvious. Blank white space vs. image? No contest.
Interlaced rendering starts out OK. There's no way something that blocky could possibly be a complete image, right? But as the image becomes ever more detailed, discriminating between the current "pretty good rendering" and "even better rendering" becomes a challenge.
What made you pick that particular sample image?
I'm just keeping it real -- Hello Kitty is all up in this beeyotch. ;)
Philip Greenspun makes a good case against interlaced images. His point is that interlaced images cause the user unnecessary anxiety because you aren't sure when the image has stopped loading. This is true, in my experience.
From a href="http://philip.greenspun.com/panda/images"http://philip.greenspun.com/panda/images/a :
"Some people like interlaced or "progressive" images, which load gradually. The theory behind these formats is that the user can at least look at a fuzzy full-size proxy for the image while all the bits are loading. In practice, the user is forced to look at a fuzzy full-size proxy for the image while all the bits are loading. Is it done? Well, it looks kind of fuzzy. Oh wait, the top of the image seems to be getting a little more detail. Maybe it is done now. It is still kind of fuzzy, though. Maybe the photographer wasn't using a tripod. Oh wait, it seems to be clearing up now..."
I must say I find the interlaced rendering distracting. I prefer to set the absolute width and height for an image, so that the page layout doesn't jump around whilst being loaded.
ummm... Jeff? What made you pick that particular sample image? Are you in a particularly rainbows/unicorns/bows/ribbons mood right now?
had read STL's (as he refers to himself) page some time ago, had forgotten about it
I do recommend reading more pages on his site. Mania and self-obsession has never been so entertai--, er, informative!
It's all good, but here's my favorite section (in the 2004 news):
I hate blogs for a couple of reasons. First, most people are fundamentally not interesting. Second, blogs are a very poor way to organize information. Now, I realize that my news posts tend to be pretty bloggy, and for that I apologize. While I think my views are pretty interesting, I don't think I'm all that interesting myself, and my news posts are definitely not organized. That said, I'm now going to describe some things that I've been doing recently.
The comedy, it writes itself!
Indeed. I remember seeing a few threads on [H] or Ars about STL and his egomania, it was all quite funny. Despite all that I still think he's pretty bright and some of his pages are quite interesting. He's quite the character. Works at Microsoft now... If I have to be thankful for one thing, it's that he's the reason I got hooked on Vernor Vinge novels!
Interesting post Jeff, as is your choice of image. ;)
Personally I like the fuzzy - clear process, and the width/height already set is a plus.
I had read STL's (as he refers to himself) page some time ago, had forgotten about it. Funny that you should link to STL's page. Small world after all.
I know I'm answering to a really old post, but anyway...
Progressive JPEG images are usually slightly SMALLER than normal ones. Interlaced PNGs are actually bigger though.
Do progressively rendered images show up 'progressively' on all modern browsers?
Answering a really old post but a helpful tip no less is to use the lesser known lowsrc property on img tags. This does not result in confusing interlaced rendering and allows fine-grained control over the low resolution to be displayed temporarily while the high resolution version loads.