Progressive images = Better user experience?

Question

Do progressive images give a better user experience generally for browser based web applications?

Answer 1

As with all things there are pros and cons though most of the pros aren't really relevant if the web site is designed correctly and the end user has a fast Internet connection. So the relevance of these depends on your target audience.

Pros:

• The base level images arrives quickly thus ensuring the layout is correct as soon as possible. However if the height and width attributes of the image are set correctly this is pretty much irrelevant (thanks @DA01)
• It's clearer that the page is still loading if images are interlaced when loading on a slow internet connection.

Cons:

• It can be worse seeing a blurred image than no image at all. You wait to see if the image is important, whereas if there was no image at all you might not be bothered.

So on balance I'd say it's probably doesn't give a better user experience.

Answer 2

I've always had mixed feelings about interlaced/progressive images. I still can't decide where I stand on those. But there is one thing that I wish all browsers did: while the page is being displayed but the pictures haven't loaded yet, I wish they'd show an image representation instead of just white space. IE6 had a hard-to-find "Show image placeholder" option that did exactly that, but it wasn't turned on by default.

Of course, for the image placeholder to work well, the web page must include the proper width/height attributes, as @DA01 mentioned.

Answer 3

I think the importance of the progressive/interlaced images has diminished within the last few years. Many people in first world countries have high speed internet ( http://articlet.com/article791.html ). When the user has dial-up access, a user may be wondering why things are placed on the screen as they are. The progressive/interlaced images gives those users something to look at, and they are accustomed to them filling in over time. Users with high speed internet access will usually have the image downloaded quick enough that they don't see the image progressively filling in.

If you keep the weight of the downloaded images fairly small, they will be reasonably fast on all connections. At full bandwidth, dial-up modems can pull a 6.8KB image in 1 second. The same image for someone with a 20mb connection will only take ~3milliseconds. You can see how progressive/interlaced images don't provide any benefit for high speed internet users.

According to the article (which is a couple years old), we still have a significant number of users that have to deal with dial-up. I would at least keep the images as small as possible, and take advantage of browser caching as much as possible. For example, a zipped SVG file can be much smaller and provide a better experience if someone has a modern browser on their dial-up connection. I still try to get as much done without images as I can. That means I'll take advantage of Google web fonts, or their hosting of jQuery, etc. Once the browser caches that copy (it's mapped by URL in the cache), they only have to download it once.

Answer 4

Aside from jpeg, don't use interlacing; it will actually increases the size (PNG is worst off at around 10%). However, even when it's not particularly costly, it is still undesirable.

• (in some cases) thumbnails, multiple levels of them, are much more friendly and usable to the user. If they want to see a preview, they get a very clear one, if they want the full quality they just skip to the full quality. Consider also the possibility of using semi-zoomed in thumbnails, depending on your circumstances.
• interlacing has the problem of "how do you know when it's done?" For very sharp and small images this is not so much a problem, but once we start talking about images that don't even fit the screen and quality wise are somewhat blurry at normal screen zoom it's confusing if interlacing has completed or not
• interlacing is just an effect, it doesn't really show the user anything. It's funny how people consider it does, and the same people will tell you the one on Tv is suppose to hide things.
• optimizing properly (which interlacing messes with) is the better way to make things smoother
• internet connectivity today isn't so bad you need interlacing; and frankly I never liked it one bit even in the day either: "oh is it done yet?…no?…now?…still not last wave?…oh come on load!…%#$%$ image! OH it's done (saves) oh crap it still had a little bit left!" With out interlacing a image is practically its own "loading bar"; much more user friendly. There are also far better technologies that cater to your poor slow connection users…

So, is it actually good for anything? Web developer wise, nope. However if you're say posting some images on a forum, the code on the forum can't know the size; since by interlacing you basically pass the size very quickly, interlacing is one way to solve your (nonexistent, nit picky) layout problems—realistically the only credible situation is with floated images.