ZEBRA ARMY – HIS

Reducing the file size of PNG-24 

I’m currently developing the new version of Zebra Army’s website and the design that Nicole and I have come up with includes many complex images that require transparency.

With transparency, you have three options: GIF, PNG-8 or PNG-24. Usually, you’ll want to use PNG-24, because the transparencies include an alpha channel for semi-transparent colours. Without this, your image will have a jagged look around the edges of your image’s subject matter. Of course, there are ways to get around this using a matte when saving your PNG-8 or GIF. If you’re interested in learning that method, Phil Coffman over at Method & Craft has created an excellent tutorial on the matter.

But, sometimes a matte just can’t be used. For instance, you may have a situation where you have a semi-transparent shadow or glow and if you try to use a matte, you’ll just end up with a big blob of a mess because there’s no alpha channel. In this case, you’re only option is use PNG-24.

Thankfully, there is a way to reduce the file size significantly if you’re forced to use PNG-24. Before saving your file using Photoshop’s “Save for Web & Devices…” functionality, flatten all the layers that will make up your final image with transparency and crop accordingly. Then, with that new layer selected, go to Images > Adjustments > Posterize. This tool allows you to set the number of tonal values for each channel of your image.For my images, I’ve been using a value of about 30. I find this value retains the quality of the image despite the reduction in total image colour. Once you’ve found a value you’re happy with, go ahead and use “Save for Web & Devices…”. You’ll find that your file size has been significantly reduced. Here’s a comparison of two PNG-24 images, one using Posterize, and one without:

The image on the left does not utilize Posterize. The one on the right uses a value of 40. The file size for the first image is about 47.5 KB and the size of the second image is about 29.4 KB. That’s a difference of 18.1 KB (or a reduction of about 38%). That’s pretty good if you consider that the two images look virtually identical. You can see how beneficial this can be if you’re using many transparent images in your design or if you have to save a very large image. 

There are some limitations to the this method. If you have a lot of obvious gradients in your image, an aggressive use of Posterize will create some serious “banding”. You can still use Posterize in this case, but you’ll have to use a larger value and your file size will be larger.

Of course, whether you use the Posterize method, Phil Coffman’s method, or even if you don’t need transparencies and just save as JPEG, you should still optimize your images further. HTML5 boilerplate (which you should be using for all your development projects) provides a “build” script that not only optimizes your images, but your HTML, CSS and JavaScript files as well.

It is a bit tedious to have to go through this extra step when slicing your designs, especially if you have many images to create. But with the Zebra Army design I’ve been slicing, the process has been of great value. I hope you’ll find this method useful and if you have any another way of optimizing PNGs, leave me a comment.