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
Hey man, great article. I remember stumbling across that article a while back on Sitepoint that you referred to. Great article, and very helpful alleviating the problems with the alpha-transparency issue, as well as the larger file size that comes along with using PNG-24.
Nice trick, thanks! Will definitively come in handy..
By the way, Paint.NET (http://getpaint.net) lets you save 8-bit PNGs (+ options for dithering and transparency threshold).
@Fredrik Kalseth
I’d love to see a tutorial on how to create an alpha PNG-8 with Paint.NET. I couldn’t figure it out 🙁
When you save a file as PNG, you get a "Save Configuration" dialog afterwards which lets you choose the bit depth etc. I haven´t tried it yet though so dunno if it works properly?
This is fantastic. I will have to use this sometime very soon. Now the only question for me is whether my old version of Fireworks (CS1) will save these alpha PNG-8 images. Thanks, John. This is most helpful.
By the way, your Best Commentaries website is amazing! One of the best sites to come my way all year. Thanks for doing that work. I’ve passed it on to many friends who also love it.
This is a solution if you don’t need smooth gradients going from color to alpha. png8 just like gifs tend to give jaggy corners. Also, if you "save for web" in photoshop you can select png8 or png24.
LeRoy, yes, I hope the post made it clear that PNG8 supports indexed transparency-only in IE6 and alpha-blending in all other browsers. So the jagged edges only appear for IE6 users which was okay for my situation.
However, Photoshop is not capable of producing an alpha blended PNG8. It can make a PNG8, but only an indexed PNG8. If this still doesn’t make sense, you might want to look over the sitepoint articles for more explanation.
Hmmm, good idea, but if need more then 255 colors… Designers use more and more graphics for websites with gradients 😉 😉
i think, we need to forget about IE 6 or delete it from all computers in the world.
Now and then I’ll stumble across a post like this and I’ll recall that there really are still interesting pages on the web. ^_^. Thanks.