Finally understand PNG (2023)

This article is the follow-up article ofI finally understand JPG, which I'd like to recommend to anyone who wants a more in-depth, but generally understandable introduction to JPG compression. However, this time I want to explain how a PNG works and show you at the end of the article how to reduce the file size of your PNGs using Compress-Or-Die (which I'll call COD in the rest of the article).

As in the previous article, I am going to simplify some aspects if it makes it more understandable, because the buzzword math bingo is of no use to anyone and very few who want to reduce the size of their image are mathematicians, but rather web workers. or specialists in digital advertising. .

In order to be able to compare the file sizes resulting from the use of different tools (compress-or-die.com, Photoshop, TinyPNG and Co.), I refer to the sectionComparable file sizesin the JPG article.

Now let's get started. Look at these two photos of balls:

4.492 Mrd	128.025B

Both images look the same, have the same width and height, both are PNG, but the file size is significantly different. Because?

In the course of the article I will continue to work with this image and bring you closer to the subtleties that lead to this fact.

color depths

Most of his images are inRGB-Fabmodell(as in our example image) and therefore a pixel of your image consists of the three colors (or color channels) red, green and blue, each of which can have 256 hues. 256 increments, since each color in a pixel must be represented using 1 byte of memory. And a byte can represent exactly 256 values. With a memory consumption of 3 bytes, a full pixel can be represented (1 byte for red, green, and blue).

Now if you have an 800 x 600 px image, this results in a memory consumption of 800 x 600 x 3 bytes = 1,440,000 B = 1.44 MB. This is also about the size of an uncompressed BMP image (and the size of A3.5" HD floppy disk...for those who can still remember).

If you wanted to describe color depth, you could talk about a 3-byte image. However, since there are color depths other than 1 byte per channel, the designation is 24-bit image (ie, 3x8-bit image). used for an image, because 1 byte consists of 8 bits. The color depth means the memory consumption of one pixel.

The other two color depths you'll come across when puzzled by the PNG image format are 32-bit and 8-bit:

APNG de 32 bitsSimilar to a 24-bit PNG, but also includes an 8-bit channel for transparency information (commonly called an alpha channel). Therefore, an image can also contain transparent areas in 256 gradations.

By the way, Photoshop doesn't show a selection box for 32-bit PNG in the "Save for Web..." dialog. You need to select "PNG-24" and check the "Transparency" box.

APNG de 8 bitsit works a little differently. Up to 256 colors with their information of red, green, blue and transparency are combined in one callPallette, and for each pixel only the position of the color in the palette is stored. So to store a pixel you only need 1 byte of memory for the position of the color in the palette. Then there's pallet storage. However, such an image is limited to a maximum of 256 colors, which is more than enough for most images that it makes sense to save as PNG. Therefore, this is the most significant color depth in PNG compression.

Here is a brief description of the three color depths:

This is one of the reasons why the first PNG with the bullets is smaller than the other. The smaller first PNG is an 8-bit PNG, while the larger PNG is a 32-bit PNG.

We now know what color depths mean and how to calculate the file size of an uncompressed image, but the data still takes up a lot of space and needs to be compressed accordingly.

the compression

A PNG is compressed in three steps: pre-filtering, dictionary-based encoding via LZ77, and finally entropy encoding according to a Mr. Huffman.

Step 1 – Prefiltering

Data is best compressed when it is repeated as often as possible. So by pre-filtering you are trying to generate the same data from different data.

Let's look at the red values ​​of a 5x5 px image:

The red tones...	... and its numerical representation

On each row, you can use the "Sub" filter (one of 5 possible filters), which means we only remember the difference from the previous value. This step can be undone later so no data is lost. In our example, each line indicates that the "Sub" filter was used. Our save values ​​now look like this and can now be compressed much better:

The values ​​filtered by "Sub".

These filters, along with the internally used Deflate compression, are the reason why PNG is one step ahead of GIF and is therefore almost always smaller. And they offer an important tactic for optimizing PNG compression.

Each PNG algorithm has the thankless task of figuring out which filter is best for which row, in order to iterate over as much data as possible, it may no longer be similar to row 5. Which solution is better?

Finding the optimal filter for each line is a science in itself, which you could of course get close to with the raw power of the computer. filters are selected based on experience and assumptions. Some programs do this better than others.

Another option would be to adjust your image data to make the filters work better. So this is a lossy process, since the original image data can no longer be recovered.

For example, if you have a black area that is not really black, but instead consists of many almost black pixels with different intensity values, if you have an unfavorable situation in terms of compression equal black value for all pixels, you will see that your file the size is greatly reduced, although your eye sees no difference.

Step 2: Dictionary-based encoding with LZ77

LZ77is a lossless data compression method that attempts to find repetitive data streams. If the algorithm finds a previously used data stream in the file, it replaces it with a reference to the first stream: "Here, use the data stream that appears 1300 characters above and is 200 characters long."

Therefore, a PNG is excellent for storing repetitive data. If you have the same representation of objects in a PNG file, only the first screen will take up space. The others are provided to you free of charge.

If you're creating a PNG in COD, you've probably already seen the caption imagecompression view(Also affectionately called on a forumpredator vision). This image shows you how much memory was invested in a specific area of ​​the image. Bothcompression views for spherical images are as follows:

4.492 Mrd	128.025B

Dark blue means that this area uses almost no memory, light blue means some memory, yellow means more memory, and red means a lot of memory.

In the first image we can clearly see that only the first appearance of the colored balls costs storage space. All the others were made available to you "for free" as their representations exactly matched the first ball of the same color.

And in the second image, you can now clearly see that the balls look the same, but actually neither ball corresponds to the other. Each ball must be stored individually Gradient and light noise over the entire image.

Beware of the sliding window

In fact, you must have run into something... why does the third red sphere take up memory when two identical red spheres have already been used in the image?

This is because PNG internally uses thedeflationalgorithmDeveloped in 1996 by Phil Katz, who used a 32 kB sliding window due to low storage capacity at the time. 32,000 characters are checked for repeating sequences. If the distance between two objects is too great, both objects are no longer recognized as equal and therefore each object is saved individually.

I can show you that by building aPuenteand coloring the ball red between the second and third balls as well.

4.492 Mrd	$4,050

The third red ball disappears from thecompression viewand the file becomes even smaller.

Step 3: Entropy coding with Huffman

This is the final step of PNG compression. An attempt is made to represent each character with the smallest possible bit sequence to further reduce the file size. With some computing power it is possible to have some effect with this method. This is attempted, for example, when you set COD to "Extreme Compression". Otherwise, there is nothing important in this method for understanding PNGs.

7 tricks to reduce file sizes

Now I want to show you a few things to pay attention to in order to save as much file size as possible when creating PNG files.

1. Compress original data

Take care to compress the original data and not image data that may already have fallen victim to a non-PNG image compression algorithm.

8.494 Srd

The source image here is a JPG, which produces artifacts that are "fatal" to PNG compression. Firstly, a lot of colors are generated, secondly, image patterns are generated that are not contained in the original and now also need to be saved.

Interestingly, it can also be seen in thecompression view, if an image has been converted to JPG, in this case thecompression view, as in this example, looks like a block (due to the 8x8 pixel grid of the JPG compression). If this is the case, try to keep the original image data.

The result should look more like this and be significantly smaller:

3.847 Mrd

2. Cloning clean objects

In many graphics programs, it is not only possible to edit full pixels, but also to move objects by half a pixel. However, if you want to safely save a graphic of cloned objects as a PNG, the objects must be absolutely identical so that only the first object takes up disk space. Luckily you can see this in thecompression viewvery fast.

Be careful not to move, scale, distort, rotate, etc. accidentally repeat objects multiple times in your image (especially zooms that are not 100%).

3. Dirty transparency

"Dirty transparency" refers to areas of the image that are 100% transparent but still contain all the color information in the other color channels. This is often the case with masked images and wastes space with invisible image information.

Areas with 100% transparency are automatically cleaned up by COD, but improper masking with the brush can also leave areas with 98% or 99% transparency, which take up space because the original image content is still there.

The environmentlenaactually it should be transparent, but in thecompression viewYou can clearly see that some data is compressed there:

$36,948

The adjusted image is 11% smaller with the same image print:

$32,990

4. Use 8-bit color depth

Normally, the quality of an 8-bit PNG should always be sufficient. Therefore, the generation of an 8-bit PNG also defaults to COD. Your image will be reduced to a maximum of 256 colors. Missing colors are simulated byTremble.

Play around with the slider for the number of colors. Straight, flat images, such as logos, rarely need 256 colors. A good rule of thumb is to calculate eight additional colors for each color in the image so that thesmoothinglooks clean If a logo consists of the colors red, blue and black, setting the color slider to 24 should suffice.

5. Posterization

Posterization is the process of reducing color within an image. This makes sense because there are often more colors in an RGB image than the human eye can discern. Tonal separation now combines very similar colors into one. This only bothers when the colors really differ.

Because there are more of the same color values ​​in an image, PNG filters work better and the file becomes smaller. You can adjust this in COD using Quality Control for 24-bit PNG.

$156,830	82.613B
	24-bit PNG at 50% quality.

6. Selective blur

Especially with grainy images with a bit of noise, it's useful to work with selective blur, which you can find in COD in the "Preprocessing" area. It ensures details stay sharp, but surfaces look blurry. PNG filters work best with the resulting clean surfaces, the image becomes smaller.

$156,830	131.242B
	Slightly softened with selective blur.

7. JPG transparency

Normally, JPG does not support transparency. But using javascript can fix this error as long as the image is used in the web environment. Upload a transparent PNG to COD and you will get a transparent JPG and the corresponding HTML code to embed the image on your website. Especially with large transparent images like product images, the resulting image will be much smaller than a transparent PNG. It's even smaller than an 8-bit PNG.

47.219B	$18,020	$10,685
PNG de 32 bits.	8-bit PNG with 256 colors.	JPG with transparency.

And now we are at the end. If you have any questions, suggestions, requests or similardrop me a line.

Otherwise you can also experiment with the spherical image:

Open the ball image in the PNG compressor

Compare COD to the competition and see for yourself how good COD really is:

• smus.it
• TinyPNG
• Kompressor.io
• optimizilla
• Kraken.io
• ImageOptim
• Cesium Image Compressor
• reduce images
• giftofspeed
• short pixel

further reading

• How to Optimize PNGs
• Reduce PNG file size
• PNG-specification

Did you like this article?

So please share it with others!

Facebook Gore Reddit