Web designers the world over know what a battle it is to support IE6, and nowhere is this more obvious than in it’s lack of PNG support. There are of course Javascript options such as pngFix, but there are issues with this:
- adds approximately 40kb to your page weight
- uses Microsoft’s “behaviours” extension so not standards-compliant
- patchy support if you’re swapping out images through Javascript / CSS
What I’ve started to do instead is use a PNG optimizer to convert images to a lesser-known PNG format not supported by Photoshop. Photoshop’s Save For Web function will only save images out as:
- 24-bit colour-depth, 8-bit transparency (24+8)
- 8-bit colour-depth, no transparency
When displayed in IE6, the former will show up as a light blue-grey wherever the transparency was intended. The latter will render as it should, but with no transparency it defeats the point of using the PNG format (you may as well use an 8-bit GIF with binary transparency).
The trick is to save your image out using the 24+8 bit format and then use either pngquant or optipng to shrink this down to a different PNG format (8-bit colour-depth, 8-bit transparency). This is still not entirely supported by IE6, but it is better. IE6 will render the image treating the 8-bit transparency as binary transparency (similar to GIF transparency). This allows alpha transparency support in Firefox, Safari etc. but with a more graceful degradation for IE6. It also makes your PNG images smaller!