Experiments with alpha-tranparency .PNG Solutions for IE6
Introduction
Though .PNGs (Portable Network Graphics) offer many advantages over other graphics formats, they haven't reached the ubiquity on the web that .GIFs and .JPGs have attained. In addition to offering loss-less image compression, PNG-24s can have alpha transparency values; a pixel can be gray with a 50% transparency value. In a .GIF, a pixel can either be opaque or completely transparent - which often creates odd halos or jagged edges, while JPGs have no transparency functionality at all.
Although Internet Explorer 6 and below don't fully support alpha transparencies in .PNGs, modern browsers do. This article tests various solutions to displaying .PNGs with alpha-transparencies in IE6 and lower.
- The Problem with .PNGs
- The AlphaImageLoader Filter
- Bob Sola's pngfix.js
- Angus Turnbull's CSS-Only solution
- Serious AlphaImageLoader Concerns
- Alternate Solutions
- Alternate Solutions
- Conclusions & Recommendations
The Problem with .PNGs
.PNGs have the same problem that all aspiring web technologies have - browser support. IE7 is the first version of IE to have native support for alpha-transparencies. If any alpha-transparency pixels are present, Internet Explorer versions prior to 7 will render your beautiful images with a light blue or grey background behind any transparent pixels. (Shown in the screenshots at right.) IE6 can handle completely opaque or transparent pixels (such as in PNG-8s) in .PNGs just fine.
Alpha transparency refers to pixels with are neither completely transparent, nor completely opaque. For example, consider a red pixel with 50% opacity. When this pixel is on top of a black background, the resulting color will be a dark red. The exact same pixel over a white background will result in pink.
(Note that not all solutions work in all circumstances - so some images might be missing in some browsers.)
Test #1: IE and the AlphaImageLoader for .PNGs.
The most popular solution is the alpha image loader filter. This filter is proprietary to Internet Explorer, and was introduced in Internet Explorer 5.5. IE5 and earlier are unable to use any solution based on the AlphaImageLOader filter.
For the inline atom image, I've applied the filter directly to the image tag. But, the alpha image filter doesn't work when simply applied to an image. In fact, it seems to me that the alpha image filter doesn't work on any inline element.
For the background image galaxy, I've applied the alpha image loader filter to the surrounding div as a replacement for the normal background image. But the filter automatically stretches the image to fill the containing div.
Test #2: Bob Sola's pngfix.js
Bob Sola's pngfix.js uses JavaScript to re-write the HTML tags for the .PNG images, and then applies the AlphaImageLoader filter. Since this pngfix.js applies to all .PNGs on a page, I've applied it inside this iframe to isolate its effects.
This solution is easy to apply - simply connect the page needing fixing to a .pngfix.js file, and .PNGs on the page are fixed. This solution does simplify the work of implementing the AlphaImageLoader solution, but it relies on JavaScript being available in the browser. It seem quite odd to require JavaScript to fix an issue that was created via CSS.
There are several limitations with this solution. For me, the deal breaker is that only inline images are fixed with this solution. Background images alpha .PNGs still have the same grey background.
Test #3: Angus Turnbull's CSS-Only Fix
Angus Turnbull's CSS-Only IE .PNG solution uses CSS to apply a behavior (another IE-only scripting method) with the AlphaImageLoader filter to the troublesome .PNG images.
This solution is also quite easy to apply, and does not require JavaScript. There are still some limitations; including issues with padding and background image styling.
If you must use an AlphaImageLoader filter based solution to resolve the grey background on alpha transparency .PNGs, Angus Turnbull's solution offers the most flexibility of all the methods I've tested.
Serious AlphaImageLoader Concerns
There are major problems which to consider when implementing the AlphaImageLoader filter (or any solution based on it).
- Image Optimization, Part 5: AlphaImageLoader by Stoyan Stefanov of the YUI Blog
- Stefanov analyzes AlphaImageLoader as a method of resolving IE6's .PNG issues, and provides the results of testing effects on page performanc when using AlphaImageLoader.
Yahoo!’s search results page used to have a truecolor PNG sprite and employed AlphaImageLoader to achieve the transparency... Replacing the truecolor PNG with a gracefully degrading PNG8 ... decreased the pageload time by 50-100ms for the users of IE 5 and 6. 100ms may not seem like much, but for a page that loads under a second, it’s at least 10%. Also, according to an Amazon study, 100ms slower means 1% fewer sales (even for their content-heavy pages).
- Transparent PNGs Can Deadlock IE6 by George V. Reilly of Cozi
- When Cozi implemented the AlphaImageLoader filter, their testing revealed that it caused IE6 to freeze. Determined and talented Microsoft Ninjas were unable to resolve the issue. Cozi decided to go with alternate palette .PNGs instead.
- AlphaImageLoader filter flaws by Ingo Chao
- Discusses various flaws inherent to the AlphaImageLoader filter methods, and suggests workarounds for each case.
These drawbacks are so serious that I considered calling this section "AlphaImageLoader Considered Harmful". I do consider IE6 lockups and the other flaws harmful enough that the AlphaImageLoader filter isn't suitable for production work.
Alternate Solutions
Here some other solutions that seem viable, but that I haven't tested.
- DD_belatedPNG by Drew Diller - This JavaScript to implement a VML-based solution (rather than the AlphaImageLoader filter), and the library seems well thought-out. But a whole JavaScript library, even at 7k, seems like a complex solution to me.
- PNGPong - This is a Flash based solution - probably a good option if neither the alternate palette .PNGs or re-matted .GIFs are feasible. But, remember that iPhones and Pres don't have Flash capabilities.
- PNG-Transparency plugin for jQuery - As an additional component to the jQuery JavaScript library, it still relies on the AlphaImageLoader filter at it's core, but has several workarounds to the various flaws. This solution may be more flexible than Angus Turnbull's solution.
- PNG Hover - This solution is designed specifically for use with .PNGs on expanding CSS boxes. It uses JavaScript to apply the AlphaImageLoader filter, and it appears to overcome the issue that background images are not supported.
Test Conclusions
I haven't found one of these solutions to be flexible and robust enough to be worth the effort they take to implement. In order, here are the solutions I prefer:
- If you have access to Adobe Fireworks, consider re-exporting the image with an alternate color palette.
- If your .PNGs use alpha transparencies for more than edge-smoothing, you might get a better result by re-matting the image against the desired background color.
- Leave the grey backgrounds. They don't make the page un-useable; just fugly. Particularly since IE7 handles the .PNGs well enough, and IE8 is imminent, creating special workarounds for alpha transparency .PNGs will slowly become less of a concern.
- PNGPong, is a promising Flash based solution. I haven't yet tested it, but if you must support alpha-transparency .PNGs in IE6 this is an option to consider. Do remember that mobile devices - such as the Apple iPhone and Palm Pre - don't have Flash, so you'll also need to provide non-flash content. (SWFObject is my favorite method for doing so.)