The Technology Behind Lossless PNG Compression: A Deep Dive

When you save an image as a JPEG, the software deliberately throws away visual data to achieve smaller file sizes. This is known as lossy compression. However, when you save an image as a PNG (Portable Network Graphics), it is compressed losslessly. You can compress and decompress a PNG a million times, and every single pixel will remain mathematically identical to the original image.

How is this possible? How can an image file shrink in size without actually losing any information?

The magic of PNG lies in a brilliant combination of pre-processing algorithms and a robust compression engine borrowed from the world of ZIP files. In this technical deep dive, we will peel back the layers of a PNG file, examining how Filtering, LZ77, Huffman Coding, and the DEFLATE algorithm work in harmony to make the web faster without sacrificing quality.

1. The Problem with Raw Pixel Data

Imagine a 1000 x 1000 pixel image. That's 1,000,000 pixels. If it's a standard RGBA image (Red, Green, Blue, Alpha), each pixel requires 4 bytes (8 bits per channel).

1,000,000 pixels × 4 bytes = 4,000,000 bytes = ~3.8 MB.

A raw, uncompressed 1000x1000 image takes up nearly 4 megabytes of storage. If the image is just a solid red square, storing 4 megabytes of "red, red, red, red..." is incredibly inefficient. This inefficiency is what compression algorithms seek to eliminate.

2. Step One: Filtering (Delta Encoding)

Before the actual compression algorithm touches the data, the PNG specification applies a clever pre-processing step called Filtering.

Filtering doesn't compress the data; instead, it transforms the data into a format that is much easier for a compression algorithm to handle. It does this by storing the difference (the delta) between pixels rather than the absolute value of the pixels.

How Filtering Works

Imagine a horizontal line of pixels with the following grayscale values: 100, 101, 102, 103, 104, 105

If we use a Sub Filter (which compares a pixel to the one immediately to its left), the sequence transforms into: 100, 1, 1, 1, 1, 1

Why is this useful? Because compression algorithms thrive on repetition and small numbers. A sequence of mostly 1s or 0s is vastly easier to compress than a sequence of constantly changing, large numbers.

PNG Filter Types

PNG defines five different filter types that can be applied on a row-by-row basis:

None: Do not alter the pixels.
Sub: Subtract the pixel to the left.
Up: Subtract the pixel directly above.
Average: Subtract the mathematical average of the pixel to the left and the pixel above.
Paeth: A complex algorithm that predicts the pixel's value based on the left, above, and upper-left pixels, then subtracts the actual value from the prediction.

When saving a PNG, advanced encoders (like OptiPNG or OxiPNG) will test different combinations of these filters on every single row to find the arrangement that yields the most compressible data.

3. Step Two: The DEFLATE Algorithm

Once the image data has been filtered into a highly predictable sequence of numbers, it is passed into the DEFLATE algorithm.

DEFLATE is the exact same compression engine used in ZIP files, GZIP, and HTTP compression. It achieves lossless compression by combining two distinct algorithms: LZ77 and Huffman Coding.

Phase A: LZ77 (Dictionary-based Compression)

LZ77 (created by Abraham Lempel and Jacob Ziv in 1977) looks for repeating sequences of data.

Imagine the filtered data looks like this string of characters: A B C D E F A B C D E F

LZ77 realizes that the second A B C D E F is identical to the first. Instead of writing those characters out again, it replaces the second sequence with a "pointer" that essentially says: "Go back 6 spaces and copy the next 6 characters."

In raw binary data, this means if there is a recurring pattern of colors (like a flat blue sky or a solid UI button), LZ77 will collapse all those repeating bytes into tiny back-reference pointers. This is why PNGs are spectacularly good at compressing illustrations, logos, and screenshots, but struggle with noisy photographs (where repeating patterns are rare).

Phase B: Huffman Coding (Entropy Encoding)

After LZ77 has replaced repeating patterns with pointers, the data is passed to a Huffman Encoder (invented by David A. Huffman in 1952).

Standard computers store characters using a fixed length. For example, in ASCII, every character takes exactly 8 bits.

A = 01000001 (8 bits)
Z = 01011010 (8 bits)

Huffman coding looks at the frequency of the data. If the letter E appears 10,000 times in a file, but the letter Z only appears twice, why should they both take up 8 bits?

Huffman coding creates a custom "dictionary" (a binary tree) for the specific file it is compressing. It assigns very short codes to the most frequent values and longer codes to the rare values.

For example, after Huffman coding:

The most common byte might become just: 0 (1 bit)
A slightly less common byte might be: 10 (2 bits)
A very rare byte might be: 110110 (6 bits)

Because the pre-processing Filtering step (Step 1) transformed the image data into a sequence heavily dominated by zeros and small numbers, the Huffman Encoder can assign incredibly short 1-bit or 2-bit codes to those numbers, drastically shrinking the overall file size.

4. Advanced PNG Optimization Techniques

While the standard PNG encoding process is powerful, modern developers use advanced tools to push lossless compression even further. These are known as PNG optimizers.

Removing Chunks (Metadata)

A PNG file is made up of "chunks". Besides the critical image data chunk (IDAT), a PNG can contain chunks for text comments, color profiles, gamma correction, and EXIF data. Optimizers can strip out non-essential chunks, saving kilobytes of data without affecting the visual image.

Brute-forcing Filters

Standard image editors like Photoshop usually apply a basic, fast filtering heuristic when saving a PNG. Dedicated optimizers like pngcrush or zopflipng take a different approach: they brute-force it. They compress the image thousands of times using every possible combination of row-filters and DEFLATE window sizes to find the absolute smallest possible file size mathematically permitted.

Zopfli Compression

Google developed a deeply optimized DEFLATE implementation called Zopfli. While it is much slower at compressing data than the standard zlib library, it creates files that are typically 3–8% smaller than maximal zlib compression, whilst remaining 100% compatible with all standard PNG decoders.

Conclusion

The next time you save a logo or a screenshot as a PNG and marvel at its crisp edges and small file size, remember the incredible computer science working behind the scenes.

It is the intelligent synergy of delta-encoding (Filtering) to reduce variance, LZ77 to eliminate repeating patterns, and Huffman coding to minimize the bit-length of frequent values that allows PNG to deliver pristine, lossless quality in an internet-friendly package. Understanding this process not only gives us an appreciation for the formats we use every day, but also empowers developers to make informed choices when optimizing assets for web performance.