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.
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.
Hmm.
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 Adding Images to Your Site
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.
Thanks for sharing information about progressive image rendering for better user experience. I tried to create / resize progressive images and tested on some tools says your image is progressive.
But when I put that image in src attribute of image it load in top down manner only instead of progressive manner fuzzy to high quality.
It would be great if you can suggest if anything needs to be done at css / html to render image progressively.
Per the blog post, just ship the image as-is, browsers will already load it “progressively” from top to bottom. Don’t do anything else.