Understanding PNG: Types, Data Structure, and Compression Mechanics

What Is PNG?

PNG (Portable Network Graphics) is a lossless image format widely used on the web. It provides lossless compression based on an LZ77‑derived algorithm, typically yields smaller files than uncompressed formats, and supports 256 levels of alpha transparency.

PNG Types

PNG‑8 : 8‑bit color depth, up to 256 colors.

PNG‑24 : 24‑bit color depth (8 bits each for R, G, B), up to 16.7 million colors.

PNG‑32 : PNG‑24 plus an 8‑bit alpha channel (R, G, B, A) for full transparency.

PNG Data Structure

A PNG file starts with an 8‑byte signature followed by a series of chunks. Each chunk consists of a length, a type, data, and a CRC. This structure is analogous to a header followed by multiple data blocks.

Hexadecimal Header Explanation

When a PNG is opened in a hex editor the first bytes are: 89504e470d0a1a0a – fixed PNG signature. 0000000d – length of the IHDR chunk (always 13 bytes). 49484452 – chunk type “IHDR”. 000002bc – image width in pixels. 000003a5 – image height in pixels.

Subsequent chunks store palette, transparency, image data, etc.

Which PNG Images Compress Better?

Images with few distinct colors and large uniform areas compress more efficiently because the data contains many repeated values. A binary image with only two colors can be represented by a short array, dramatically reducing size.

PNG Compression Process

PNG compression consists of two stages: prediction (pre‑processing) and actual compression.

Prediction (Delta Encoding)

Before compression each scanline is filtered, converting pixel values into differences. Common filter types are:

No filter

Sub (X‑A)

Up (X‑B)

Average (X‑(A+B)/2)

Paeth predictor

Example: a gradient row [1,2,3,4,5,6,7,8] filtered with Sub becomes [1,1,1,1,1,1,1], a sequence of repeated values that compresses well.

Compression (Deflate)

The filtered data is compressed using the Deflate algorithm, which combines LZ77 sliding‑window compression with Huffman coding. Deflate removes redundant sequences and encodes frequent patterns efficiently, producing the final compressed PNG data stream.

Source: https://github.com/airuikun/blog/issues/1