PNG Alpha Transparency in Internet Explorer

Most casual web developers (and a fair number of professional developers) use JPEG or GIF images on the web, but there is another contender out there: PNG, which stands for Portable Network Graphics.

Why use PNG?

Better compression without loss of quality (i.e., you don’t get those weird "artifacts" that show up when you crunch a JPEG image)
Larger color palette than GIF
It’s open source!

Alpha Transparency

Probably the most exciting part about PNG files is that they support full alpha transparency. What does this mean? Well, with a GIF image, you can knock out a specific color and have transparency. With a PNG image you can do that, plus you can choose to have elements be semi-transparent.

Here are two example images. Note: this is simulated, but these are the kind of effects you could achieve:

Simulated GIF Effect

Simulated PNG Effect

But what about Internet Explorer?

This is obviously a huge boost to web design, but the problem, as is often the case, is Internet Explorer. Prior to IE7, IE did not support alpha transparency. You could use PNG images and get all the other perks, but it would substitute a light grayish color in place of your transparency.

Every other major browser from the last few years could handle PNG alpha transparency, but unless you wanted to have duplicate versions of your site, one with PNGs and a simpler version of the design with GIFs for IE, most developers avoided PNG images. However, there has been a solution under our noses the whole time that I recently discovered: AlphaImageLoader Filter.

The AlphaImageLoader Filter

AlphaImageLoader is a proprietary IE function, and with it, you can utilize alpha transparency in PNG files. All you do is insert some code into your image tag, and presto, instant transparency support. This example is for a graphic of a smiley face that is 200px by 250px, where PATH represents the path to the image file:

<img src="PATH" alt="Smiley Face" width="200" height="250" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='PATH',sizingMethod='scale');" />

Basically, this little bit of faux-CSS coding loads the filter and processes the image before displaying it. Note that you must specify a height and width for the area that the image will fill (this is known in CSS as a "bounding box"). However, if you always write valid code, you will have included this information already.

Customizing AlphaImageLoader

You have a few options with this filter to control how IE processes the image. These are especially useful if you are using PNG files to create a transparent background for an element. If you put the following words as the value for "sizingMethod" you will get the following effects:

crop: this crops off the edges of the image that don’t fit into the bounding box
image: this is the default, and resizes the bounding box to fit the image
scale: this scales (up or down) the image to fit the bounding box

The Catch

Unsurprisingly, this is not a piece of valid CSS, and if you put this in your document, it will no longer validate properly. The solution? Conditional Comments. As I explained in a previous post, you can use another piece of proprietary IE functionality to hide the offending, IE-specific coding from other browsers and the W3C validation tools. I would suggest moving the information out of the actual HTML tag and into an external CSS file that you could pull up in IE only. Here’s what that might look like:

iefix.css

STYLENAME { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’PATH’,sizingMethod=’scale’); }

from the head section of your HTML file

<link href="stylesheets/styles.css" media="all" rel="stylesheet" type="text/css" /> <!–[if lt IE7]> <link href="stylesheets/iefix.css" media="all" rel="stylesheet" type="text/css" /> <![endif]–>

Overall, PNG images are the way to go, and as we move farther and farther into faster loading web sites that need to look just as slick as print media, you’ll find that PNG images can fulfill those needs. And now that you’re equipped with this little trick, your your new designs will be supported by all the modern browsers.

Check out the official documentation about the AlphaImageLoader filter from Microsoft’s site.

Jeremy on November 21, 2007 Subscribe to our RSS Feed

Bookmark

7 Responses to “PNG Alpha Transparency in Internet Explorer”

Efficient Tips on November 21st, 2007 2:44 pm

You can also add background colour to PNG image files that will gracefully degrade in IE6 and lower versions using TweakPNG.
scribu on November 21st, 2007 3:53 pm

Very helpful tip. GIFs are history for me now.
Brandon on November 21st, 2007 4:16 pm

Great article, thanks for the tip. Usually IE hacks can be a pain, but this is fairly clean and simple.
Nathaniel on November 21st, 2007 5:18 pm

That is so cool. I’m bookmarking this for future reference.
Jermayn Parker on November 22nd, 2007 4:53 am

Good tips, nothing new but something defiantly you need to keep an eye on. I simply cannot wait until IE6 disappears for good..
Hal on November 22nd, 2007 11:00 am

PNG is not new. It is a graphic format from about 1995 that never quite caught on, and for good reason. Besides the IE problem, it is harder to work with than either jpg or gif. Using PhotoShop it is very difficult to make a png small enough to be viable. I want my pages to load as fast as possible, and png does not optimize as well/easy as the other two formats. This may be possible, but be prepared for a lot of learning and added work.

I can make a good sharp jpg that is quite small. And a gif is small by default because you can only use 256 colors with it at most.

Look around the web and see how many png pics you find. Not many I at all. I don’t think after all this time it will ever become a default format.

All my opinion of course.
Daniel on November 22nd, 2007 11:08 am

I think that all the file formats have a specific usage.

Photos tend to get compressed more easily with JPGs, while buttons and simple graphics are good in GIF.

PNG behaves similarly to GIFs from my past experience, and sometimes they are preferred because they support more colors.

I am not sure if we’ll see one of these formats becoming the standard in the future.

Perhaps there is still room for something innovative that solves all the problems?