Proper PNG support even with MSIE

2009
Computer Stuff

Historic content

Well, whaddya know? Internet Explorer 6 is history, and even Internet Explorer itself has been discontinued. Good riddance! But this page may serve as a reminder of the many reasons why web-developers desperately longed for that moment!

The Problem

Every major browser has PNG support, except MSIE for Windows. (The Mac version, in contrast, has full PNG support.) MSIE for Windows only supports 8bit PNG images, i.e. binary transparency like GIF89a. If you are using Internet Explorer version five or six, you will see an ugly grey box around this image, a 24bit PNG image with alpha channel:

The Workaround

The quick-and-dirty solution for this Windows-specific misbehaviour is, of course, a Windows-specific hack. The trick is to put a transparent image of the same size in place of the desired PNG image, and then have a proprietary DirectX filter load the PNG image. Like this:

<img width="200" height="200" src="transparent_pixel.gif"
  style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='krabbetrans.png',sizingMethod='scale')">

The obvious drawback of this method is that all other browsers only show the transparent image placeholder, i.e. nothing. With Internet Explorer 5/6 you should see the same image as above, only this time with the correct background instead of grey:

The Solution: An External CSS File

Luckily, we don't have to worry about dynamically altering the content for Internet Explorer on all pages or some other tedious adaption. We just need one extra CSS rule to fix all

img {
   behavior: url("ugly_msie_fix.htc");
}

Where ugly_msie_fix.htc contains a script to dynamically alter all img objects it is applied on:

<public:component>
<script>
var trans_pixel = "transparent_pixel.gif";

var msie5_or_6 = navigator.userAgent.indexOf("MSIE 5.5") != -1
                 || navigator.userAgent.indexOf("MSIE 6.0") != -1;

if (msie5_or_6) {
  if (element.src.toLowerCase().substr(element.src.length-4) == ".png") {
    var oldSrc  = element.src;
    element.src = trans_pixel;
    element.runtimeStyle.filter
      = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
          oldSrc + "',sizingMethod='scale')";
  }
}
</script>
</public:component>

Of course, this requires active scripting to be enabled. But hey, we're dealing with Internet Explorer users here!

Conclusion

Although this proprietary hack is quite ugly, the good news is that you can finally start using PNGs with alpha transparency, (potentially) saving lots of webspace and bandwith.

Proper PNG support even with MSIE

The Problem

The Workaround

The Solution: An External CSS File

Conclusion

Computer Stuff

Blog

What the heckmeck?

Categories