Cross-Browser PNG alpha-transparency

Last Updated: 20071130

In an article on Sitepoint, Alex Walker describes how to make semi-transparent PNG8 images in FireWorks. Unlike PNG32, the alpha-transparency of PNG8 is supported by all modern browsers (FF2,IE7,Safari,Op9). Internet Explorer 6 and lower gracefully degradate the alpha-channels to full transparency, like GIF.

Using gray-shaded PNG8 images as backgrounds to HTML elements with background-color, it is possible to easily switch colors without having to redesign your shaded background images.

Alternative to FireWorks

There are two small open source apps that will do the same trick. You can get them for free on the websites listed below, but not here.

PNGquant (command line & GUI)
Website: Commandline or Windows GUI
I tried both versions.
The command line version is compiled with the zlib and libpng library so no additional dll's are required, which is really nice. To view usage syntax run the program with the -h switch.
The Windows GUI requires you to install the .NET framework :-| and needs the command-line app to sit in the /windows32/ dir, so installing is a bit of a hassle. Otherwise it is a convenient wrap around the command line app.

PNGnq (command line)
Website: http://www.cybertherial.com/pngnq/pngnq.html
I tried the Windows32 version which does the trick.
Besides the compiled binary pngnq.exe and the libpng13.dll offered at the website you also need a copy of zlib1.dll.
The dll's need to sit in the same dir as pngnq.exe or should be copied to your /windows32/ directory. Run the app with the -h switch to get help on all available switches.

I haven't noticed a difference in results between the two, so for the moment I'm settling with the command line version of pngQuant, since it only needs itself to run.

IE PNG24 Fix

If you want IE5.5+ support for semi-transparent PNG images, have a look at this page. This trick gets alpha-transparency of PNG images working by feeding IE a special 'behaviour' script through CSS. The syntax is extremely simple:

<!-- IE PNG FIX - hide from other browser than IE<7 -->
<!--[if lt IE 7]>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
<![endif]-->

I haven't tried this yet, and I don't know if this adds a lot of rendering time if your page has a lot of img and div tags, but I love the simplicity of it!