Interlaced GIFs and Progressive JPEGs | Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

The JPEG, GIF, and PNG image file formats all offer a nifty feature that makes images appear faster than they otherwise could. An image can be stored in such a way that a "rough draft" of the image appears quickly, and the details are filled in as the download finishes. This has a profound psychological effect, because it gives people something to look at instead of drumming their fingers, waiting for a large image to pour slowly onto the screen.

A file stored with this feature is called an interlaced GIF, an interlaced PNG, or a progressive JPEG. Despite the different names, the visual results are similar with all the formats. An interlaced GIF or interlaced PNG file is an image that appears blocky at first, and then more and more detailed as it finishes downloading. Similarly, a progressive JPEG file appears blurry at first and then gradually comes into focus.

Most graphics programs that can handle GIF files enable you to choose whether to save them interlaced or noninterlaced. In Paint Shop Pro, for example, you can choose Version 89a (the latest GIF image version) and Interlaced by clicking the Options button in the Save As dialog box just before you save a GIF file (see Figure 7.11). PNG images offer a similar option in allowing you to choose between Interlaced and Noninterlaced in the Save Options dialog box.

Figure 7.11. Paint Shop Pro lets you save interlaced GIF images, which appear to display faster when loading.

To save a progressive JPEG file, select Save As (or Save Copy As), choose the JPG JPEG image type, click the Options button, and select Progressive Encoding instead of Standard Encoding. Many larger GIF and JPEG images used on the web these days take advantage of interlacing and progression to provide a better browsing experience for web surfers.

By the Way

Image files smaller than about 3KB will usually load so fast that nobody will ever see the interlacing or progressive display anyway. In fact, very small images may actually load more slowly when interlaced. Save these tricks for larger images.