Recently, I had to tackle a project that required the use of alpha transparency in PNGs. It’s been a while since I needed to work with PNGs—resorting to using GIF’s one-color transparency for several years as a suitable workaround. I never gave PNGs much thought for several years since the developers for Internet Explorer always seemed fail to support it for numerous years.

So I thought this being the new millennium, I’d re-examine what my options were. With a brash sense of naivety, I assumed browser vendors had this problem solved. Why shouldn’t I? Just look at the browsers that support PNGs natively: 

• It’s been six years since Internet Explorer for Macintosh came out with native support for alpha transparency. 
• Netscape Navigator now supports PNG. 
• Even Opera has been supporting PNG for a while. 
• From the Preview and Beta Releases of Internet Explorer 7, Microsoft looks to release a browser for the PC with native support for PNGs with alpha transparency. Finally.

PNGs, Natively

What do I mean by natively? I mean that by using the ubiquitous img tag (see example), the browser would render a PNG image just as normally as any GIF or JPEG a web developer might use, except that PNGs can come with stupendous alpha transparency:

<img src="alpha.png" alt="Image with alpha transparency" />

While we are waiting for IE7 to launch, everything is still not perfect. Internet Explorer 6 for Windows still doesn’t support PNGs natively. As I wrote earlier, when IE7 does launch, web developers will still have to support IE6 for about a year after the new browser. 

So a solution is needed to provide PNGs natively to the browsers that support them and a workaround solution to the browsers (Internet Explorer 5.5 through 6 for Windows*).

Pre-existing Solutions

And there have been solutions developed to work around the IE5.5–6’s inability to handle PNGs natively. Although, I’m sure there are more, here are a couple: 

• PNG Behavior
• Drew McLellan’s solution

I’m sure there are more. If there’s a solution that’s not here and you think it should be, please leave me a message in the comments section. 

Note: These solutions work on Internet Explorer 5.5 and higher because version 5.5 is when the properitary CSS filter property was introduced.

How These Solutions Work

While they are many solutions, there is really just one way these solutions work. In a rudimentary way, here’s how they work:

1. When you code the page, be sure to set the width and height of the PNG image in the CSS with the width and height property.
2. As a page is loaded, a piece of JavaScript is executed. 
3. The script goes through the HTML markup looking for img elements that point to images with the png extension.
4. Once it finds such an img code, the script dynamically rewrites the HTML on the fly…
5. The first part of the revision is to replace the PNG image with a single pixel GIF that is transparent.
6. Next, the PNG file is set in Internet Explorer’s filter property in order to trigger the alpha transparency in that browser. Since the only way this can be done, the PNG gets set in the background. Thus, the need to set the width and height for the image.
7. Thus, the PNG is shown in the background behind the transparent GIF.

It’s a bit of clever thinking and a nice bit of coding to compliment it.

The Problem with the Solutions 

Even though the solution works, I couldn’t help but think that the solution is based on JavaScript, which users can easily switch off in their browsers. I know in these Web 2.0 times that JavaScript is an expected minimum requirement for people to use AJAX enabled sites. I don’t want to ruin the AJAX crowd’s party, but isn’t there another solution? What if a developer simply wants to use a PNG image—only one PNG image—and making sure a site isn’t dependant on JavaScript? What we need to do is have a way to use PNGs without mandating that site visitors have JavaScript enabled. 

Besides, isn’t using a transparent single pixel GIF really too Web 1.0?

Alpha PNGs Mean Bloating 

Another item to consider is file size. If you look at the filesizes that PNGs with alpha transparency usually have, you will notice that they are usually larger. A PNG image with alpha transparency by its nature to retain the color information about alpha transparency will be a larger file size (see Table on File Size Comparions). Because of this large file size, more times you will find that to limit your use of alpha transparent PNGS. 

File Size Compation for Images

File Type	File Size	Demo
PNG 24-bit	166kb	cssckbk_cover.png
PNG 8‑bit	64kb	cssckbk_cover_8bit.png
JPG	52kb	cssckbk_cover.jpg
GIF	76kb	cssckbk_cover.gif

So, if you find yourself using a multiple 24-bit PNGs, chances are your web page file size is very bloated. If you find yourself using mulitple PNG images, I would ask:

• Are you sure you need to use all those PNGs?
• Are your users on fast enough connections to not mind the bloated file size? 

If the answer is “yes” to both those questions, then a JavaScript solution for the PNG dilemma is probably the best solution for you. 

For other situations, we need to think of another solution. 

We need a solution in the same way as we do with the many image replacement methods that are available. In fact, that’s how my proposed solution works—by piggybacking off an image replacement technique and by delivering the appropriate CSS rules we can work around this problem. 

Schmitt PNG Image Replacement Technique

The first part of the solution is to lay the foundation with HTML: 

<h1> 
 <a href="http://www.christopherschmitt.com/">
  <span>Hello, world!</span>
 </a>
</h1>

The next step is to use an image replacement technique to slide the PNG you want to use:

h1 a {
 display: block;
 width: 400px;
 height: 100px;
 background: url(”hello_world.png”) no-repeat 0 0;
 text-indent: -1000em;
}

I saved this CSS rule along with my other styles in schmitt-png-ir.css.

Now, if you stopped here, your web page would render fine in all browsers except Internet Explorer 5 through 6 for Windows. 

Filter Style Sheet 

In order to accommodate those Internet Explorer 5.5−6 for Windows, we need to set up a separate CSS rule that calls Microsoft’s proprietary filter property in order to activate the alpha transparency:

h1 a {
 text-indent: -1000em;
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.
  AlphaImageLoader(src='hello_world.png'),
  sizingMethod='scale');
}

I saved this style sheet as filter.css.

What About 5?

The problem with this solution is that Internet Explorer 5 for Windows neither handles PNGs navitely nor recognizes the filter property. The workaround is to supply that browser with a specialized GIF image that resembles the PNG image’s alpha transparency. 

Since PNGs have 256 shades of transparency and GIFs only have one color that can be assigned as transparency, it’s a little bit of a stretch to mimic alpha transparency. Yet, it is possible. In Photoshop, select File > Save for Web. Then in the select to export the image to GIF. Then select Diffusion Transparency Dither as shown in the screen capture. 

Sure, it’s a bit of a hack, but your visitors will get the idea. And it’s less annoying, in my opinion, than keeping the content from the visitor than showing a browser upgrade message. 

So with the new image, we need to set up a separate style sheet that will deliver the image to Internet Explorer 5 for Windows: 


h1 a {
text-indent: 0;
background-image: url(”hello_world.gif”) !important;
}


I saved this file as winie5.css.

Associating Styles to the Web Page 

Setting up the style sheets is only part of the solution. The other part is just as important: how to associate the files to the web page. 

First, link to a style sheet file that to blank file: 

This screen.css file is basically a launching pad to other style sheets. In this style sheet, I import three important style sheets:

/* master, standards compliant css */
@import url(”schmitt-png-ir.css”);
/* styles for winie5.0 - .gif */
@media tty {
 i{content:””;/*” “*/}}; @import ‘winie5.css’; {;}/*”;}
}/* */
/* styles for winie5.5 - .png */
@media tty {
 i{content:””;/*” “*/}}@m; @import ‘filter.css’; /*”;}
}/* */

The @import rule simply loads the base style sheet which includes the standards-compliant method for calling up the PNG image as a background image. 

The first @media rule is a hack that lets only Internet Explorer for Windows 5 import the winie5.css file. Developed by Tantek, the IE5/Windows Band Pass Filter works like a charm.

The second @media rule is another, similar hack called IE5.5/Windows Band Pass Filter. This time only Internet Explorer for Windows 5.5 imports the filter.css file which triggers the Microsoft filter property. 

You can go through the code for the final screen.css here.

What About Internet Explorer 6?

Unfortunately, there isn’t a unique High Band Pass Filter just for Internet Explorer for 6. The solution to deliver the appropriate style sheet to that browser is to use conditional comments. Conditional comments is another Microsoft proprietary extension to browsers. It allows developers to target specific Internet Explorer browsers to render HTML code while other browser will ignore the code. 

To use the conditional comments, I go back to where the link tag used to associate the screen.css file tothe web page. Below that HTML code, I use the conditional comments to let only Internet Explorer 6 for Windows pick up the filter.css.

<link rel="stylesheet" type="text/css" href="screen.css" />
<!–[if IE 6]></strong>
<link rel="stylesheet" type="text/css"  href="filter.css" />
<!–[endif]–> 

With that, all modern browsers that can handle a alpha transparency in PNG images will get the PNG image or get a GIF image instead.

The Proof

Does the solution work? Test out the example page on your own with various browsers or take a look for yourself at these screenshots: 

• Firefox 1.0.7
• Firefox 1.5
• Internet Explorer 5 for Windows 
• Internet Explorer 5.5 for Windows
• Internet Explorer 6 for Windows
• Netscape Navigator 7.2
• Safari 1.3
• Opera 8.5

Benefits

Here’s a listing of the benefits in this solution: 

• Does not require JavaScript in order to work
• An extension of image replacement techniques, easy to implement and understand 
• Works in versions of IE that don’t handle PNGs natively (Internet Explorer for Windows 5–6)
• Works with any PNG capable browser’
• Does not require a transparent, single pixel GIF 

Cons

Note that the first three items in this list are disadvantages based on Microsoft’s filter property and not the solution itself. 

• Does not work on inline PNG images
• Works only on background images
• PNG images won’t tile
• Doesn’t work in Internet Explorer 7 Beta 2

What about Internet Explorer 7 for Windows? 

As mentioned earlier, Internet Explorer 7 for Windows handles PNGs natively and therefore can handle the standards based rule without needing to use the CSS “filter” rule. Since there’s no need for WinIE7 to use the filter rule, there’s no need to pass it on. 

However, based on testing for this solution, Internet Explorer 7 Beta 2 for Windows appeared not to accept the PNG IR technique. If someone wants to test the set up and make modifications to the technique, please do and let me know about it. Until it Internet Explorer 7 for Windows launches, I’m not going to bother unless I have a free moment or two to try some things out. 

My overall attitude to browser software in beta has been soured since the Netscape Navigator 3 and 4 betas. As a result. I don’t actively test web sites on browser betas no matter how many times these browser developers tell us their code is “layout complete“. If it’s beta, it means it’s not complete and will always, always have changes until it comes out.

How Long Will We Need a PNG Workaround?

In my article about the adoption rate of Internet Explorer 7, I made the assumption that Internet Explorer for Windows 6 will be around for a while. Based off the launch and staying power of Internet Explorer 5 for Windows, I’m expecting the workarounds for PNGs will have to last for a year after the launch of IE7. 

In Conclusion

Instead of a solution that acts like a hammer in replacing every instance of a PNG, we need a solution that acts like a small screwdriver. By isolating one or a few images that can be PNGs, we have a solution that works best for sites that do not need or want to be dependent on JavaScript.