PNG 24 Alpha Transparency Fix For IE

I have been developing web sites and internet applications for many years now and there are many things that have bug me about design approaches but the one that always and still sticks out is the lack of PNG 24 alpha transparency in IE’s rendering engine.

PNG 24 image files support a very well executed alpha transparency that is far superior to that of transparent gif files. One example of this is the alpha transparent gradient that is not supported by transparent gif’s. PNG will gracefully fall off into complete alpha transparency perfectly when performing drop shadows or glow effects around or in images where as gif images that are transparent are either 0 or 1, colored or transparent.

Here is an example of the two.

(Note: Arrow is pointing to the 0 and 1 binary transparency gif images only supports)

gif_transparency

png_transparency

Another thing that is wrong or rather troublesome with gif images is the fact that if you do carry transparency in a gif image, the defining point of where transparency and non-transparency begins becomes jagged with pixels. The only fix for this is to have a matte color that surrounds the gif images defining transparent points that matches the background color of which the image is being laid over. This is not only hokey but sometimes a dead end to your design if you want to have gradient backgrounds that the gif image is going to be laid over.

Here is an example of the gif transparency jagged problem.

(Note: See the jagged edges in the GIF image and the matte border

around the image that’s trying to and clear up the jagged edges with
a background color match.)

gif_jagged

(Note: No jagged edges and no need for matte color matching)

png_no_jagged

Now that we can see why PNG 24 images are better to use when performing transparency vs gif images, let’s look at the problem we have when trying to use PNG 24 images on IE browsers.

IE rendering engine is not of the best compared to a lot of well used browsers such as Fire fox and Safari and in fact is ridiculed as being the worst browser to develop sites on because of all the hacking and patching users have to do in order to make their designs perform correctly in IE browsers. So it’s no surprise that this is the same when trying to use PNG 24 images and the IE browser.

When IE 7 came out there was a sigh of relief when it was announced that IE7 will finally support PNG 24 images and the alpha transparency we would like to have. Unfortunately this was a blatant lie on IE’s part because we were in fact still left with no PNG 24 support as the previously claimed.

Let’s take a look at what the effect of the PNG 24 looks like when trying to run them on IE.

(Note: Any alpha areas are replaced with a mint green color or sometimes gray.)

IE_png

(Note: All alpha transparency areas are working perfectly)

FF_png

Wow that is just plain ugly!! So how do we fix this issue you might be asking yourself? Well there are lots of fixes out on the net that range from CSS filters to giving up on PNG 24 images and using PNG 8 images. All of these solutions are either breakers for other browser or ugly results of PNG 8 images. This year (2008) however a great little nifty JavaScript code hit the scene that has opened a world of possibilities to web designers and PNG 24 alpha transparency images and is being hailed as the end all solution to fix PNG 24 alpha transparency support in IE browsers.

This light weight and easy to implement JavaScript patch for PNG 24 alpha transparency and IE browser is called

Unit PNG Fix” and was developed by Unit Interactive:Labs. I of course at first glance was a skeptic as I have been down many roads of the so called PNG Fix and never found one the truly is a fix or easily integrated. This “Unit PNG Fix” however was the one that I as well as many other developers had been long awaiting for and quickly fell in love with. I like it so much I am using it right here on the web site you are reading this tutorial from.

Let’s take a look at how this PNG 24 alpha transparency fix for IE is implemented into our designs.

Download the PNG 24 fix from here http://labs.unitinteractive.com/unitpngfix.php and un-zip it’s contents.

  • Unitpngfix.js
  • Clear.gif

There may be other contents in the zip file such as readme.txt files, but for now all we need are these two files.

In your html documents header simply add this IE 7 or later comment argument that calls our unit PNG fix for IE 7 and below.

(Note: Make sure you point this to the proper location you would like to have the JavaScript file reside on your web server.)

Next open up the unitpngfix.js and on the very first line you will see a path to where your clear.gif file is. Make sure you make this path point correctly to where you would like to have this clear.gif reside on your web server as well.

Hit save to the unitpngfix.js and your html document and that’s it!!

Now you can support PNG 24 alpha transparency across all browsers.

Hope you enjoyed this little article as much as I have.

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus