One of my early lessons as a designer on the web was that different image formats were better at different things. A photograph always looked best as a .JPG (or pronounced "j-peg") on screen. Logos, and anything with transparency, words and larger areas of color worked best as a .GIF (or pronounced "gif"). This has held true for a long time.

There was one little problem with .gifs though. The image format is privately owned and royalties are somehow due somewhere to someone whenever you used a .gif format. This little catch didn't stop me, or everyone else using them from stopping.

Then another image format was released - the .PNG (or pronounced "ping"). This format was not privately owned and sought to replace .GIFs on the web forever. PNGs have everything going for them including an alpha transparency channel which allowed for the image to be anywhere from completely opaque to completely transparent. Great!

Wait, not so great. Internet Explorer (at least everything before version 7) cannot process the alpha channel! PNGs look like complete crap in Internet Explorer. Since 95% or more people use it as their main browser.....well, flush that idea.

There is still hope.

Microsoft was kind enough to acknowledge this problem and even create a little work-round filter for this oversight/bug on their part. It involves a little javascript to fix, so its not perfect by any means. Users with javascript support turned off will still see the crappy looking PNG with no transparency whatsoever.

While the on-going effort to make 100% compatible and adaptable pages is a noble and worthy cause, there are moments when you have to let go and accept that real-world usage won't make this a problem.

That said, here is the javascript code that makes PNGs behave. I downloaded it from Bob Osola's website: http://homepage.ntlworld.com/bobosola/index.htm

This particular script (there are plenty out there) runs through the given page looking for images with the .PNG extension. Any that it finds it replaces with a new HTML element that employs the filter to the image. It works pretty well if all you need to do is repair images on a page. If you need to apply this fix to either image maps or navigation rollovers that use PNGs, there more of Bob's generosity found here:

http://homepage.ntlworld.com/bobosola/pnginfo.htm

Good luck, and enjoy using PNGs on your own pages to give you much needed graphic freedom.