GRRR, Getting PNG graphics to display correctly in IE!

This article is for those HTML/CSS guru’s out there who are frustrated with IE. Particularly the minor problem of displaying PNG’s correctly. PNG is an image format that combines the best features of GIF and JPG/JPEG, the traditional and most common image formats used on the World Wide Web. PNG is supported by virtually all major and minor browsers that are in use today. Although all major browsers display alpha and transparent properties correctly, Internet Explorer has fallen behind. To implement PNG alpha and transparent properties correctly in IE, there are a few steps one must take. Nothing is wrong with the PNG format itself. PNG format compresses images in a similar way to GIF, but images can have up to 280 thousand billion unique colors (normally, a maximum of 16 million colors are used). PNG also supports binary transparency, as well as full Alpha, meaning that each pixel of the image can also have one of 256 different levels of transparency (or 65 thousand levels if you really want to). PNG format produces files with approximately the same file size as the equivalent GIF image, assuming they have the same number of colors. PNG does not support multiple image layers to allow animation, but its related format – MNG – does.

Here’s some sample code to get started:

<span style="width:400px;height:32px;display:inline-block; /* the height and width should match those of the image */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='varyAlpha.png'); /* apply the background image with Alpha in IE5.5/Win. The src should match that of the image */ "><img style=" filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* make the real image fully transparent in IE5.5/Win, so the Alpha image can show through */ " src="varyAlpha.png" width="400" height="32" border="0" alt=""/></span>

You will notice the largest key is using the AlphaImageLoader class (DXImageTransform.Microsoft.AlphaImageLoader). That’s the trick! Happy Coding!