In our daily work, it is used every day, and in the network transmission and picture display, is a very mainstream format, today this article, using PNG, as the protagonist, to explore some knowledge of picture compression;

PNG

  • Small size: PNG is smaller than others when transferring the same image
  • Support transparency: This is a feature that GIF and JPEG do not have

PNGData structure of

Isn’t it similar to the structure of an HTTP request, a Head and a bunch of chunks, that’s PNG data structure;

If you open a PNG with Vim

## step1. Open a PNG
vi -b xxx.png
## step2. Use hexadecimal display: %! xxdCopy the code

8950 4e470d0a 1A0A: This is the header of a PNG image. All PNG images have this header.0000000D: Indicates the length of the iHDR data block13.4948 4452: is the type of the data block, which is IHDR, followed by data.000000C8: is the width of the picture, convert it to200.000000C8: is the height of the picture200
Copy the code

pngHow do you compress it?

Compression is divided into two stages: parsing + compression, PNG has its own special processing;

Parsing phase (special encoding mode)

Before the compression, there is a step called analysis (Prediction). After processing, it is more convenient for the compression behind. Before making up, it is similar to playing foundation, applying lotion and touching essence. PNG preprocesses the image with Delta encoding, processing the value of each channel in each pixel, R (red), G (green), B (blue), A (transparent);

There are mainly several kinds of checking codes:

  • Not filter
  • X-A
  • X-B
  • X-(A+B)/2
  • Paeth inference

The image is a gradient of increasing redness, which intensifies from left to right and maps to an array of values [1,2,3,4,5,6,7,8].

Using x-A differential encoding, which is: [2-1=1, 3-2=1, 4-3=1, 5-4=1, 6-5=1, 7-6=1, 8-7=1], the result is [1,1,1,1,1,1], which has A large number of repeated digits, making it ideal for compression.

The goal of differential encoding is to convert as many PNG data values as possible into a set of repetitive, low values that are easier to compress. Finally, it should be noted that differential coding deals with the values of each color channel in each pixel, and the values of R (red), G (green), B (blue) and A (transparent) color channels are processed separately.

Compression phase (delete image information)

In the compression stage, the results obtained in the pre-processing stage will be Deflate compressed. This compression algorithm will mark all the repeated data of the image, record the data characteristics and structure, and get a PNG image encoded data with the maximum compression ratio.

Before we know the PNG data structure, a NG image is composed of many data blocks, but not all of them are necessary, some device information, aperture information, shooting date, location information can be directly discarded;

For a realistic scenario, saving a PNG in Photoshop would be huge, because Adobe stores a lot of information in PNG. Designers need this information, but the front end doesn’t need it. If you use Photoshop’s “Export Web format”, you can get rid of this useless information. So the volume is small, you can try;

What kind of picture compresses well?

PNGS with more monochromatic colors, fewer color values, and less color difference have higher compression rates, and smaller sizes have higher compression rates, which is why gradient images, images with less variation in color values, and images with a single color are easier to compress.

It’s just red and green, and if you use 0 for red and 1 for green, the graph would look something like this in numbers:

00000000000000000
00000000000000000
00000000000000000
1111111111111111111111111
1111111111111111111111111
1111111111111111111111111
Copy the code

This image uses a large number of repeated numbers. We can remove the repeated numbers and directly represent this image with the array form [0, 1]. Only two numbers can represent a large image, which greatly compresses a PNG image.