Interlacing

On a slow connection an image stored row by row appears from the top, strip by strip. Interlacing reorders the data so the whole picture shows first at low resolution and then gradually sharpens.

Interlacing in GIF: four passes

A GIF with interlacing on (a bit in the image descriptor) stores rows in four passes:

For an image with 10 rows the order in the file is:

After the first pass a browser usually repeats each row downward to fill the gaps, so a blurry but complete picture appears at once. Interlacing only affects row order. The data are the same and LZW compression works on them the same way, though the file can be slightly larger because rows adjacent in the stream are less alike.

Adam7 in PNG

PNG interlaces columns as well as rows. The Adam7 scheme divides the image into 8 × 8 squares and stores pixels in seven passes:

The number in each cell is the pass in which that pixel goes into the file. After the first pass 1/64 of the pixels is there, after the fourth 1/8, after the sixth half. The picture becomes recognizable much earlier than with GIF, but an interlaced PNG is usually several to over ten percent larger, because compression copes worse with scattered pixels.

Progressive JPEG

JPEG does not interlace pixels but frequency coefficients. It first stores the average color of each 8 × 8 block, then successive detail. The effect is similar: a blurry image first, then sharper and sharper. Unlike PNG, a progressive JPEG is often even slightly smaller than a baseline one.

When interlacing makes sense

• Large images on slow connections: progressive JPEG is still worth it.
• Small graphics, icons: interlacing only makes the file bigger.
• Animated GIFs: every frame can be interlaced, but in a fast animation nobody will see it.
• Processing: the decoder has to track the order. A program that reads an interlaced GIF like a plain one shows the image with shuffled rows.