PNG Transparency in Internet Explorer

PNG Alpha Transparency

PNG format offers indexed transparency equivalent to GIF transparency. It works in Internet Explorer for Windows without any need for a JavaScript fix. PNG also has a more impressive option -- variable transparency, which is referred to as alpha transparency. Between all-or-none it allows 254 levels of partial transparency. Nearly all the latest browsers support PNG's variable transparency, including WebTV and Microsoft Internet Explorer for Macs. Pre-IE7 versions of Internet Explorer for Windows set a gray background.

The demo on the right shows how to overcome Internet Explorer's deficiency with a JavaScript function. It can be used for Windows Internet Explorer 5.5 or higher. Go to the View menu and try changing the text size. The images will move vertically over the stripes. If you are using Internet Explorer, try "Select All" also. Note: Opera's [ View --> Zoom ] will enlarge the images instead.

Go to the end of the page for a no scripting alternative.

Service pack 2 for Windows XP changed some default settings for ActiveX which may cause the images to disappear when this page is viewed in IE6. To view the demos in IE6 the security settings for the Internet Zone need to be set as follows:

Tools > Internet Options > Security > Custom Level
Scroll down to "ActiveX controls and plugins" and enable "Binary and script behaviors"

PNG anti-aliasing with alpha transparency

Anti-aliasing is a method of smoothing the appearance of curved or diagonal elements using blended pixel colors. It only looks good against one background color. PNG's variable transparency creates the same effect regardless of the background color. The demonstration on the right shows how it works. The background cycles through four colors and returns to white.

When IE6 is no longer widely used alpha transparency antialiasing will probably become the standard method.

No hacks - just add a background color

If a PNG alpha image is saved with its own background color, Internet Explorer versions before IE7 will render the alpha channel against that background. It's easy to add a background color with the image tools reviewed on this site. On a page with a plain background that's all you need -- no JavaScript fixes, CSS hacks or PHP scripts. In all other modern browsers the background will be transparent. Hacks won't work unless Internet Explorer's Binary and script behaviors are enabled. Internet security policies at many corporations require that ActiveX scripting is disabled.

PHP remedy

If you are able to use PHP server-side scripting on your site, Justin Koivisto has devised a PHP solution which uses an image replacement strategy. JavaScript is not required, but in IE_5.5/6 "Binary and script behaviors" must be enabled to prevent the images from disappearing.