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?
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.
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.
The PNG (Portable Network Graphics) Home Site
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.
A tome of information on PNG and its filesize saving capabilities. Lots of good examples of what PNG is capable of.
Dean Edwards IE7 Hack
anonPosted at 10:53h, 26 May
all looks fine in IE, except the PNG-24 which has a grey BG. They all look identicle in FF …no checkerboard (win2Kserver, IE 6.0.28 and FF 1.0.4)….am I missing something??
Andy SkeltonPosted at 10:55h, 26 May
Great! Two concerns: At work, I am stuck with IE 6.0.2900… in which none of the images on your page showed a checkered background. Do you know whether background-images of nested elements will ever be rendered with transparency? Check your transparent crystal ball. T’would be grand, wouldn’t it?
JeftePosted at 11:27h, 26 May
Silly me, the background image css was broken. Take another look.
JonathanPosted at 11:07h, 26 July
Wow, awesome insights on PNGs, thanks! I found these very useful =)