A coworker was asking me about PNGs the other day, and I pointed him to the LibPNG page — one of the more comprehensive sites I’ve found on the PNG format. For those not aware, PNG is a lossless image format (like GIF) but it supports up to 24 bit color (like JPEG). It’s also supported by all the major browsers and many desktop applications.
Another advantage to PNG is that it supports alpha transparency. Unlike GIFs which have on-or-off transparency, PNGs support up to 256 levels of transparency. So, a properly designed PNG image with alpha transparency can look good against a background of any color.
Basic PNG functionality is supported by almost all browsers (Netscape, IE and so on), and support for PNG’s alpha transparency is also widespread. In fact, just about every browser — even the Sega Dreamcast browser — supports alpha transparency… except for IE on Windows (PNGs work there, just not the alpha transparency part).
And, as IE/Windows currently has the largest market share, it was thought that PNGs with alpha transparency essentially weren’t usable on the web. However, after re-reading the IE/Windows section, I see that there’s now a workaround to get PNG alpha transparency support in IE 5.5+!
As I understand it, IE can be induced — via some proprietary HTML — into using DirectX to render PNGs. And, as DirectX supports alpha transparency, you get alpha-channel support in IE. As all the other major browsers already have alpha channel support, it’s conceivable that PNGs with alpha channel transparency could be used throughout a site.
This hack has been around for a while, and I actually use a variant of the technique on the fisheye menu on my site to get alpha transparency (plus, as a nice side-effect, high-quality scaling). Unfortunately it has some drawbacks, for instance it requires that you set an explicit width and height on any image using the hack, which isn’t always possible especially on dynamic sites. Also, if a Win32 system (such as my Win4Lin installation) does not have DirectX available, the images become invisible. If you try saving one of the hacked images with the context menu “Save Image As…” option, you get a transparent gif image instead of the PNG. And then, of course, it requires that you use some proprietary CSS, though that isn’t really a problem except for strict validation.
I just plain refuse to cater to Internet Explorer’s brokenness. If they are going to ignore the standards I am going to ignore their browser. I do write a page that absolutely must work properly in IE I save my PNGs with the background color so that browsers which DO have proper PNG support show up correctly and the browser that doesn’t still looks like it is transparent.
http://www.petitiononline.com/msiepng/petition.html