The state of PNG transparency

26 May The state of PNG transparency

What is PNG? What browsers support the format? I thought IE didn’t have PNG support? Is it transparent or not? How can I make IE display PNG’s full transparency capabilities? These are all valid questions that arise when using the PNG format. For those that aren’t familiar with PNG (portable network graphics) it is a lossless compression that offers far greater quality and smaller filesize than the ever-so-common and proprietary GIF format. “Better quality and a smaller file! What more could I ask for?” you’re asking yourself. Well, PNG’s also allow designers real transparency. How well does your browser render them? Take a look at these images and compare the last 2 with the first, which is a GIF.

If you are viewing these images in IE, chances are these images look pretty bad. Alot of white around the shadows in the GIF and PNG-8 images and the PNG-24 is totally broken. If you are viewing this in Firefox/Mozilla then the first two images are chunky and ugly while the third properly allows you to “see through” the dropshadow to the checker board background. Whats going on here?

There are different types of transparency?

PNG transparency comes in two flavors: 8bit(indexed transparency) and 24bit (alpha transparency). The former is found in GIF’s and is the standard you see used on the internet. This kind of transparency is on/off. Absolute. The pixels are either filled, or transparent. This produces ugly white pixels around aliased, transparent images and makes it impossible to create dropshadows that work on any background. Note the white around the drop shadows in the GIF and PNG-8 images.

PNG-24 provides 254 levels of transparency per pixel. This gives designers the freedom to add dropshadows without worry of what color/pattern background is the destination. Besides dropshadows, images can now be semi-transparent. Note the green bar in the PNG-24 version – you can see the checker board pattern through it. What a windfall! This opens up all kinds of neat design implementations – if only it was widely supported.

How can I get IE to render that fancy transparency?

“Widely supported” in the browser world means “Does it work in IE?”. This is an unfortunate fact that designers have to cope with daily. If you haven’t heard of the IE7 css provided by Dean Edwards, it adds some css2 functionality, fixes some CSS issues IE currently has and renders PNG’s correctly. Its a great way to tide you over until IE7 arrives and hopefully addresses these issues. The only caveat is that it is a javascript implementation and thus could pose a liability in terms of accessibility. In other words, if a browser has javascript disabled – so are the niceties this hack provides.

If that is too much funtionality for you, Justin Koivisto has a php script that replaces image tags at runtime with the proprietary IE filter code that renders true alpha transparency.

Conclusions

Besides nifty transparency, PNG’s are far smaller than the average GIF. The compression is lossless, which means there is no artifacting like that found in JPG’s. Someone even created a PNG that displays all 16.7 million colors in 58.4Kb !

PNG is a great format that needs more attention. GIF’s have plagued the web long enough. Everyone should replace their GIF’s with PNG’s. Even for transparency. I find many designers/developers don’t relize they can use the PNG format. Many believe IE doesn’t support the format altogether – totally wrong! IE currently supports the basic transparency found in PNG-8 and the release of IE7 should show a rise in PNG use and allow designers to implement true alpha transparency in their work without hackish methods of delivery. Until then, the above methods should have you well on your way to enjoying the Portable Network Graphics format.

Resources

The PNG (Portable Network Graphics) Home Site
http://www.libpng.org/pub/png/

PHP script for replacing image tags with code that allows IE 5.5+ to render PNG’s alpha transparency. Good background information on the implementation.
http://koivi.com/ie-png-transparency/

A tome of information on PNG and its filesize saving capabilities. Lots of good examples of what PNG is capable of.
http://www.webcolors.freeserve.co.uk/png/

Dean Edwards IE7 Hack
http://dean.edwards.name/IE7/