Interlacing

How Interlacing Works

A non-interlaced PNG loads top-to-bottom, one row at a time. An interlaced PNG uses the Adam7 algorithm to store pixels in seven passes of increasing resolution. The first pass contains just 1/64 of the pixels, spread evenly across the image, creating a very pixelated preview. Each subsequent pass fills in more pixels until the full image is rendered. This means users see a blurry version of the entire image almost immediately, rather than watching it load one horizontal stripe at a time.

Interlacing vs. Progressive JPEG

The concept is similar to progressive JPEG encoding, though the implementation differs. Progressive JPEGs store the image in successive scans of increasing quality (like viewing through increasingly clear glass), while PNG interlacing rearranges pixel order. Both techniques improve perceived load time on slow connections by showing a recognizable preview early. On fast connections, the benefit is negligible since the full image loads quickly regardless.

Trade-offs

Interlaced PNGs are slightly larger (about 5-10% more) than non-interlaced versions because the reordering reduces compression efficiency. They also require more memory and CPU to decode. For small images (icons, thumbnails), interlacing adds overhead with no visible benefit. For large images on pages visited over slow connections, interlacing can meaningfully improve the user experience. Modern best practices often favor responsive images and lazy loading over interlacing for performance optimization.