IE6 Transparent PNG Fix

After years of messing with various solutions for the IE6 PNG transparency issue (if you don't know what that is, prepare to be bored out of your skull) which mostly involve a Javascript file that rewrites the page to take advantage of an IE-only CSS filter that renders the PNG images with correct backgrounds instead of a grey background. 

The trouble with most of those solutions is, when you apply them your links and input elements often go unclickable.  So you have to jump through yet more hoops for IE6 users, most of which require extra code and lots of headaches.  

I'm pleased to announce that today I stumbled on this astounding method of creating a PNG file that does away with all of the cross-browser issues of transparent PNG files: in modern browsers, the PNG transparency uses an alpha mask, so has the pretty anti-aliased edges and dropshadows that make you want to use PNG in the first place.  And in IE6, the PNG just treats all those semi-transparent pixels as transparent, so you get what you would have gotten using a GIF anyway.  I'll tell you how in a minute.

First, let me start by saying that if you are viewing this site in IE6 right now and you are capable of upgrading your browser, you are the scum of the Earth and do not deserve decent transparent PNGs.  The world would be a better place if IE6 just fell off it.  However, since many corporations have mandated IE6 and don't allow their users to upgrade because IE7 broke all the custom code their intranet uses, we web designers have to just put up with it.  

Like I said, up until now I've had to either design very carefully, or come up with an alternate solution for displaying transparent PNGs.  I used to use conditional comments for IE6 and use a GIF in that style sheet and a PNG for everyone else.  IE6 is still 1/3 of the browsing market, a minority that is far too large to just ignore.  And many of them can't help it, either.

So while struggling with various Javascript methods of fixing all the PNGs in a site, I stumbled upon a simple, almost magic solution: Fireworks.

If you have Fireworks, you can do this.  If you do not have Fireworks, you probably can't.  Like I said, this is not a code fix, this is an image fix.  The idea is to save the PNG-24 with alpha transparency as a PNG-8 with alpha transparency.  Modern browsers will read the alpha mask, and IE6 (the stone-age browser) will see what is basically a GIF because it ignores the alpha transparency and just considers it all transparent.

This means that the fix won't work for all images, but for 98% of them it will.  Here's how to do it:

STEP 1) Open your PNG in Fireworks.

STEP 2) Go to the OPTIMIZE tab (Window -> Optimize, or F6) 

STEP 3) Change the graphic format from PNG 24 to PNG 8

 

STEP 4) Change the transparency dropdown to 'Alpha Transparency'.

 

STEP 5) Add your preferred amount of diffusion.  If you have gradients, you may want more diffusion or you'll get banding.

STEP 6) Go to File -> Export and Export it.

STEP 7) Crow to anyone who will listen about your mad web sk1llz.

 

Seriously, it doesn't sound like it would work, but it does.  It looks reasonable on IE6 and even more reasonable on everything else.  It's not a PNG-24, so don't use it if that's critical to the design, but nine times out of ten this fix will be all you need.