Understand what PNG is
What is PNG?
The full name of PNG is Portable Network Graphics. It is currently the most popular image format for network transmission and display, and the reasons are as follows: Lossless compression: PNG images use an algorithm derived from LZ77 to compress files, resulting in a higher compression ratio, smaller file size, and no data loss. Small size: It uses a special encoding method to mark repeated data, making the file size of PNG images smaller for the same format of images. In network communication, due to bandwidth limitations, PNG - format images are preferentially selected on the premise of ensuring clear and lifelike images. Support for transparency: PNG supports the definition of 256 levels of transparency for the original image, enabling the edges of the image to blend smoothly with any background. This function is not available in GIF and JPEG.
PNG type
There are mainly three types of PNG images, namely PNG 8, PNG 24, and PNG 32. PNG8: The "8" in PNG 8 actually refers to 8 bits, which means using a size of 2^8 (2 to the power of 8) to store the color types of an image. 2^8 is equal to 256, that is, PNG 8 can store 256 colors. If an image has very few color types, setting it to the PNG 8 image type is very suitable. PNG24: The "24" in PNG 24 is equivalent to 3 times 8, which is 24. It means using three 8 - bit units to represent R (red), G (green), and B (blue) respectively. R(0~255), G(0~255), B(0~255), and it can represent an image with 256×256×256 = 16777216 colors. In this way, PNG 24 can represent images with richer colors than PNG 8. However, it takes up relatively more space. PNG32: The "32" in PNG 32 is equivalent to PNG 24 plus an 8 - bit transparent color channel, that is, R (red), G (green), B (blue), A (transparent). R(0~255), G(0~255), B(0~255), A(0~255). It has one more A (transparent) than PNG 24. That is to say, PNG 32 can represent as many colors as PNG 24 and also supports 256 transparent colors, enabling it to represent a more diverse range of image color types.
PNG image data structure
The data structure of a PNG image is actually quite similar to that of an HTTP request. Both have a data header followed by many data chunks, as shown in the figure below:
If you open a PNG image in the encoding - viewing mode of Vim, it will look like this:
89504e470d0a1a0a: This is the header of a PNG image. The headers of all PNG images are this string of codes. Image software determines whether a file is a PNG - format image through this string of codes.
0000000d: It is the length of the iHDR data block, which is 13. 49484452: It is the type of the data block, which is IHDR, followed immediately by data.
000002bc: It is the width of the image.
000003a5: It is the height. And so on, each segment of hexadecimal code represents a specific meaning.