PNG-8 with alpha transparency?
I know some of you will say that this is impossible, because that was exactly what I was saying when I found out about it.
But, Adobe Fireworks makes itself “guilty” about that and in this article I will show you how you can get a PNG-8 image with alpha transparency.
What is alpha transparency?
Some time ago, GIF was the most popular type of image compression for web graphics. The GIFs have done a very good job and they still do but their disadvantage in front of the PNG is that they only support index transparency. In other words they support transparent pixels but they have to be full transparent.
Why should this matter present interest to me?
Because IE6 doesn’t support alpha transparency. So, to keep it simple…IE6 doesn’t render well the transparent PNGs and more than that…all transparent pixels are transformed into light blue/gray pixels as you will see in the bellow examples.
Photo credit: ablenetdesign
How PNG-24 is rendered by IE6
Let’s use the following example as a PNG-24 image you want to convert it to 8-bit PNG:
Let’s see in the bellow image how these wings will look into different browsers, please note the strange (but well-known) transparent pixels problem for the IE6:
Introducing you a solution an alternative for this problem
In order to proceed please open the 24 bits PNG image using Adobe Fireworks. If the Optimize panel isn’t visible for your workspace then toggle F6 to see it or select Window -> Optimize from your top menu.
With the above settings you can export now your new PNG-8 image. Let’s make a new comparison and check how IE6 renders the PNG-8 image now:
Note the jagged effect that appears now when IE6 browser renders the PNG-8 image we just made. So, as a conclusion, this method can’t be considered a solution 100% because has its owns issues.
Final Thoughts
The purpose of this article is not to provide you a solution for IE6 alpha transparency problem, but to give you an alternative point of view for this problem.
On the other hand, if you compare resulting PNGs for different situations you may consider this method a solution for your web design. This happens when the resulting PNG image matches your design expectations.
IE6 PNG fix resources
If you don’t like complicated things and you just want a quick and effective way to fix PNG alpha transparency issue I’d recommend you the following resources:
I use this: http://code.google.com/p/ie7-js quite ok, but naming was quite annoying. That is the reason why I always try to use GIF or JPG instead of PNG, hate IE6 and those who keep asking for IE6 support :P
Okay,
I had problems with it 5 years ago.
Nowadays, I don’t care : I use png heavily on web sites, and it’s ugly on IE6. And I’m happy.
I recently came across a similar problem in a project where I was animating transparent png’s using jQuery. My png’s were producing black borders (where transparency was 0 and 100%) in IE8 and below when animated.
My solution was to use png8 for IE users, and apply a matting colour which matched the border. The downside is that you get the jagged edges.
useful article you sharing. thanks
Thanks for sharing your opinions regarding this topic, and I hope you found this helpful!
Unfortunately the more you learn about optimization the more you find (even Fireworks) horrible limitations.
The Alpha transparency feature in fireworks supports 16 levels of transparency, (4bit) you can go ahead at test that with a simple monochromatic image as the maximum it will allow is 16 colors even with 256 selected.
…adding color “noise” to force more colors into the palette will do nothing for your alpha banding.
try it.