April 9th, 2007 by Ryan Unger | 9,495 VIEWS | 4 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
  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.

  4. Vadner
    March 22nd, 2010 at 08:06 | #4

    Your comments are pretty informed and helpful. Have you considered writing professionally? Like a periodical or something?

    The Information Broker
    Income for Life.

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

News

Punchkick Interactive and Keathley Advertising Team Up to Create GE Mood Lighting Cam iPhone App
  –  
Punchkick Interactive, a Chicago-based mobile marketing company, and Keathley Advertising, an Akron-based advertising agency, today announced the launch of the GE Mood Lighting Cam iPhone app. The new iPhone [ MORE ]
Punchkick Interactive Appoints Director of Business Development and Mobile Strategy
  –  
Punchkick Interactive, America's first design firm to focus exclusively on full-service mobile marketing, is pleased to announce the addition of Dirk Rients as Director of Business Development and Mobile [ MORE ]
Punchkick Interactive
10 West Hubbard Street, Suite 2D
Chicago, Illinois 60654 USA

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

punch kick interactive