Analysis of Compression Principle of PNG Pictures-Tears of Diaosi

  html5, java, javascript, node.js, php

Background

At 1: 00 a.m. this morning, a person suddenly added my qq, which turned out to be my first love deleted ten years ago. . . .

Because there was too much interaction in qq space before, qq recommended friends often recommended us to know each other. . . . The Embarrassment of Mystery

图片描述

After agreeing to her friend’s application, I carefully watched all her qq updates and photos in the past ten years.
She has become beautiful and can dress up. Her thin figure with the present dress and makeup is already a goddess beyond my knowledge.

However, I am still mediocre, with a bloated body and a rising hairline. I work hard and rush about everyday and am still poor.

In a word, how do you feel now?
“You have reached a higher peak and I can only look at your far back.”

She lit a cigarette silently and saved all the beautiful photos of her.
Huh? It is found that each photo is in the picture format of. png.
png? ? We use png pictures every day, but what is png and what is its compression principle?
Very well, I will explain one by one to you next.

What is PNG

The full name of PNG is Portable Network Graphics, which is currently the most popular picture format for network transmission and display, for the following reasons:

  • Lossless compression: PNG picture adopts LZ77 derivation algorithm to compress the file, which makes its compression ratio higher, the generated file volume smaller, and does not lose data.
  • Small volume: It uses a special encoding method to mark repeated data, making the PNG picture file with the same format smaller. Due to bandwidth constraints in network communication, PNG format pictures are preferred on the premise of ensuring clear and realistic pictures.
  • Support transparency effect: PNG supports the definition of 256 transparent layers for the original image, enabling the edge of the image to be smoothly fused with any background. This function is not available in GIF and JPEG.

PNG type

There are mainly three types of PNG pictures, namely PNG 8/ PNG 24/PNG 32.

  • PNG 8: 8 in PNG 8 actually refers to 8bits S, which is equivalent to storing the color type of a picture with a size of 2 8 (2 to the power of 8). 2 8 equals 256, which means PNG 8 can store 256 colors. If a picture has few color types, it is very suitable to set it as the picture type of PNG 8.
  • PNG 24: 24 in PNG 24 equals 3 times 8 equals 24, that is, three 8bits are used to represent R (red), G (green) and B (blue). R (0 ~ 255), G (0 ~ 255) and B (0 ~ 255) can express 256 times 256 times 256=16777216 color pictures, so PNG 24 can represent more colorful pictures than PNG 8. But the space occupied is relatively larger.
  • PNG 32: 32 of PNG 32 is equivalent to PNG 24 plus 8bits transparent color channel, which is equivalent to r (red), g (green), b (blue), a (transparent). R(0~255),G(0~255),B(0~255),A(0~255)。 There is one more A (transparent) than PNG 24, that is, PNG 32 can represent as many colors as PNG 24, and also supports 256 transparent colors, which can represent more abundant picture color types.

How do you say, in general, PNG 8/ PNG 24/PNG 32 is equivalent to our diaosi heart, the goddess is divided into three categories:

  • A kind of goddess = PNG 8When the diaosi licked the dogs and saw the first kind of goddess, they immediately felt happy and smiling. the black printing hall of diaosi gradually opened up, confirming their eyes and feeling moved.
  • Goddess ii = PNG 24The second kind of goddesses are beginning to be powerful, which will give diaosi a kind of heart-string shock with chrysanthemum tightening and deafening. Having more contact with the second kind of goddesses can make diaosi perk up every day and prolong life.
  • Three goddesses = PNG 32In front of the third kind of goddess, all languages look pale. It is a kind of supreme existence that makes diaosi transparent up and down and hands and eyes reaching to heaven. Extraordinary and refined, the descent of the gods is not enough to depict half of her beauty. I have seen it only in dreams.

Ah. . . My first love, looking at her present photo, should have touched PNG 24.

PNG picture data structure

The data structure of PNG picture is actually very similar to the structure of http request, which is a data header followed by many data blocks, as shown in the following figure:

图片描述

If you open a png picture in vim’s viewing coding mode, it will look like this:

图片描述

Holding the grass, did you feel as obscure as the goddess’s mind when you first saw this lump of hexadecimal code?

Brother, don’t panic. To tell the truth, if it were as simple as that lump of loose code, I would have had many wives and concubines.
Next, I will explain the meaning of this pile of hexadecimal codes one by one.

8950 4e47 0d0a 1a0a: This is the head of the PNG picture. All the heads of the PNG pictures are encoded in this string. The picture software judges whether this file is a PNG format picture through this string of encoding.

0000 000d: is the length of the iHDR data block, which is 13.

4948 4452: is the type of data block, IHDR, followed by Data.

0000 02bc: is the width of the picture.

0000 03a5: height.

By analogy, each hexadecimal code represents a specific meaning. The rest below will not be analyzed one by one. There are too many. Let’s check them out by our friends.

What kind of PNG picture is more suitable for compression

For conventional png pictures, the more single the color, the less the color value, the greater the compression ratio, such as the following picture:

图片描述

It is only made up of red and green. If 0 is for red and 1 is for green, then the figure is like this:

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 use the array form of [0, 1] to directly represent this picture. Only two numbers can represent a large picture, thus greatly compressing a png picture.

So! The single color, the smaller the color value, and the smaller the color difference, the greater the compression ratio and the smaller the volume of png pictures.

Compression of PNG

The compression of PNG pictures is divided into two stages:

  • Prediction: This stage is to preprocess the png picture and make it more convenient for subsequent compression. To put it bluntly, she is a goddess. Before makeup, she will make a base first, apply lotion and essence first, so as to facilitate subsequent makeup, whitening, eye shadow, polishing, etc.
  • Compression: Performs Deflate compression, which combines LZ77 algorithm and Huffman algorithm to encode pictures.

Prediction

Png pictures are preprocessed with Delta encoding to process the values of each channel in each pixel point. There are mainly several types of differential encoding:

  • No filtering
  • X-A
  • X-B
  • X-(A+B)/2 (also called average)
  • Paeth inference (this is more complicated)

Suppose that a png picture is as follows:

图片描述

This picture is a gradual color map with gradually increasing red color. Its red color gradually increases from left to right. The values mapped into the array are [1,2,3,4,5,6,7,8]. If X-A differential encoding is used, that is:

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

The results are as follows

[1,1,1,1,1,1,1]

The last [1,1,1,1,1,1,1,1] result has a large number of repeated numbers, which is very suitable for compression.

This is why it is easier to compress gradient images, images with small color changes and single color.

The purpose of differential encoding is to convert png picture data values into a set of repeated and low values as much as possible, and such values are easier to compress.

Finally, it should be noted that differential encoding processes the values of each color channel in each pixel point, and the values of four color channels of R (red), G (green), B (blue), and A (transparent) are processed separately.

Compression

In the compression stage, the results obtained in the preprocessing stage will be subject to Deflate compression, which consists of Huffman coding and LZ77 compression.

As mentioned earlier, Deflate compression will mark all the duplicate data of the picture and record the data features and structure, thus obtaining a png picture coding data with the largest compression ratio.

Deflate is an algorithm for compressing data streams. It can be used anywhere stream compression is required.

Also, as we said earlier, a png picture is made up of many data blocks, but some information in the data blocks is actually useless. For example, if photoshop is used to save a png picture, there will be a block record in the picture: “This picture was created by Photsop”. Many similar information are useless. If Photoshop is used to “export web format”, these useless information can be removed. The comparison effect before and after exporting the web format is shown in the following figure:

图片描述

As you can see, after exporting the web format and removing a lot of useless information, the picture is obviously much smaller.

Conclusion

The above is my understanding of png. It is not well written, just like a fragmented middle-aged and elderly person, without any rules.

The reason why I broke up with my first love that year was because I was afraid it would affect my study. . . However, after the separation, the results were still very bad. Not only did she miss the goddess, but she has still accomplished nothing.

Now middle age has arrived, with huge mortgage on his body and starving children at home, he suddenly wants to open up when he looks at his wife snoring in the sky.

As Lu Xun said:

“Love is like picking up shells on the beach. Don’t pick up the biggest or the most beautiful ones. Pick up what you like best. The most important thing is never to go to the beach again if you pick up what you like.”

. . . . . .

After writing the article at 4 am, I fell asleep unconsciously.

The dream returned to the summer ten years ago. We all laughed sweetly.

Look at your weeping face and say goodbye to me with a smile.

Goodbye

Author: No.1 Tadpole

Github: The article will be shared in the first placeThe mental process of the front-end diaosiWelcome star or watch, thank you

Team promotion

Finally,Tencent News TNFE Front End TeamFor front-end developers, the latest high-quality content in small programs and web front-end technologies has been compiled. It is updated weekly. Welcome to star, github address:https://github.com/Tnfe/TNFE- …