The PNG Transparency Trap

Yesterday’s featured tutorial on was titled: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery by Brian Dillard.

I wonder how this tutorial got onto Ajaxian as the topic is so much out of date. Ajaxian has always been a place of inspiration and a pit stop for the latest and greatest in the world of JavaScript and the whole Web scene. I was a little put off by this tutorial, though out of curiosity took a dive in anyway.

The title alone is a mouthful to say the least and a glimpse of the trauma you will go through if you make the effort to read through the two part series. The tutorial specifically deals with how Pathfinder implemented transparent rounded corners on their new website. I know, nothing new. However, the worst is yet to come…

The transparent corners on Pathfinder’s website are actually background PNG32 images. IE6 doesn’t support PNG32 transparency so IE PNG Fix came to the rescue. What IE PNG Fix does is it finds all PNGs contained within img tags and backgrounds, and adds some additional styles on-the-fly to present those PNGs via the progid:DXImageTransform.Microsoft.AlphaImageLoader filter. Then to overcome yet another limitation introduced by AlphaImageLoader, jQuery was used to append an img tag on-the-fly below the rounded box to form the bottom corners.

OK, it does the job so why whine about it? Well it’s an overkill if you think about it. Firstly IE6 has a problem with garbage collection when it comes to CSS filters. So the more AlphaImageLoader PNGs you have on a page the more unrecoverable memory you snatch away from your IE6 users. Secondly jQuery and IE PNG Fix are used in twine to tackle a single superfluous design problem, which adds a lot of unnecessary bloat. Pathfinder have truly fallen into the PNG transparency trap!

In the spirit of progress enhancement, which they avidly promote, they should have ignored IE6 and gave those users square boxes! However, for this particular case we’re in luck as there is an alternative—convert those dreaded PNG32s into transparent PNG8s!

To demonstrate proof of concept take a look at this screenshot below. On the left is Firefox, on the right is IE6:

Comparing PNG8 in Firefox and IE6

Not much difference aye? Apart from the aliased edges, which to be honest isn’t all that bad, they look pretty similar. I don’t think jagged edge corners are a sign of an amateur at work. I think it’s a reasonable sacrifice. By using PNG8 your corners won’t degrade as beautifully but they will degrade flawlessly. No hackery, less bloat; thereby saving memory, bandwidth and money.

Finally, I’m not suggesting we convert all our transparent PNGs into PNG8 format. I’m really just questioning whether the solution Pathfinder is presenting is the best solution and whether Ajaxian should be promoting it as it will no doubt lead many astray and fall into the PNG transparency trap.

Here are two very good SitePoint articles on how to make the most of PNG8 transparency in IE6:

Update 2008-06-17: Interesting… Transparent PNGs can even deadlock IE6! Yet another reason to avoid this kind of hackery if you can!

1 Comment

  1. Jon at

    Just a quick "thanks" – I found this very useful.