PNG: Transparency workaround for MSIE

As of MSIE version 7, those issues have been resolved as far as I can tell.

Those of you, who want to get rid of GIF-images on your websites and still want to serve transparent images possibly know the issue: MSIE — up to version 6.0 at least — can't render alpha transparency at all (at least not with ugly hacks such as the AlphaImageLoader filter). I don't know, why Microsoft doesn't enable this filter by default.

Anyway, if you can live with some limitations — to be precise, MSIE users have to live with them — you can create your transparent PNGs in a way that makes Internet Explorer display more satisfying results.

[ top ]

The workaround: background colour

The workaround is quite simple. Just save your PNG with a background colour. This does not mean, that there actually is a background colour being displayed — in working browsers. It just means, that you provide some kind of fallback for misbehaving browsers. You can see three images below:

A transparent RGB-image without any background saved
A transparent RGB-image with a saved background (dark beige)
A transparent but indexed image without saved background

Differences between browsers #1: Simple images. No background.
Your Browser	Opera 7.0 (screenshot)	MSIE 6.0 (screenshot)
Ideally the screenshots three colums should look the same.

What you can see: MSIE renders a background colour where there should be transparency instead. If you do not deliberately choose a colour MSIE will choose one for you, depending on the palette used to draw the image. The without BG image shows this.

However, the image saved with background colour does look good and fits into its surroundings. It is really opaque with an appropriate background colour.

This sounds good so far, since you can achieve good results, if you're not aiming high, as we shall see…

[ top ]

Limits

Obviously, this workaround is not perfect. It is just a foul way of avoiding the worst troubles. Basically, you have two options:

Try to be as transparent as possible or
use true colour (RGB images)

I will try to show you some effects with the following tables. If you only want to read the conclusion below, feel free to skip the examples ;)

Problem: Different background colour

When the background colour behind the image (ie: on the website) differs from the background saved within the image, you have the same effect as if not saving any background colour at all. At least, you can control the background colour. The indexed image behaves, although its quality is lower:

Differences between browsers #2: different background.
Your Browser	Opera 7.0 (screenshot)	MSIE 6.0 (screenshot)
I have set the background of the table cells manually.

Problem: Background images

As MSIE offers no real transparency for PNGs, don't try to overlay two images. In this example, I am using a transparent shape of Austria as background image for the table cell. This background image has a saved background colour (light yellow). Above it, I placed the other images. Normally, you should see, what Opera (and Mozilla and certainly others) render: The text of the images with Austria and the basic table cell background colour shining through (dark beige). Again, the indexed image copes best with transparency, but still looks ugly:

Differences between browsers #3: transparent background.
Your Browser	Opera 7.0 (screenshot)	MSIE 6.0 (screenshot)
Again, the three colums should look the same.

You can imagine, that a pattern in the background of the images works similarly. Furthermore, if I didn't save a background colour for the shape of Austria, there'd be another colour chosen. If the background colour saved for the with BG-image was the same as the table cell background colour, one would still not see the image behind it: The RGB-image simply is opaque in MSIE.

[ top ]

Conclusion

You can choose between either a smooth image or transparency. So you can choose one of the following options for your image:

Save a background colour and keep the smooth image: The workaround to only save a background colour is a very limited, though in most cases probably a sufficient solution. If you know, what background you place the images on (and this background is homogenuous), this way work just fine.
Create an indexed image and live with lower quality: If you really need more sophsticated transparency, then you will have to live with indexed images thus reduced colour depth. Background images cause problems, as you can see in table #3.

Regarding indexed images: If you don't need more than 256 colours, indexed images do not suffer from quality loss, if you choose an appropriate palette.

Thanks and further reading

I'd like to thank Oliver Ripoll and Greg Roelofs for their replies in comp.graphics.apps.gimp. They clarified these things. But as I didn't find a website explaining the workaround instantly, I decided to write my own.
Thanks to Branko Collin for an eMail discussion about the examples, the result of which you can read on this page.

If you want to know, how to create indexed images with your image processing tool, please refer to the manual ;). In The GIMP it is just a rightclick into the image, then select Image > Mode > Indexed.

Other alternatives and further reading of how to handle PNGs in the different browsers are discussed on http://www.alistapart.com/stories/pngopacity/.

A nice article regarding image formats and their use (especially PNG) can be found at http://hackles.org/etc/png.html.

[ top ]

Contact & Imprint — Kontakt & Impressum
Created: 2001-01-19 — last modified: 2007-03-25 — last update of web site: 2010-01-16