skip to content | skip to left sidebar skip to right sidebar
Pregnant Solutions to Petty Problems

November 28, 2007

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!

1 Reactions:

Posted by Grzegorz on June 9, 2008 at 3:55 PM  

Hi. I will provide you with answer on question why rendering take so long.

You use:
img, div { behavior: url(iepngfix.htc) }

it means, that every single image and every single div on page will be processed separatelly to filter alpha transparency in IE.

Simple made special class for img and divs where you really use png and it will be much faster.

Eg.
img.png, div.png { behavior: url(iepngfix.htc) }

And then use this class in every place when you put png.