Transparent Backgrounds in IE6

(And How to Duplicate TweakPNG's Tricks on Linux)

Reading the excellent HTML5 Boilerplate's Notes on Using PNGs for the first time, I found there's this windows-only program, TweakPNG, which lets you set the default background color for pngs. Normally, IE6 displays the alpha (transparency) channel of 32-bit pngs in a lovely blue-gray shade — unless you craft a css hack for each png (using the AlphaImageLoader filter), or do some magic with VML (like the impressive DD_belatedPNG library). The downside of both of these techniques is that they can really affect IE6's page-load time once you start using more than a couple pngs (although in fairness, just about anything other than plain-vanilla HTML hurts IE6's load time).

So if you're using transparent pngs in places where a solid background would be an acceptable alternative (like if the pngs usually are displayed against a plain-white background anyway), you can use TweakPNG to create pngs that IE6 will display with the background color you choose — instead of the default of blue-gray. And after a bunch of googling, I found that there's also a tool for this that linux (and other non-windows) users can use: The already super-useful pngcrush has an underdocumented feature (in the pngcrush man page, but not shown by its -h option) to change this same background-color setting.

For example, the following sets the default background of the new png to white (as well as performing pngcrush's default crushing magicks):

pngcrush -bkgd 255 255 255 original.png new.png

And the following instead sets its default background to dark red:

pngcrush -bkgd 127 0 0 original.png new.png

The new png will still retain the alpha-channel (and other pixel data) of the original — it just now will have a default setting for the background color, to be used by programs which don't support displaying the png with transparency (like IE6).