Learn how to cut the size of transparent images for the Web by more than 70% using Fireworks
April 9th, 2007 by Ryan Unger | 3,700 views
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.
Photoshop PNG-24
(2 votes, average: 5 out of 5)
Loading ...
June 22nd, 2008 at 9:00 am
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?
June 22nd, 2008 at 9:04 am
Scratch my last comment. I just forgot to “Export” it. My bad.