demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Fireworks PNG 2up

Slash PNG File Sizes

tools / photoshop

Estimated reading time: 2 minutes, 49 seconds

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 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.

Fireworks PNG Optimisation settingsClick 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.