Creating Transparent PNG’s in IE 6

As if Internet Explorer 6 doesn’t have enough issues, it also doesn’t support full PNG alpha channel transparency. While many would like to ignore IE 6, it is still being used by millions of internet users, thus we as designers still need to keep them in mind. This can make designing a website to work with IE 6 even more difficult than it already is. However, thanks to some creative and skilled minds and a few scripts, the problem can be resolved.

-

The Problem with IE 6 and Transparent PNG’s

Unlike GIFs’s, images in PNG format carry a seperate alpha channel for each pixel. This allows each pixel in a PNG image to be opaque, not opaque, and most importantly, anywhere in between the two. This is much different from than GIF images, which do support transparency, but each pixel is either transparent or a solid color.

Luckily, with the release of IE 7, the issue was resolved. Unluckily, this means earlier versions of Internet Explorer before will need to “hacked”.

-

The Fix

There are a few ways to go about fixing this issue, we are going to focus on Drews McLellan’s fix.

While IE 6 and lower versions do not support full PNG transparencty, Microsoft did include a proprietary filter: The AlphaImageLoader. The AlphaImageLoader can be applied directly to your css (inline or external), as well as with the help of JavaScript:

-

CSS example

view plaincopy to clipboardprint?

1. </strong><code>img {
3. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
5. }

</strong><code>img {  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);  } 

-

JavaScript Example

img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";

It is important to note that there is no filter property in the W3 CSS Specs, so this will not validate. It is for this reason that it is recommended you selectively embed the AlhpaImageLoader for only Internet Explorer versions 5.5 and 6, remember to use conditional statements, for example:

<!--[if lte IE 6]-->

-

Issues with this fix

Though the AlphaImageLoader is of some help, it is not without some major issues as detailed below:

There is no Filter property

Ive mentioned this, but a lot of people, like myself, strive for valid code. This can still be achieved as noted but requires more work and can become a headache.

Background images will not be repeated or positioned.

While the filter supports background images, the support is mediocre at best. It will not support background images that repeat or images that have been positioned using the background-position: property. Ouch.

Slow loading and excessive use of resources

You wont notice much of a lag in your page load time, but add 5 or six AlphaImageLoaders and you will certainly noticed a delayed response in loading time. Try to cut down the use of the filter as much as possible, you can also reduce the file size of your image be removing unused colors.

-

Real Solutions

Now that we have read the horros of dealing with transparent PNG’s we have a few options:

• Use the AlphaImageLoader above with the “problem” image and selectivley target the filter with JavaScript for IE 6 and lower.
• Replace the PNG with a GIF or JPG that is tolerable and works with your layout, and use Conditional Comments to target and replace the image for IE 5.5 and 6 only.
• Use Drew McLellans JavaScript ans let it do the work for you!

-

The JavaScript fix by Drew McLellan

Thank the internet for Drew McLellan, for he has brought us a “SuperSleight” that does fantastic work at solving this issue. Even better, this is all you will need to include on your page:

view plaincopy to clipboardprint?

1. <!--[if lte IE 6]>
2. <mce:script type="text/javascript" src="supersleight-min.js" mce_src="supersleight-min.js"></mce:script>
3. <![endif]-->

<!--[if lte IE 6]> <mce:script type="text/javascript" src="supersleight-min.js" mce_src="supersleight-min.js"></mce:script> <![endif]--> 

I think it would be easiest to quote Drew’s Explanation of the script:

Supplied with the JavaScript is a simple transparent GIF file. The script replaces the existing PNG with this before re-layering the PNG over the top using AlphaImageLoaded. You can change the name or path of the image in the top of the JavaScript file, where you’ll also find the option to turn off the adding of position: relative to links and fields if you don’t want that.

The script is kicked off with a call to supersleight.init() at the bottom. The scope of the script can be limited to just one part of the page by passing an ID of an element to supersleight.limitTo(). And that’s all there is to it.

-

Sources and Downloads

Ready to get the script and read a little more about it?

• Drew McLellans SuperSleight Script
• Download the Script

Article Sources

• 24Ways.org
• W3.org
• PNG in Windows IE

Blogged with the Flock Browser