The Questions:

  • What does PNG image structure look like?

  • PNG is defined by the PNG specification as the image format of Lossless Compression. Does PNG support lossy Compression?

PNG Overview

1. PNG Introduction
  • PNG (Portable Network Graphics) is a lossless compression image format, supporting index, gray, RGB three color scheme and Alpha channel features (Most of the cutscenes in iOS are in PNG format).
  • There are three main types of PNG images: PNG 8, PNG 24 and PNG 32. Among themPNG 8Two different forms of transparency are supported, index transparency andAlphaTransparent,PNG 24Transparency and are not supportedPNG 32in24Bit base has been added8Bits Transparent channel.
  • Portable Network Graphics (PNG) Specification (Second Edition) Portable Network Graphics (PNG) Specification (Second Edition)
2. PNG structure
  • The PNG structure is as follows: Header, chunk, chunk, chunk… . The chunk; Among them,headerThe header representing a PNG image, consisting of a fixed 8 bytes, is:89 50 4E 47 OD 0A 1A 0A; whilechunkA block of data representing a PNG image.

3. PNG data blocks
  • PNG data block consists of four data fields: length, data block type code, data block data and cyclic redundancy check. The data block is divided into two types: key data block and optional data block. Key data block includes: file header data block, palette data block, image data block and image end data block
  • What really matters about image presentation is the data block area within the image data block;
  • IHDR data block (File header data block) : There can only be one IHDR block in a PNG image, which is the first block in a PNG image and contains 13 bytes (0000 000d). Details are as follows:
Domain name Number of bytes (bytes) instructions
width 4 Image width, in pixels
height 4 Image height, in pixels
bit depth 1 Represents the total number of bits in a channel
color type 1 Color type.[0] : grayscale image, 1,2,4,8 or 16 [2] : True color image, 8 or 16 [3] : index color images, 1,2,4 or 8 [4] : Gray scale image with α channel data, 8 or 16 [6] : True color image with alpha channel data, 8 or 16
compression method 1 Compression method (LZ77 derived algorithm)
filter method 1 Filter method
Interlace method 1 Interlaced scanning method.0: non-interlaced scan 1: Adam7(7 times interlaced scanning method)
  • 0000 000dIs the length of the iHDR data block, which is 13,4948, 4452,Is the type of the data block, which is IHDR, followed by data,0000 02bcIs the width of the picture,0000 03a5Is high,08Bit depth, which means a channel is 8 bits,06Color type, which means true color,00Is the compression method, currently there is only one in PNG, that is, LZ77 derived algorithm,00Is the filter method, indicating that it is not used,00Interlaced scanning indicates no scanning.8f 1434 a4Is a four-byte CRC check code.
  • IDAT data block (Image data block) : Store each pixel of the image. There can be multiple IDAT data blocks in an image. The data here will be stored byInterlace Method,FilteringandCompression algorithm (COMPRESSION)To deal with.
  • IEND data block (Image end data block), PLTE data block (Palette data block, before IDAT data block), the introduction is omitted.
4, summarize
  • By understanding the structure of PNG images, you can reduce the size of PNG images by removingPNGFile unwanted information, or select the correct PNG format (e.g., if not in the image)AlphaChannel, then it should be usedPNG 24Instead of usingPNG 32. Similarly, if the image is grayscale, it should be usedPNG 8)

PNG compression principle

1. Lossless compression VS lossy compression
  • Lossless Compression: A method of data Compression in which data is compressed without loss of information and can be completely restored to its original state.
  • Lossy compression (Lossy compression) : A method of data compression in which compressed and decompressed data is different but very similar to the original data.
  • Lossless compression is relative to lossy compression. Lossy compression abandons the secondary information data and sacrifices some quality to reduce the amount of data and improve the compression ratio.
  • The PNG Compression process is divided into two stages: Prediction and Compression.

2, PNG compression Prediction

  • Simple understanding: at this stage, do some preprocessing of the picture, convenient subsequent compression processing;

  • Each row of data in the picture will be processed. First, the value of each channel in each pixel in the row will be processed through Filter, and then the value of the channel will be recalculated by the difference processor.

  • The difference processor will do differential encoding based on the difference between the channel values at this pixel and the corresponding channel values at the previous or above pixel, that is, if the channel values between the adjacent pixels are very close, then we will get a lot of small values like 1,0 and -1. (The difference encoder compares the values of the corresponding channels between pixels, not the entire pixel)

  • The purpose of the whole Prediction stage is to select an appropriate difference processor so that the final coding result will have as many zero values and repeated values as possible, which will affect the Compression rate in Compression stage.

3. PNG Compression

  • After Prediction is completed, the result of this transformation will be output to Deflate. Deflate performs the real compression operation, which will encode the image through LZ77 and Huffman, and finally save the processed result. In the Compression stage, its final Compression rate will be affected by two aspects:

    • For areas with similar colors, that is, areas with many zeros, the compression rate will be higher. However, if there is a big difference between colors, the compression effect will be much worse.

    • Deflate match for each row: The entire process is handled row by row. Deflate limits the number of symbols in a row to between 3 and 258, meaning that the maximum compression ratio is 1032:1. When the number of symbols is less than 3, there is a possibility of mismatching. Therefore, changing the width of the image may affect the final compression effect.

4, summarize
  • As can be seen from the above content, PNG compression optimization can be used to reduce the size of PNG images. There are two directions for compression optimization:
    • The difference encoder is optimized so that the image encoded by difference has as many zero values and the same value as possible
    • To optimize theDeflateTo obtain higher compression rate

PNG lossy compression scheme

1, an overview of the
  • Most of the current PNG compression is based on LZ77 derived algorithm, resulting in higher compression ratio, smaller file size, and no loss of data [lossless compression].
  • However, some great gods cannot accept the compression ratio of lossless compression, so lossy compression algorithm is designed and implemented, and applied in engineering.
2, TinyPNG

  • A platform for PNG lossy compression: tinypng.com/

  • TinyPNG uses Quantization to merge images of similar colors, compress 24-bit PNG images into much smaller 8-bit images, and remove unnecessary metadata. Images exported from tools such as Photoshop will carry this information), which almost perfectly supports the transparency of the original image.

  • TinyPNG does not disclose the PNG lossy compression algorithm they use.

3,pngquantAlgorithm and its application
  • Pngquant.org/ is a popular PNG lossy compression algorithm

  • ImageAlpha and PNGyu use the PngQuant algorithm. There is even speculation that TinyPNG may make comprehensive use of PngQuant, OpTIPng, ADVPNG to achieve a good compression effect.

  • The core of pngQuant is to reduce the number of colors in an image by Vector Quantization

    • If the colors in the image are less than256, so we can convert it to an indexPNGFormat if the original color of the picture is greater than256So you can go throughVector quantizationMethod to create an indexPNGFormat.
    • In the process of vector quantization, all pixels are grouped based on their color similarity, and the colors of pixels within a group are relatively close. Then, according to all the colors in the group, a center point color is calculated, and all the colors in the group will be replaced by the color of the center point.
    • Vector quantization reduces the number of colors in an image by replacing similar colors with the same one, thus potentially distorting the image.

  • With lossy compression, you need to strike a balance between image quality and size.

Reference:

  • Pngquant – a useful PNG compression tool
  • Image compression knowledge comb (2) – reduce PNG size