13 Steps of Ultimate PNG Optimization

Approximately a quarter of images on sites - this is PNG. And understanding the format and means of optimizing it will allow you to make websites faster by reducing the size of PNG images. We talk about the features of this format and will offer some more techniques that will reduce your images in size.

PNG-format assumes no loss in quality when saving images (yes, it allows to have a full-color image with translucency WITHOUT loss of quality). But to maintain this advantage, you do not need to lose in size. In some cases - for example, gradient or low-color images - PNG is the most profitable format in terms of size.

1. Choosing the right format

Not always PNG is the optimal format for representing an image. If the number of colors in the PNG is very large, then it is better to use the JPEG format. But this is not always possible due to the technical task: for example, it is required to provide transparency or translucency for compatibility with the background.

In this case, it is worth considering the option of combining a PNG image with a background for saving in JPEG format, or generating a set of images (with different backgrounds) - again for the final save in JPEG format. In most cases, the full-color image in JPEG will be 2-3 times smaller in size than the PNG-equivalent.

2. Removing chunks

There are a huge number of PNG optimization programs, and most of them do roughly the same thing: they select different filter sets to reduce the size of the main, color information. But there are a few more approaches to reducing the size of PNG images, which also need to be kept in mind.

The first is: removing garbage in meta-information (unused chunks) and in the palette used (unused colors). Important are IHDR, IDAT and IEND-chunks. All the rest contain auxiliary information (but, for example, removing the gAMA chunk resulted in "spoiling" of images in the Safari browser of older versions). Chunks with comments, the date of change and color profiles (for printing) can be safely cleaned out: for the browser is a useless set of characters.

3. Choosing the Right Palette

There are 6 variants of PNG format for different tasks: gray palette, color palette (256 colors), full color palette, and additionally each option can include transparency. Choosing the right palette and transparency allows you to reduce the size of the PNG image. If you have less than 256 colors, always choose PNG8 and watch for transparency (some editors do not know how to preserve translucency for PNG8).

If the image contains only grayscale, then your choice is Grayscale.

If the image has more than 256 colors - try converting it to PNG8. Perhaps, the degradation of quality will be invisible. If there are too many colors, consider the option with JPEG format. If this is not possible, then choose TrueColor and watch for transparency.

4. Optimization of the alpha channel

A number of tools allow you to use non-indexed alpha channel, and full translucence, preserving the original palette (for example, in 256 colors). This significantly reduces the size of the image.

Additionally, you can use Dithering to smooth out a small number of colors when translucent.

5. Optimization of filters

The main "workhorse" of PNG optimization is choosing the right set of filters for each row (the PNG image is coded in line), which will provide the minimum overall image size. Filters in PNG are fairly simple: they predict adjacent pixels and represent, in fact, an enhanced version of data compression.

In the optimization of filters, almost all PNG optimization utilities will help: this is pngcrush, and optipng, as well as all online image optimization services. It makes sense to apply filter optimization only after going through the previous steps.

6. Optimizing compression

Almost the final point where you can still "squeeze" PNG is compression. Thanks to the open format (unlike GIF), PNG supports a large number of compression algorithms, in particular, zlib, 7-zip, Kzip, zopfli. Different utilities optimize images in different ways, and optimization due to compression should always go in the finale: after selecting a palette, transparency and optimization of filters. Although sometimes less optimal sets of filters can give a smaller file in combination with another compression.

Optimization of data compression is used by the following utilities: optipng, TruePNG, PNGwolf, AdfDef, PNGout.

7. WebP: a lightweight alternative

The WebP format due to a larger number of filters and a more adaptive approach to the indexed palette and transparency makes it possible to significantly reduce the size of PNG images. It's worth noting that WebP is not supported by all browsers, so the PNG alternative.

The PNG format assumes no loss in quality when saving images. But in some cases, storing with distortion (Dithering or posterization) allows you to get images that are almost identical to the original, but are essentially smaller.

8. Posterization, palette and grayscale

Posterization (not to be confused with pasteurization) can reduce the number of colors in the PNG file due to some adaptive algorithm (for example, mediancut or k-means). Usually the reduction in the number of colors is 2-3 times invisible to the eye, but reduces the image size by 20-50%.

The most famous pasteurization tools are Photoshop, pngquant, pngnq and TruePNG.

Choosing the right palette (for example, using only grayscale or only 256 colors) - if it is not already done - also significantly reduces the image size (each pixel is encoded 1 byte instead of 3).

9. Mask of transparency

A little-known technique, well described by Sergei Chikyonok. The essence of it is to remove the color information (nullification) from completely transparent pixels. This reduces the actual number of bytes in the IDAT chunk and allows the use of more optimal filters.

Fortunately, some PNG optimization utilities, in particular TruePNG, allow you to do this automatically.

10. Dithering

More interesting technique from Sergey, applicable not only to PNG images. The essence is to select areas of the image that can be blurred (apply dithering) while preserving the visual quality (or rather, selecting areas of the image for which blur can not be applied).

This optimization technique is not a technique with loss of quality, but the final image will be different from the original one, so it is important to choose such parameters in which quality loss will be minimal (visually).

Dithering allows to increase the compressibility of the image by filters (by discarding some color information). Fine tuning saves up to 20% of the image. In the automatic version, Dithering is not yet applicable, but your favorite image editor will do this with masks and selective filters for the PNG image.

11. Interlacing

The interlacing technique is similar to the progressive JPEG: at each pass the PNG-image gets more information, and the details of the image begin to "manifest".

Graphical editors, as well as console utilities (for example, convert), allow the use of hypertext (by lines or colors) for PNG images. In some cases, the gain from this method can be 5-10%.

12. Heuristic filtering

The main approach for optimizing the presentation of color information in PNG is a complete search of the filters for each line of the image, and the selection of the most optimal set for the image as a whole. But since filters can use the color information of the previous line, the number of options even for a small image (100 lines) is significant. Therefore, all utilities make some or other assumptions on the effectiveness of filters and reduce the overall search.

Heuristic (predictive) algorithms can provide more effective application of filters, based on the features of this image. This approach is implemented, in particular, in the utility pngwolf. Using filter heuristics in conjunction with other PNG filter optimizers reduces the resulting image size.

13. Zopfli for compression

The final point where you can still "squeeze" PNG is compression. PNG supports a large number of compression algorithms, in particular, zlib, 7-zip, Kzip, zopfli. It makes sense to use the most advanced of them - it's zopfli (bzip2 is not supported due to the time of unzipping, and h.264 is supported only in WebP).

Using zopflipng to compress PNG files (not to be confused with "compression on the fly", which is used for text files) reduces the current color information size after the most effective palette and the most effective filters are applied (and disable archiving in other optimization utilities). This will reduce the PNG size by another 3-7% relative to compression in other formats without significantly increasing the optimization time.

The most of described techniques (except manual color and dithering image transformation) are applied to images in Airee Cloud automatically depending on selected image optimization level.