jonlee.ca

In a previous article, I discussed different image formats and what situations call for each one. Many image editors offer a whole slew of features aside from just the format when you save an image. This post will discuss two of those: the Interlace option in PNG/GIFs and the Progressive option in JPEGs. Despite differences in how they work, both of these options are very similar in their functionality, benefits and disadvantages so I will discuss them together.

Functionality
Saving a PNG/GIF as interlaced or a JPEG as progressive provides one major end function: it let’s users know what’s coming. Upon a page load, interlaced/progressive images are displayed first as a rough blurry picture, then the picture gradually becomes clearer and crisper until the full detail image is displayed. A non-interlaced/non-progressive picture on the other hand, displays images top-down with full detail. This picture provides an excellent visual representation of the difference (from WebStyleGuide):

Benefit
The main benefit of interlaced/progressive images is that they allow users to quickly see what an image is before it has completely loaded. You may think that in today’s world of high speed Internet that this isn’t much of a concern but there are still a lot of people on dial-up believe it or not! “Broadband” penetration is less than 20% in the United States and don’t forget users that have their bandwidth throttled. Many Universities throttle student’s bandwidth during peak hours or users can take up most of their bandwidth with Bittorrent downloads and other Internet activity.

Disadvantage
I can only think of one disadvantage. An interlaced/progressive image increases file size. The increase is not that much, but it can add up over a lot of images. Most browsers support these type of images and those that don’t will simply display it as a regular PNG/GIF or JPEG.

The general consensus is to reserve this feature only for large images. Icons and small images load quickly enough that it isn’t necessary for them to be interlaced/progressive. Large image maps especially benefit because users can quickly see where on the image they want to click on.

Popularity: 5% [?]

This entry was posted on Saturday, April 28th, 2007 at 11:23 pm and is filed under Web Development. 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.