If you look at the clouds PNG image we made in the last exercise, you may be surprised: you’ll likely find that its file size is somewhere north of 45K. When we are trying to make pages that are under 60k – including images, content and code – that is too high.

You’ll also recall that PhotoShop insisted that we save the image in PNG-24 format in order to preserve the alpha mask. That is the first lie that PhotoShop told you; the image is actually a PNG-32: 24 bits for color and 8 levels of grey for the alpha mask.

But that’s ridiculous, you might respond. I’m actually only using one color – white – in the entire image. Everything else is the alpha mask. Surely I’m wasting a lot of space trying to make room for 16 million colours that I’m not actually using?

Yes, you are.

So if I’m only using one actual color, I should be able to cut the color depth down to 8 bits or less and save some space, right?

Not in PhotoShop: it only recognizes two formats: PNG-8 with an optional single transparent color, or PNG-24, with an optional alpha mask.

Aaaargh!

Indeed.

Thankfully, there is a solution: Fireworks.

Fireworks has always been the red-headed stepchild of the Adobe/Macromedia merger. A weird mélange of ImageReady, Flash, and Illustrator, it never really found a home with the web design community, who for the most part regarded it as quirky and unappealing. However, the application has really great PNG compression routines: even PNGs saved from PhotoShop and then imported and re-saved by Fireworks can yield significant savings in file size… but none more so than the technique I am about to show you.

Ideally, you’ll use the original PSD file we developed in the last exercise for this, but any 32-bit PNG image will do. As before, screenshots are taken from the Mac Adobe CS5 suite.

Start up Adobe Fireworks and open the image you wish to work on. You’ll see that the central window of the main screen very much resembles the familiar Save For Web window in PhotoShop. Go into Two Up mode as you would in the latter application.

Click the Optimize tab in Fireworks. You’ll probably find it in the top right corner of your screen.

If you’re using the PNG image we saved from PhotoShop, the Optimize tab currently (and correctly) says that the image is PNG-32.

Here is the trick: Change the format in the Optimize tab to PNG-8. In the transparency settings drop-down, change the default selection of No Transparency to Alpha Transparency. Leave the other settings alone.

Viola! You’ve saved at least half the file size of the original PNG-32 image.

Important final step: do not use Save As in Fireworks to export your PNG. That will save the original image. Instead, use File / Export. Choose a new filename for the PNG image, but leave the other settings unchanged.

You can use this technique to dramatically cut the file size of all 24-bit alpha-masked PNGs on your site; even if they do not have transparency applied, you will find that re-saving your PNG images using Fireworks will yield significant savings in file size.

Photograph by theaucitron, used under a Creative Commons Attribution-ShareAlike 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.