Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Experiments with alpha-tranparency .PNG solutions for IE6

Last Update: 7.15.2010

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

Screenshot of original images rendered in IE6
Screenshot of original images rendered in IE6

.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.


Atom - Inline .PNG
Atom - Inline .PNG
Atom - Inline .PNG
     

Throughout this article, I will use these 2 images to demonstrate the solution I'm testing. The atom is an inline image, and the galaxy is a background image. Each image is shown against 3 different background colors.

(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.

Atom - Inline .PNG
Atom - Inline .PNG
Atom - Inline .PNG
     

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

Atom - Inline .PNG
Atom - Inline .PNG
Atom - Inline .PNG
     

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.


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:


Looking for more?

Back to Pew Pew Laser Articles

Contact Me