April 9th, 2007 by Ryan Unger | 8,062 VIEWS | 3 Comments »

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.

SaveForWebTo 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).


ColorSelector


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.


PNG-24 Info Pane
Photoshop PNG-24

Fireworks PNG-8 Info Pane
Fireworks PNG-8

Photoshop PNG-8 Info Pane
Photoshop PNG-8

  • Share/Bookmark

Related posts

  1. kenoxite
    June 22nd, 2008 at 09:00 | #1

    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?

  2. kenoxite
    June 22nd, 2008 at 09:04 | #2

    Scratch my last comment. I just forgot to “Export” it. My bad.

  3. Joe Kawano
    January 14th, 2009 at 15:48 | #3

    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.

  1. October 12th, 2009 at 06:42 | #1

News

The New Multiple-Feature Anne Geddes iPhone App is a Portal to the World of the Internationally Acclaimed Photographer
  –  
Punchkick Interactive®, a Chicago-based mobile marketing company, today announced its collaboration with the Geddes Group (Sydney) on a free iPhone app rich in features that allow fans of globally [ MORE ]
Punchkick Interactive to Launch Mobile-Web Initiative for ASPCA
  –  
Punchkick Interactive®, a Chicago-based mobile marketing company, today announced the signing of its newest client, the ASPCA® (The American Society for the Prevention of Cruelty to Animals®), the [ MORE ]
Punchkick Interactive
1945 South Halsted Street, Suite 402
Chicago, Illinois 60608

Phone (800) 549-4104
info@punchkickinteractive.com