IE6 png transparency fix

What is PNG?

PNG stands for 'Portable Network Graphics' and next to the GIF and JPEG is one of the most popular graphic file formats used today.

PNG offers lossless data compression - graphics saved in PNG format don't lose their quality. This fact is extremely important for all web-designers, because no one wants their graphics look fuzzy when extracted from Photoshop. However, the best thing about PNG files is their support for transparency including alpha channel (the percentage value of transparency).

What is the difference between PNG and GIF?

GIF (Graphics Interchange Format) is second popular format offering transparency. Unfortunatelly GIF doesn't offer alpha channel and has limited number of colours - up to 256 per image.

Another unique feature of GIF is support for animation, but since this article is focused on transparency I won't be talking about it.

What is alpha channel?

In simple words, alpha channel is a value of transparency for every pixel of the image. Standard definition for computer based colors can describe the color of every pixel using three values: RGB (Red Green Blue). Alpha channel adds one more property to this definition: RGBA. 'A' defines the percentage of transparency for particular pixel.

It is easier to see these differences on the actual pictures:

GIF	PNG
Difference in transparency for GIF and PNG file formats.

As we can see on the pictures above PNG offers better support for as I call it 'natural transparency'. Picture can easily blend into custom background and especially the edges look a lot nicer.

Unfortunately, this nice feature is not supported by Internet Explorer 6. Because of this sad fact, many web developers decide to save graphics with pre-selected static background. Whilst this solution is valid, it could cause problems later if ex. someone decided to change background color of the website or of the container where image is placed.

How to fix PNG transparency on IE6?

To make PNG files transparent on IE6, we need to use 'filter hack'. Filters originally were created by Microsoft to implement various visual effects in web browser. As most of the IE-specific features, filters have died by natural death and no one is really using them any more.

However, one of them comes really handy when fixing this bug. Using Internet Explorer filter DXImageTransform.Microsoft.AlphaImageLoader we can load PNG file with full support for alpha channel. Code snippet below shows how we can do it.

img.pngFix { display:none; }
img[class=pngFix] { display:block; }
div.pngFix { display:block; }
div[class=pngFix] { display:none; }

<img class="pngFix" src="/examples/pngtransparency.png" alt="PNG transparency" />
<div class="pngFix" title="PNG transparency" style="height:160px; width:160px;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='/examples/pngtransparency.png', sizingMethod='scale');">
</div>

In the code above we firstly define few CSS rules to hide original PNG image. Then, using [class] selector we re-enable it for new browsers (that's right, [class] selector is not supported by IE6!). This trick will simply hide all images with class "pngFix", and show all divs with this class. We also do opposite for new browsers. Note, if you are concerned about valid XHTML markup you should move this CSS definition to HEAD section or to separate CSS file.

Note the path set in AlphaImageLoader is a path from current html document, not from CSS file.

Our code produces the effect below. Check it on IE6 to see how transparency is correctly applied to PNG image on the right.

standard PNG	PNG with transparency fix
PNG file displayed correctly on IE6.

My solution is not 100% perfect due to one important limitation of AlphaImageLoader method - dimensions on supplied container (div) MUST be set, so trick won't work if css width and height are not defined.

Also W3C CSS validator will mark this solution as invalid and return message Property progid doesn't exist : DXImageTransform. This is because we are using invalid property progid and we can't do anything about it. It doesn't affect display and everything works just fine so we don't need to worry about it.

Apart from that, everything works just fine. We can use finally use PNG files in our designs and we don't need to worry about IE6.