Analysis of the Principle of PNG Image Compression

What kind of PNG images are more suitable for compression?

For regular PNG images, the more uniform the color, the fewer the color values, and the higher the compression rate. For example, take the following image:

It is only composed of pink and green. If 0 represents pink and 1 represents green, then the digital representation of this picture is as follows:

00000000000000000

00000000000000000

00000000000000000

1111111111111111111111111

1111111111111111111111111

1111111111111111111111111

We can see that this picture uses a large number of repeated numbers. We can remove the repeated numbers and directly represent this picture in the form of an array like [0, 1]. With just two numbers, a large picture can be represented, which greatly compresses a PNG picture.

Therefore, the more uniform the color of the picture, the fewer the color values, and the smaller the color difference, the higher its compression rate will be, and the smaller its size will be.

Compression of PNG

The compression of PNG images is divided into two stages:

Prediction:This stage is to preprocess the PNG image, making it more convenient for subsequent compression.

Preprocess the PNG image using differential encoding, processing the value of each channel in every pixel. There are mainly several types of differential encoding:

No filtering

X - A

X - B

X - (A + B)/2 (also known as the average value)

Paeth prediction (this one is more complex)

Suppose, a PNG image is as follows:

This picture is a gradient color map with a gradually increasing red color. Its red color intensifies from left to right. When mapped to an array, the values are [1, 2, 3, 4, 5, 6, 7, 8].

If we use the differential encoding of X - A, it would be:

[2 - 1 = 1, 3 - 2 = 1, 4 - 3 = 1, 5 - 4 = 1, 6 - 5 = 1, 7 - 6 = 1, 8 - 7 = 1].

The resulting sequence is [1, 1, 1, 1, 1, 1, 1].

This final sequence [1, 1, 1, 1, 1, 1, 1] has a large number of repeated numbers, making it very suitable for compression.

Compression:Perform Deflate compression. This algorithm combines the LZ77 algorithm and the Huffman algorithm to encode images.

The compression stage will perform Deflate compression on the results obtained in the preprocessing stage. It consists of Huffman coding and LZ77 compression.

As mentioned before, Deflate compression will mark all the duplicate data in the image and record the data characteristics and structure, resulting in encoded data of a PNG image with the maximum compression ratio.

Deflate is an algorithm for compressing data streams and can be used wherever streaming compression is required.

Also, as we mentioned before, a PNG image is composed of many data blocks, but some of the information in the data blocks is actually useless. For example, if you save a PNG image with Photoshop, there will be a block in the image recording "This image was created by Photoshop". Many such pieces of information are useless. If you use Photoshop's "Export as Web Format", you can remove these useless information. The comparison effect before and after exporting as Web Format is shown in the figure below:

It can be seen that after exporting to web format and removing a lot of useless information, the picture is significantly smaller.