PNG (Portable Network Graphics) is the reference lossless format for graphics, screenshots and images with transparency. It is also a very well documented and carefully designed format: looking at its internal structure explains why some PNGs weigh ten times more than others that look the same, and what can be done to lighten them without touching a single pixel.
The signature and the chunks
Every PNG file starts with a fixed 8-byte signature. Besides identifying the format, it was chosen to reveal corrupted transfers: it contains, for example, line-ending characters that a text-mode transfer would alter.
After the signature the file is a sequence of chunks, blocks that always share the same structure:
length (4 bytes) | type (4 letters) | data | CRC (4 bytes)
The CRC is a check code that makes it possible to detect a damaged chunk. The four-letter name follows a convention: the case of the first letter says whether the chunk is essential (critical) or ancillary, which is how a reader can safely ignore chunks it does not know.
The main chunks
| Chunk | Content |
|---|---|
| IHDR | width, height, bit depth, color type, interlacing |
| PLTE | the palette, for indexed images |
| IDAT | the compressed image data (possibly across several consecutive chunks) |
| IEND | marks the end of the file |
| tRNS | simple transparency for palette or single-color images |
| gAMA, cHRM, sRGB, iCCP | color information and ICC profile |
| tEXt, iTXt, zTXt | text and metadata |
Color types
PNG supports five combinations:
- grayscale, from 1 to 16 bits;
- RGB, at 8 or 16 bits per channel;
- indexed, with a palette of up to 256 colors and 1, 2, 4 or 8 bits per pixel;
- grayscale with alpha;
- RGBA, color with a full alpha channel.
Choosing the right type is the first step to reducing size. An icon with twelve colors saved as 8-bit RGBA uses 32 bits per pixel; the same icon indexed can use 4.
Filters: preparing data for compression
Before compression, each row of the image goes through a filter that turns the values into differences from neighbouring pixels. The filter is chosen row by row from five options:
- None: no transformation.
- Sub: difference from the pixel to the left.
- Up: difference from the pixel above.
- Average: difference from the mean of left and above.
- Paeth: difference from a prediction that picks whichever of left, above and diagonal is closest to a linear estimate.
In a regular horizontal gradient, the Sub filter turns increasing values into a sequence of identical numbers that compresses almost to nothing. Filters compress nothing on their own: they make the data more predictable for the next stage.
DEFLATE compression
The filtered data is compressed with DEFLATE, the same algorithm used by ZIP files and gzip. It combines a sliding-window dictionary (LZ77 family), which replaces repetitions with backward references, and Huffman coding. It is fast to decompress and lossless, but has one limitation: the search window is relatively small, so repetitions far apart in the image are not exploited.
Adam7 interlacing
A PNG can be saved with Adam7 interlacing, which splits the pixels into seven passes: the first contains one pixel in every 8 × 8, the following ones progressively fill the gaps. While loading, a low-resolution preview appears straight away. The cost is a file that is usually heavier, because the pixels in each pass are less correlated with one another. Today, for most uses, it is best left off.
How to lighten a PNG
In my work I follow this order, from the safest to the most aggressive:
- Remove unnecessary chunks: text, dates, thumbnails and metadata from the program that saved the file. Take care to keep color information if it is needed.
- Reduce the color type: an image with no transparency does not need an alpha channel; graphics with few colors can become indexed.
- Recompress exhaustively: tools such as oxipng or zopflipng try many combinations of filters and DEFLATE parameters. The result is pixel-for-pixel identical, but often 10–30% lighter.
- Quantise (lossy): tools such as pngquant reduce an RGBA image to a 256-color palette with dithering. It is no longer lossless, but for icons and illustrations the result is often indistinguishable and the size drops dramatically.
When PNG is not the right choice
- Photographs: noise and continuous gradients compress poorly; a JPEG or a modern lossy format weighs a fraction.
- Animations: the APNG extension exists and is well supported by browsers, but for long animations video is far more efficient.
- Simple scalable graphics: logos and icons made of geometric shapes are better as SVG.
In short
- A PNG is a signature followed by chunks with length, type, data and CRC.
- Color types range from 1-bit grayscale to 16-bit RGBA: choosing the minimum one reduces size.
- Row filters turn pixels into predictable differences, then DEFLATE compresses.
- Adam7 interlacing usually makes the file heavier.
- Stripping metadata, reducing the color type and recompressing lighten files losslessly; quantisation goes further, with loss.
