Last week I put together an animated infographic that required some flexibility. Alpha transparency was essential, but the number of images I needed to pull it off meant that my typical way of creating PNGs wasn’t going to work.
Let’s be honest; Photoshop is absolutely terrible at saving transparent PNGs for web use. Your choices are between an 8-bit with 1-bit transparency (better than a GIF in terms of file size, but no better in terms of transparency options) or a huge 32-bit PNG with alpha transparency. There’s no middle ground. You can run the resulting files through various PNG reduction utilities (PNGOUT, Pngcrush, or my personal favourite PngThing) but when the savings are a few hundred bytes off an 80KB file, the returns are slim.
I’m not in the practice of using Fireworks, so those of you who do can start gloating now. But as I thought about the problem a bit, I remembered that Fireworks has a few more options. Specifically, I remembered that you can save out 8-bit PNGs with alpha transparency, which seemed like the right mix.
And the resulting lower byte counts were respectable: 95KB › 11.7KB. 28KB › 4.6KB. 38KB › 8.9KB. 36KB › 7.1KB. 45KB › 7.3KB. 28KB › 4.7KB. etc.
When I casually mentioned the smaller files I was able to produce on Twitter I was a little surprised by the response. Seems that a lot of people don’t know about this, so a quick write-up feels like it’s in order. Here’s my process.
1. Save out a full 32bit PNG from Photoshop
Any file format with transparency will do really. You could probably even just open the PSD. But I start here.
2. Load it into Fireworks.
3. In the Optimize palette, adjust the settings to PNG 8.
You’ll probably want to go further and find a colour level less than 256 that works with your image for more savings, but this is the starting point anyway.
File > Export, then pick a spot for your smaller file.
And that’s basically it. Clearly this only works for images that would normally do well with lower colour levels, you won’t be using this for photographic elements any time soon. But for those that work, you can throw the result through one of the previously-mentioned optimization tools to shave off a few more bytes too.