Blog

Finally a use for Fireworks: alpha transparent PNG 8

This is not breaking news, but I’m still surprised that so many web designers don’t know it: Fireworks’ 8-bit PNGs support alpha transparency.

If you’re like me, your install of Fireworks from the CS Suite doesn’t do much more than sit around in your Applications folder hogging memory. Once a year, I hear on a podcast or blog that a designer I admire swears by Fireworks versus Photoshop; so I fire it up and give it the old college try, but it never takes. Maybe I’ve been using Photoshop too long, but to me, Fireworks is the blaster to Photoshop’s lightsaber: Fireworks’ layer styles don’t look as refined to me as Photoshop’s, the type tools are really weak (not that Photoshop’s are a whole lot better) and the multiple “glossy button” presets give off kind of a cheesy vibe from the get go. Not to mention the fact that everything is in the wrong place. So I tend to try using it for an hour or two, get frustrated, and give up. Definitely more my fault than Fireworks’, but there ya go.

However, Fireworks now more than justifies its place on my hard drive because of its wonderful, efficient alpha-transparent 8-bit PNGs. In fact, it made this site’s design possible from a performance standpoint. Ever since alpha transparent PNGs went mainstream with IE7, arriving at a site, starting to read the content, then being shocked when a massive background PNG suddenly finishes loading has become a daily annoyance. I have no doubt that many of these images were sliced up in Photoshop and Saved for Web using its PNG-24 preset. This creates beautiful, fully alpha transparent, but unfortunately huge transparent PNGs. What Fireworks offers with its 8-bit alpha transparent PNGs is slightly lower quality, but at file size savings of (in my experience) around 75% compared with Photoshop.

See for yourself

Here’s the same lily pad PSD from this site design, exported with Photoshop’s PNG-24 preset and Fireworks’ PNG 8. The Photoshop PNG weighs in at 230KB, while the Fireworks export is only 50KB.

Screen shot of Photoshop PNG-24 and Fireworks PNG 8

Photoshop PNG-24 (left, 230KB) and Fireworks PNG 8 (right, 50KB)

As you can see, there is a degradation in quality. The Fireworks PNG 8 weighs so much less because, like a GIF, PNG 8 works from an indexed color palette: You get an index of X colors (commonly 32, 64, 128, and so on), and that’s it. The alpha transparent PNG-24 from Photoshop (which is the same as a Fireworks PNG 32.. don’t get me started), on the other hand, supports full-on alpha transparency. In almost every case, however, I’ve found that the slightly more jagged edges and lower fine detail of PNG 8 are more than compensated for by the increase in load time from a much lighter image. If the image is being placed over a light background especially, the difference in quality is really negligible.

Don’t settle for the preset

Screen shot of Fireworks Export Menu

To make Fireworks cough up an alpha transparent PNG 8, simply select “Alpha Transparency” from the transparency dropdown in the Export menu in the PNG 8 preset. But don’t stop there: Fireworks gives you options for color palettes and dithering. You’ll have best luck with the Adaptive and Web Adaptive palettes; although if your image can stand it quality wise, you can shave a few precious KB off by slumming it in Web 216. Dithering will smooth the appearance of more complex graphics, but at the same time it increases file size. It’s possible I need more hobbies, but since discovering PNG 8 in Fireworks, playing the whole quality vs. file size tradeoff game when exporting an image has become something I kinda enjoy.

So if this is news to you — as it was to me only a few months ago — uh, fire up Fireworks and give PNG 8 a whirl. You don’t have to be a used car dealer to get excited about savings like these.

Nerdy Web Stuff, Photoshop

,

Comment on this entry

* = required field

HTML nerds can use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Browse by entry

Browse by topic

Browse by date