Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the principle of PNG image compression". In daily operation, I believe that many people have doubts about what the principle of PNG image compression is. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what is the principle of PNG picture compression?" Next, please follow the editor to study!

What is PNG?

The full name of PNG is Portable Network pattern (Portable Network Graphics), which is a popular picture format for network transmission and display for the following reasons:

Lossless compression: PNG images are compressed based on LZ77 derived algorithm, so that the compression ratio is higher, the resulting file size is smaller, and no data loss is lost.

Small size: it uses special coding methods to mark repeated data, so that the same format of pictures, PNG image file size is even smaller. In the network communication, due to the restriction of bandwidth, under the premise of ensuring the picture is clear and lifelike, the picture in PNG format is preferred.

Support for transparency: PNG supports the definition of 256transparency levels for the original image, so that the edges of the image can be smoothly fused with any background, which is not available in GIF and JPEG.

PNG Typ

There are three main types of PNG images, which are PNG 8 / PNG 24 / PNG 32.

8 in PNG 8:PNG 8 actually refers to 8bits, which is equivalent to storing the color types of a picture with a size of 2 ^ 8 (2 to the power of 8). 2 ^ 8 equals to 256. in other words, PNG 8 can store 256 colors. If there are few colors in a picture, it is very appropriate to set it to the PNG 8 picture type.

24 in PNG 24:PNG 24, which is equivalent to 3 times 8 equals 24, uses three 8bits to represent R (red), G (green), and B (blue), respectively. R (zero 255), G (zero 255), B (zero 255), can express 256 times 256 16777216 color pictures, so that PNG 24 can represent more colorful pictures than PNG 8. But the space taken up is relatively larger.

32 in PNG 32:PNG 32 is equivalent to the transparent color channel of PNG 24 plus 8bits, which is equivalent to R (red), G (green), B (blue) and A (transparent). R (0,255), G (0,255), B (0,255), A (0,255). There is one more A (transparent) than PNG 24, which means that PNG 32 can represent as many colors as PNG 24, and also supports 256transparent colors, which can represent a richer variety of image colors.

How can I say, in general, PNG 8 / PNG 24 / PNG 32 is the equivalent of us losers, dividing the goddess into three categories:

A kind of goddess = PNG 8: losers licking dogs immediately feel happy and smiling when they see this kind of goddess, and the black Yin Hall of the losers gradually stretches, confirming that their eyes are moving.

The second kind of goddess = PNG 24: the second kind of goddess begins to be strong, and it will shock the losers with a kind of chrysanthemum. Contact with the second kind of goddess can energize the losers every day and prolong their lives.

Three kinds of goddess = PNG 32: in front of the third kind of goddess, all languages look pale. Being otherworldly and the gods descending to earth are not enough to describe 1/2 of her beauty. I used to see it only in my dreams.

Hey. My first love, looking at her photos now, should have touched the level of PNG 24.

PNG picture data structure

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

If you open a png image using vim's view encoding mode, it will look like this:

Does it feel as obscure as the goddess's mind to see this hexadecimal code?

Brother, don't panic, to tell you the truth, if flirting with girls is as simple as that pile of random codes, my brother, I would have had a lot of 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 header of the PNG picture. The header of all PNG images is encoded in this string. The picture software uses this string to determine whether the file is in PNG format.

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

4948 4452: the type of the 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 of the following will not be analyzed one by one, there are too many, friends to check it out.

What kind of PNG image is more suitable for compression?

For regular png images, the more single the color is and the less the color value is, the greater the compression ratio is, such as the following image:

It is only made up of red and green. If you use 0 for red and 1 for green, then the figure looks 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, directly with the array form of [0,1] can directly show this picture, only two numbers, can show a large picture, so a great compression of a png picture.

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

Compression of PNG

The compression of PNG images is divided into two stages:

Pre-parsing (Prediction): this stage is a pre-processing of the png image to make it more convenient for subsequent compression. To put it bluntly, it is a goddess who will make the bottom before applying makeup and apply lotion and essence first to facilitate subsequent makeup, whitening, eye shadow, lighting and so on.

Compression: performs Deflate compression, which combines the LZ77 algorithm and the Huffman algorithm to encode the picture.

Pre-parsing (Prediction)

Png pictures are preprocessed by differential coding (Delta encoding) to deal with the value of each channel in each pixel. There are several main types of differential coding:

Do not filter

Xmura

Xmurb

X-(average B) / 2 (also known as average)

Paeth inference (this is more complicated)

Suppose a png picture looks like this:

This picture is a gradual increase in red. The red color gradually intensifies from left to right, and the values mapped into an array are [1, 2, 3, 4, 5, 6, 7, 8]. If you use the differential coding of Xmura, that is:

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

The result is

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

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

This is why gradient images, color values do not change much, and single-color pictures are easier to compress.

The purpose of differential coding is to convert the png image data values into a set of repetitive and low values as much as possible, so that the values are easier to compress.

In addition, it should be noted that the differential coding processes the value of each color channel in each pixel, and the values of R (red), G (green), B (blue) and A (transparent) are processed respectively.

Compression (Compression)

In the compression phase, the results obtained in the preprocessing phase are compressed by Deflate, which is composed of Huffman coding and LZ77 compression.

As mentioned earlier, Deflate compression will mark all the duplicate data of the picture, and record the characteristics and structure of the data, resulting in a large compression ratio of png image coding data.

Deflate is an algorithm for compressing data streams. It can be used anywhere that requires streaming compression.

Also, as we said earlier, a png image is made up of a lot of 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 record in the picture that "this picture was created by photshop". A lot of such information is useless. If you use photoshop's "Export web format", you can remove these useless information. The comparison effect before and after exporting the web format is as follows:

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

At this point, the study on "what is the principle of PNG image compression" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.