Getting Around IE’s PNG Issues

By on July 22, 2004

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.

Gadgetopia

Comments

  1. Oh man, I just had that problem a few weeks back and was pulling my hair out! Thanks for the link Joe! Yer my boy, blue!

  2. I’ve recently used the same script via include for a web site I’m developing in which .PNGs are a must. I’ve also found that apparently you cannot use JavaScript to alter the src attribute of a PNG.

    After trying to target them even by number instead of names (document.images[0]) it appears that IE “skips” .PNGs in the document.image collection enumeration?

    Anyone else encountered this issue or found a way around it? I’m looking about, and if I find it, I’ll post it here barring someone beating me to it.

  3. Question. We are fixing any IE6 problems (transparency, etc), but now I have come across a real twisted one.

    I have three png’s in a row. One of the png’s insists on shrinking width-wise. I have given it a table, I have changed the file type, I have done everything I could think of, but I am stumped! Heeelp. If anyone has an answer, could you please email me at dan.bringhurst@omnibizsolutions.com? Thanks you guys!

Comments are closed. If you have something you really want to say, email editors@gadgetopia.com and we‘ll get it added for you.