How Adam7 Interlacing Makes PNG Images Load Faster and Sharper

Preface

The previous article covered how to parse a PNG image, but only described sequential scanning; PNG also supports an interlaced scanning technique called the Adam7 algorithm.

Advantages

Interlaced PNGs can display a blurry version of the image first and progressively become clearer as more passes are rendered, resulting in a smoother loading experience. The algorithm performs up to seven passes, each scanning a subset of pixels; each additional pass refines the image until the final pass renders the full picture. However, the extra passes add some overhead, making the file slightly larger.

Generation

Creating an Adam7‑interlaced PNG is simple with Adobe Photoshop: drag the image into Photoshop, choose File → Export → Save for Web (Legacy) , select

PNG‑24

, enable Interlace , and save. Enabling interlace sets the scanning method to Adam7; leaving it unchecked produces a standard sequential PNG.

Principle

The Adam7 algorithm works by splitting a PNG into multiple sub‑images, each scanned sequentially, then recombining the pixel data according to specific rules.

Analysis

After decompressing the image data, the buffer is sliced into several smaller buffers. The key is determining how to split the data; the Wikipedia diagram (shown below) illustrates which pixels belong to each of the seven passes. Smaller images may require fewer than seven passes if some passes contain no pixels.

Each pass corresponds to a sub‑image containing the pixels scanned in that pass.

Splitting

In Node.js, the

Buffer.slice

method can be used to split the image data. For example, the first sub‑image of a 2×2 pixel block (assuming 3 bytes per pixel) has a length of

2*(2*3+1)

. The extra

+1

accounts for the filter byte stored at the start of each scan line.

Pixel Reassembly

After all seven sub‑images are processed, their pixels are placed back into their correct positions to reconstruct the full PNG, as illustrated below.

Code

The complete workflow is implemented in code (the diagram below shows the implementation).

Conclusion

The Adam7 interlacing process involves splitting the original PNG into up to seven sub‑images, scanning each pass, and reassembling the pixels. Because each scan line begins with a filter byte, interlaced PNGs are slightly larger due to the additional filter data. Choose the scanning method based on the specific use case.

Reference materials:

https://www.w3.org/TR/PNG/

http://www.libpng.org/pub/png/

https://en.wikipedia.org/wiki/Portable_Network_Graphics