How to Optimize PNG Transparency

Following techniques can be used to have a good PNG restitution in all browser. Some techniques are losslessly, others are lossy. Do the good compromise between quality, compatibility and performance.

PNG and Transparency

First, you have to know about PNG transparency : there is different ColorType, with differents methods to make a transparent PNG. Look those pictures :

PNG24+Alpha	PNG24	PNG8	PNG8
TrueColor+Alpha	TrueColor	Paletted	Paletted
Alpha Channel	tRNS chunk	tRNS chunk	tRNS chunk
32 bits/pixels	24 bits/pixels	8 bits/pixels	8 bits/pixels
7065 Bytes	5504 Bytes	4755 Bytes	5234 Bytes
No IE6 Support	No IE6 Support	IE6 Support	No IE6 Support

There is also differents methods which can be used for GrayScale images. You can choice between the GrayScale encoding, and the Paletted. The last one can be better for Alpha Channel Emulation.

PNG8+Alpha	PNG8	PNG8	PNG8
GrayScale+Alpha	GrayScale	Paletted	Paletted
Alpha Channel	tRNS chunk	tRNS chunk	tRNS chunk
16 bits/pixels	8 bits/pixels	8 bits/pixels	8 bits/pixels
5203 Bytes	3529 Bytes	4634 Bytes	5120 Bytes
No IE6 Support	No IE6 Support	IE6 Support	No IE6 Support

PNG24+Alpha bKGD

If you use an unique and plain background color, you can use the bKGD chunk to set the same color as your website background. Most of browser know how to display it. This is a losslessly solution :

PNG24+Alpha	PNG24+Alpha
TrueColor+Alpha	TrueColor+Alpha
Alpha Channel	Alpha Channel and bKGD
32 bits/pixels	32 bits/pixels
7065 Bytes	7083 Bytes
No IE6 Support	IE6 Support

PNG8 Alpha values

Like GIF, PNG in indexed mode support transparency. Unlike it, PNG proposes 255 values of transparency. You can use it to simulate the Alpha Channel.

PNG24+Alpha	PNG8
TrueColor+Alpha	Paletted
Alpha Channel	Alpha values with tRNS
32 bits/pixels	8 bits/pixels
59931 Bytes	20925 Bytes

See Also : Reduce Number of Colors in a PNG image.

Optimize RGB area

Sometimes you can use an Alpha Channel, which is masking a part of a RGB area, not displayed by browser. In the non-displayed area, you can use techniques to optimize PNG further. It's a losslessly solution for a Web usage ; meaning the graphic restitution is identique. However, the masked area can be destroyed, or modified.

Original RGB	RGB Filtered 0 (Black Pixels)	RGB Filtered 1	RGB Filtered 4
46890 Bytes	42551 Bytes	41662 Bytes	41293 Bytes

RGB data can be filtered to improve compression potential. See also PNG Transparency - RGB Filtering to see others transparency methods. Most of the time, those filtering step can let you to get smallest files, but not always.

Original RGB	RGB Filtered 0 (Black Pixels)	RGB Filtered 4
8897 Bytes	9778 Bytes	9204 Bytes

In this example, RGB should not be filtered, because leaving it intact is more efficient for compression. Please note ScriptPNG does those trials. It tests for RGB filtering (Filter 0,1,5), and leaving the RGB area intact, and compare all results to get the smallest file possible.

Reduce Colors in RGB Channels

Another solution : reduce colors in the RGB Channel (eventually also in Alpha Channel) to reduce the size. This technique is used by ScriptCQ. It's a lossy method. You can also combine the previous trick (bKGD) to make it compatible with IE6 (done here).

PNG24+Alpha	PNG24+Alpha	PNG24+Alpha
TrueColor+Alpha (Alpha Channel)	TrueColor+Alpha (Alpha Channel + bKGD)	TrueColor+Alpha (Alpha Channel + bKGD)
32 bits/pixels	32 bits/pixels	32 bits/pixels
11662 Colors	2808 Colors	1528 Colors
62467 Bytes	35462 Bytes	25881 Bytes
No IE6 Support	IE6 Support	IE6 Support

Transparency ... or NOT !

To optimize transparency, you can sometimes just don't use it. Let me show an exemple, using the effect hover. Assuming you already know about sprite technique, here's the trick (lossy) :

The optimized PNG is a PNG24+Alpha restitution capture, without any factor of transparency. Then, it's converted to PNG8 to save space -do the quality / space compromise. Easy to do with an unique background color.

This technique allows front-end engineers to use transparency effect, without any ressource like PNG remplacement file, JavaScript hacks, AlphaLoader, etc. The sprite technique save HTTP request, PNG8 quantification save space, and less ressources mean more performance.

Transparency with borders

It can be sometimes done also with a more complex background. One solution is to capture the restitution, and applying a high contrast color in the area you want to make transparent :

Three step : one, capture the restitued image. Two, fill area around the image with a high contrast color (red). Then, convert image to PNG8, and add a tRNS chunk : make the high contrast color transparent.

Capture	Color Constrat	Transparency
Image Captured	Area around the image colored	High contrast color is transparent

PNG24+Alpha	PNG8
TrueColor+Alpha (Alpha Channel)	Paletted
32 bits/pixels	8 bits/pixels
56102 Bytes	17408 Bytes
No IE6 Support	IE6 Support