As most of us know IE6 does not support PNGs with alpha transparency. We recently updated DTS’s site with some popups that have a drop shadow using PNG-24 images with alpha transparency. Here’s how it looks in IE6 compared to any modern browser (FF, IE7, Opera, Safari, Chrome, etc.). Notice the nasty blue border.
PNG-32 (problems in IE6)
| IE6
 | Correct Display
 |
I wish we could ignore IE6 users, but around 20% of our traffic still hasn’t upgraded, so we have to make it work for them. There are tons of JavaScript and CSS hacks out there to get IE6 to display PNGs with alpha transparency correctly, but we’re trying to avoid hacks whenever possible so as to not break things in the future. Also IE6’s filter technology can cause other problems. To fix this, I found a sweet “non-hack” solution on sitepoint which recommends using PNG-8 instead of PNG-24.
To summarize the article on PNG-8 and PNG-32.
| PNG-32 | PNG-8 |
| 16.7 million colors (like a JPEG) | 256 colors (like a GIF) |
| alpha transparency, not just indexed (like GIF) | alpha transparency (just like PNG-32) |
| doesn’t work in IE6 | works in IE6 like a GIF (indexed transparency) |
PNG-8 with alpha transparency (IE6 works, pretty much)
Here’s what the PNG8 looks like in IE6 on our site. Notice that the drop shadow is missing, but the transparency still remains.
| IE6
 | Correct Display
|
Everything “works” for IE6 users even thought it’s a slightly downgraded experience since the shadow is missing. For us, this is preferable to using JavaScript or CSS hacks that could cause other problems with animation. Since this is a image that only needs 256 colors, the PNG-8 is the perfect solution that is win-win-win.
How to make Alpha PNG-8 Images
The problem with all of this is that there is only one program that can make this specific kind of PNG-8 – Adobe Fireworks. Photoshop can’t do it, and I’m not sure if any other graphics programs can either. Here’s a step by step for making the PNG-8
1. Open the PNG-32 (or photoshop file)
2. Change the Image Type to “PNG 8”
3. Change to “Alpha Transparency”, then click the “Rebuild” button
Now you will see the new color palette with alpha colors. IE6 will only display the solid colors, not the fully transparent (upper left) or semi-transparent (the three with inset clear boxes).
4. Chose File-Export to save the PNG-8
And that’s it. It takes a little more time but has made our development easier and provides a more stable experience for users.
Sources