There are many topics to be discussed around CSS and transparency, for now, just the one has been fleshed out.

8-bit PNG with alpha transparency

For a long time, I’ve been under the impression that alpha transparency in images was reserved for modern browsers, and that if you wanted your webpages to look halfway-decent in Internet Explorer 6 (IE6), you should steer clear of 24/32bit PNGs altogether.

Therefore, my preferred solution has been to blend any transparencies into a suitable matte colour, then export as an 8bit PNG with index transparency only.

Only recently I find out, there’s a better way. Being a self-confessed shopaholic, I was unaware that The works was capable of exporting 8-bit PNGs with alpha transparency.

The downside is that the image edges will look aliased in IE6. But I think this is a small price to pay so that other browsers can enjoy true alpha transparency.

This technique works better in some situations than others (for example: avoid it for anti-aliased text with a transparent background, because the text will look dreadful in IE6). Used in the right conditions or in combination with alternatives for IE6, this technique can look very slick.

Sets of UI graphics used throughout the widget examples on use this alpha transparent 8bit PNG technique.

Relevant articles:

Posted in

Leave a reply