PNG Palette Optimization

This article talks about Palette Optimization for PNG Paletted (PNG-8), particulary with another filter than 0. In the Optimize PNG for Developers article, you can noticed there are others tricks to optimize PNG Palette :

Truncate the Palette : just count number of colors, and delete all unnecessary entries in the Palette. If there are 190 colors, do not code the Palette with 256 entries, but with 190.
Organize the Palette : if PNG contains a tRNS chunk, just code all alpha values first. All Entries which have 255 as alpha values should be coded after. Check both methods for filtered Paletted with tRNS.
Delete duplicate entries : some quantizer store entries which contains exactly the same RGB value than another. To optimize Palette (and PNG output size), always delete duplicate entries.

Palette Optimizer with some gradients

Most of Paletted PNG should be better stored with Filter 0. But with some of them will be better stored with another filter. You can use another filtering as 0 when images contains a lot of gradients colors.

PNG-8 and Palettes (Filter 0)


256 colors, Filter 0	256 colors, Filter 0	256 colors, Filter 0
17813 Bytes	17621 Bytes	16470 Bytes

PNG-8 and Palettes (Filter 5)


256 colors, Filter 5	256 colors, Filter 5	256 colors, Filter 5
16322 Bytes	16307 Bytes	15916 Bytes

Those tests show you different Palette structuration. As you can see, the sorted way of PNG's Palette is important. A greater compression can be achieved by sorting in the original RGB color space.

Palette Optimizer with lot of gradients

Another example with a lot of gradients. Size difference between non filtered and filtered images is more impressive because in this example, there is a lot of gradients. Filter 1 is better than Filter 5.

PNG-8 and Palettes (Filter 0)


242 colors, Filter 0	242 colors, Filter 0	242 colors, Filter 0
18971 Bytes	18621 Bytes	17819 Bytes

PNG-8 and Palettes (Filter 5 and 1)


242 colors, Filter 5	242 colors, Filter 5	242 colors, Filter 1
14934 Bytes	14749 Bytes	14319 Bytes

Another Palette Optimization sample

PNG-8 Filter 0	PNG-8 Filter 5	PNG-8 Filter 5


6664 Bytes	6572 Bytes	6439 Bytes

Palette Optimization with `tRNS`

As you probably know, you should rewrite your PNG files with tRNS at the top of a Palette. With gradients filtered Paletted, it's not true for all cases. I will experiment that with following samples.

`tRNS` first is better

This sample will show you a PNG Paletted which can be filtered. In this case, coding all alpha values to the top of palette will decrease the output size, cause it's deleting all unneccessary alpha values.

No Filtered, tRNS first	Filtered, tRNS not sorted	Filtered, tRNS sorted


256 Entries, 40 Alpha values	256 Entries, 256 Alpha values	256 Entries, 40 Alpha values
21642 Bytes	16347 Bytes	16254 Bytes

Without sorting `tRNS` to the top

Unlike the previous sample, this one should be better stored without sorting tRNS values, but by leaving intact the original sorting. There are unnecessary values, but if you sort the palette, you'll get a bigger file.

No Filtered, tRNS first	Filtered, tRNS not sorted	Filtered, tRNS sorted


256 Entries, 54 Alpha values	256 Entries, 256 Alpha values	256 Entries, 54 Alpha values
25223 Bytes	19924 Bytes	20290 Bytes