using PNG

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