PNG Compression

To reduce the size of PNG files the software reduces the number of colours in a PNG image, which allows it to convert the 24-bit PNG to a much smaller, more efficient 8-bit indexed color image. The file size reduction can often be as much as 60-80% smaller than equivalent 24/32-bit PNG files.

What are 8-bit PNGs and 24-bit PNGs?

An 8-bit PNG (PNG-8) is limited to 256 colors or palette entries, while a 24-bit PNG (PNG-24) can contain more than 16 million different colors.

24-bit PNGs are better for more complicated images with increased levels of detail and color. Whereas 8-bit PNGs because they support fewer colors are better used for things with simple colors, such as logos and user interface elements like icons and buttons.

As images move towards photographic levels of color and detail 24-bit PNGs will continue to faithfully reproduce the image without any loss, however the file sizes can become very large compared to the equivalent JPEG.

AdobeStock_73291152-Squarespace1500px.jpg

24-bit PNG (6.72 MB)
Resolution: 3,200 x 2,133

AdobeStock_73291152-Squarespace1500px.jpg

8-bit PNG (3.26 MB)
Resolution: 3,200 x 2,133

AdobeStock_73291152-Squarespace1500px.jpg

JPEG (1.73 MB)
Resolution: 3,200 x 2,133

 

How does the compression work?

It uses a technique called “Color quantization” (more on that here), which basically means reducing the number of colours used in an image. Specifically we use the pngquant quantisation library which creates efficient 8-bit PNG files with an alpha channel.

PNGQuant Algorithm

Details of how this algorithm works have been copied below for convenience but can be found towards the bottom of the webpage for the library at https://pngquant.org

  • pngquant uses modified version of Median Cut quantization algorithm and additional techniques to mitigate deficiencies of Median Cut.

  • Instead of splitting boxes with largest volume or number of colors, boxes are selected to minimize variance from their median value.

  • Histogram is built with addition of a basic perception model, which gives less weight to noisy areas of the image.

  • To improve color further, histogram is adjusted in a process similar to gradient descent (Median Cut is repeated many times with more weight on poorly represented colors).

  • Finally, colors are corrected using Voronoi iteration (K-means), which guarantees locally optimal palette.

  • pngquant works in premultiplied alpha color space to give less weight to transparent colors.

  • When remapping, error diffusion is applied only to areas where several neighboring pixels quantize to the same value, and which are not edges. This avoids adding noise to areas which have high visual quality without dithering.

Will 8-bit PNGs still work everywhere? 

Compressed images are fully standards-compliant and are supported by all current web browsers and operating systems.

Screenshot example

PNG is a particularly good format for screenshots and other flat color images. This simple screenshot image illustrates the size difference that compressing to an 8-bit PNG can achieve without visibly degrading the image.

24-bit PNG (66.2 KB)

24-bit PNG (66.2 KB)
Download (right-click and select “Save link as…”)

8-bit PNG (19.4 KB)

8-bit PNG (19.4 KB)
Download (right-click and select “Save link as…”)