Learn how to cut the size of transparent images for the Web by more than 70% using Fireworks
First let me preface this by saying that this trick currently is only support by Flash Player. Flash Lite does not support PNG-8 files with alpha made with Fireworks (Note that it may be a handset issue and not a Flash Lite issue). If you want to petition for this feature, feel free to comment and I will pass the “signatures” along.
I understand that you can create a PNG-8 image file with alpha transparency using Adobe Photoshop. However, those files are far more inferior than a PNG-8 image that is created using Fireworks. I will demonstrate why a Photoshop PNG-8 lags behind a Fireworks PNG-8 in the follow paragraphs.
First off, PNG-24 looks better than anything else, but the filesizes are much larger than any other format. The ideal goal would be to create a PNG-8 with alpha that looks like a PNG-24—Fireworks comes close. Both Adobe Photoshop and Fireworks allow you to save a PNG-8 file with alpha, however, a Fireworks PNG-8 lets you combine color data with alpha much like a PNG-24.
To get a clearer understanding of what I mean, create a file with Adobe Photoshop and set the background to transparent. Next, create a new layer—fill it with content—then blur it to death. You will have created pixel data that has both color and alpha transparency. Use the “Save For Web” dialog and notice the differences between the PNG-24 and the PNG-8. The PNG-8 will be much smaller, but look much worse than the PNG-24. Click the image to see a larger version—it shows what I mean.
Next, take that PNG-24 and import it into Fireworks. In the “Optimize” panel, match the settings that I used and select File >> Export. You will be exporting a 256 color, PNG-8 with alpha transparency (you may not even need all 256 colors).
Finally, review the different options for image files that use transparency. As you can see, the PNG-8 created with Fireworks looks almost exactly the same as the Photoshop PNG-24, however, it is less than 1/3 the file size. This method of creating PNG-8 files with alpha will benifit any Web designer that creates Flash Web sites or banners.
Unfortunately I wasn’t able to get smaller sizes in Fireworks CS3. All the contrary. My PNG-24 284kb file outputs as 700kb when using this method. Maybe I’m doing something wrong?
Scratch my last comment. I just forgot to “Export” it. My bad.
My research has shown a couple things. Just as it seems that PNG-8 supports only straight, flat (single color) transparency, Internet Explorer only seems to support PNG-8 files (rather than the gradient-smooth alpha of PNG-24) files (thus, the raster-edged duck, above), unless you use a fix code (http://homepage.ntlworld.com/bobosola/) which only works on IE above 5. Upcoming versions may promise to have this fixed.
Your comments are pretty informed and helpful. Have you considered writing professionally? Like a periodical or something?
The Information Broker
Income for Life.