Notes on using PNGs

Here are some useful image optimization techniques. There are some things to keep in mind while using PNG image format.

PNG comes in three flavours; 8-bit, 24-bit and 32-bit. A 32-bit PNG is a 24-bit PNG with a transparent Alpha channel. 8-bit pngs with transparency are recognized mostly by IE6, while transparent 32-bit PNG are not. So, you can do one of three things with transparent/semi-transparent 32-bit PNG images for IE6:

1. Convert to 8-bit PNGs
2. Use the included DD_BelatedPNG script to render them correctly.
3. If the transparent region is going to be in front of a solid color, you can use TweakPNG to make sure that the 32-bit PNG renders a particular color instead of the typical grey-blue color for transparent regions. You can set the color by editing the "bKGD" attribute.

Convert to 8-bit PNGs

Mostly 8-bit PNGs are smaller than the 32-bit variety. There is no discernible difference in how smooth the transparent regions are in all browsers except in IE6 where the edges appear jagged.

pngquant is a command line utility that can convert 32-bit PNGs to 8-bit ones. There is a GUI and a png8 command line tool (OS X only) that wraps pngquant and some other utilities to make it easy to create 8-bit PNGs. Here are some ways to optimize PNGs in Photoshop/Fireworks and more.

Using DD_BelatedPNG

DD_BelatedPNG script uses VML to render the transparency and is useful if you have few PNGs on which the script needs to work on. If you have a page with scores of PNG images, using DD_BelatedPNG might end up slowing down your page. You could either target a small set of PNGs for it, or convert them into 8-bit PNGs.

Additional optimization

Here are some more interesting techniques:

• Clever PNG optimization techniques
• Clever JPEG optimization techniques
• How to Optimize PNG and JPEG without Quality Loss part 1

blog comments powered by Disqus