I’ve made a decision. I’m not going to use GIF‘s for web development anymore. There may be a few situations where I’ll need to make an animation (for the time being – MNG is coming) but otherwise GIF is gone in my opinion.
I’ve started using PNG for nearly all situations. It even has an advantage over GIF and it’s called 8-bit alpha transparency. This tutorial will show you how to create 8-bit alpha transparent PNG‘s in Fireworks.
Why Switch from GIF to PNG?
GIF has its problems. It is very, very limited when it comes to transparency. Here’s any example:
See the fuzzy, pixelated halo of white pixels on the last 2 images? That’s what I’m talking about. All three images are the same but they are placed over different colored backgrounds. The problem arises when that transparent GIF (which has a matte of #FFFFFF) is placed over a background that is not white.
So how is PNG better?
Here’s the exact same example but this time I’ll use an 8-bit alpha transparent PNG.
See how all three images have a nice smooth rounded look. Again, this is a screenshot of 3 exact images placed over different colored backgrounds. All modern browsers will render it with smooth edges and no fuzzy, pixelated halo effect.
The bad news
Why does all bad news have to involve IE? Notice how I said all modern browsers will render an 8-bit alpha PNG correctly? Yeah, well that means that IE 6 and below for Windows mess it up. Here’s what they do to our example:
If you look closely you’ll see that there is no fuzzy, pixelated halo of white pixels, but there it also no antialiased edges either. Now, this isn’t all that bad. All three images look decent and are still usable. They just don’t look as pretty as say Firefox, Opera, or Safari would render them.
8-bit alpha in Fireworks
Making an 8-bit alpha transparent image in Fireworks is really simple. Just set your optimization settings as follows:
Make sure to set your color palette to Adaptive. If done correctly, you will notice that the rebuilt palette will have small “transparent canvas” swatches overlayed on top of certain colors. The tingling sensation means it’s working.
You can download my source Fireworks file to see how I did it.
I built a live example page so that you can see the difference between a transparent GIF and an 8-bit alpha transparent PNG in your browser(s) of choice. Test away: