Gadgetopia

PNG is an awesome image format, primarily useful for its ability to support 8-bit transparency (that is, an alpha channel where there’s a continuum from opaque to transparent, instead of the simple on/off transparency of GIF). So what’s been holding you back from using it? IE for Windows, mostly, which is the only browser left that doesn’t support the PNG alpha channel properly.

When IE 5.5 rolled around, IE gained some ability with PNG’s in the form of the AlphaImageLoader filter. In the past, I’ve gotten around the IE problem by using this filter, but you really have to kludge up your HTML to implement it.

Bob Osola has a solution that’s downright diabolical.

The code can be used either by a one-time copy-and-paste or as an include file. The entire thing is completely ignored by all other browsers - in fact it is treated as an HTML comment - thanks to IE’s conditional comments. This solution is therefore light, portable and non-invasive to other browsers.

I wish there wasn’t a need for a hack like this, but it appears that MS has stopped further development of IE. So the choice as of June 2004 is: ignore PNGs or use hacks.

He hides the script block in a conditional comment, one of the few helpful features of IE (although I only use it to fix problems with IE, I guess ‘helpful’ is a bit too generous).

The script spools through all the images on the page, finds all the ones whose source ends in ‘.png’, and changes them to spans that have the image as the background, filtered through AlphaImageLoader. So you don’t need to add any special code to your PNG IMG tags in order to use it.

It should work on all non-IE browsers (since it does nothing), and all versions of IE older than 5.5. That maps to enough of the browser market to suit my tastes. The site also lists a couple of alternative ways around the problem. Well done.