Tuesday, February 26, 2008

PNG Me

Anyone who uses Flash on a regular basis, understands the awesomeness that is Photoshop's PNG24 (basically, what the rest of the world knows as PNG32, since the last 8 bits is for the alpha channel). Basically, it's a lossless format, millions of colors, with an alpha channel. The alpha channel is key in Flash, it allows you to bring in objects with shadows, glows or just have a nice smooth cutout edge. And anyone who uses Flash on a regular basis should also know that they should set their compression (per object) in Flash to "Lossless (PNG/GIF)". JPEG compression adds too much artifacting for my taste, although with my current project having a 500kb background image, I might just test those waters later.

What a lot of people don't know, is about PNG8 with an alpha channel. Photoshop gives you basically one format with PNG8. It's basically a GIF. 256 colors and a matted transparent background. Meaning, you have to know what color you're placing this on, or if you turn off matting, know that your edges are going to be very jagged. This is where I open up Fireworks.

A trick I've learned recently that I don't see around very often, is bringing your PNG24's into Fireworks and re-exporting them as PNG8 with an alpha channel. It doesn't work with everything, given that you're still limited to 256 colors, but with the right image and the right dithering selections, you can take an image that was 400kb, and get it down to 80kb. And now your shadow is made with an alpha channel, not a fake transparent matte.

Given that I'm a designer and not an engineer, I'm not going to go into how or why this works, the history behind it, what a "bit" is, etc. All I know is that I cut 600kb off my published SWF file last night, simply by reimporting some of my 24 bit PNGs in 8 bit with an alpha channel. Why Photoshop doesn't support this, especially now that Fireworks is owned by Adobe, is beyond me.

No comments: