PNG Images, Partial Transparency, and IE

According to this post on the YUI Blog by Stoyan Stefanov, both AlphaImageLoader (used to make alpha transparencies in PNG images display properly in IE6) and the alpha filter (IE's equivalent of the CSS3 opacity property, used to create partially transparent elements in IE/Win) use a lot of memory and can be a significant negative impact on browser performance in IE. The former even can make the browser completely unresponsive while they are processed sequentially. So what can one do about this, you may ask?

As Stoyan says, one solution is to use VML (Microsoft's proprietary solution for vector graphics). Apparently while IE6 doesn't properly support alpha transparencies normally, it does when the PNG image is used on a VML element. The tests Stoyan performed show that it runs about 10 times faster and uses about one-tenth of the memory — now that's a significant performance improvement!

So how does one use VML? Well lately, I've been using the script DD_belatedPNG by Drew Diller (which Jonathan Snook happens to mention in the comments for the YUI Blog entry). I switched to it because it supports using background-position and background-repeat, which AlphaImageLoader can't do. I'm pleased to find out that it apparently has a performance improvement as well over scripts such as Supersleight and Unit PNG Fix, which use AlphaImageLoader. Here's another script to automatically generate the VML elements in IE6. And of course, if someone really wanted to, one could statically embed the VML elements in the page's markup within a conditional comment to hide them from browsers that don't need (or even support) them.

I also mentioned the alpha filter. According to the YUI Blog entry, alpha filters also use a lot of memory, so I suggest you avoid them when you can and use VML and a PNG instead. When you can't avoid the use of the alpha filter, however, you might need to use AlphaImageLoader as well, to avoid the ugly rendering of alpha transparency in PNGs when the alpha filter is applied to it (which is a known limitation in IE7-8).

I hope you've enjoyed this second post on improving how you use PNG images for cross-browser compatibility and speed optimization.