PNG Optimization

Introduction

Advance summary

This article is a short guide to optimizing PNG images. PNGs are typically used for screenshots of computer programs and other images in which the contrast must be maintained between adjacent pixels, often because of small sized text. The target deployment platform for PNGs is usually the Internet, so it's important to take the file-size aspect of images into account. Using this guide you will be able to get the filesize of your images way down.

Use indexed color space

Let's start with some small talk about your PNG image's color space. PNGs can use the full color range available in your drawing software, which will make sure all colors are vividly expressed and rendered on the target computer, but it has one disadvantage: it doesn't compress well. Moving to an indexed color space using few(er) colors will save a lot of space.

There's not really a rule of thumb to use for the number of colors in the index or palette, I use values ranging from 32 to 64 for most screenshots. The most notable problem on Windows will be the title bar fade, on Mac OS X you'll almost always lose the gradients on the buttons which forces you to use JPEG compression instead of PNG. Linux screenshots using KDE don't ever cause me headaches, the Plastik style and window decoration still look good using a reduced palette.

To automate the conversion from true color to indexed color space, without dithering, use the following ImageMagick convert command:

convert -quality 0 +dither -colors 256 infile.png out.png

Required software

The tools you need for the optimization are, in random order:

Compile and install these tools according to your taste, then head on to the next section for the combined script.

The script, for single files

Tying together all applications mentioned above, you could end up with this script, don't forget to `chmod +x':

#!/bin/bash

# create backup copy
cp $1 $1.orig

# shrink the PNG using three tools
pngrewrite $1 $1
optipng -zc1-9 -zm1-9 -zs0-2 -f0-5 $1
advpng -z4 $1

# display file sizes of the original and compressed image
ls -sla $1*

Once saved in your path, you can now shrink PNGs from the commandline using:

pngoptim.sh filename.png

On runtime, this will create a backup file called filename.png.orig and then shrink the PNG in-place. After compressing, the script displays the filesize of both the original and compressed PNG.

The script, for multiple files

Suppose you're in my position sometimes and you need to convert a directory full of PNG screenshots. You obviously want to convert them all to indexed color space and compress them to the smallest filesize. I wrote this little script to automate this whole process on my Linux workstation:

#!/bin/bash
#
# This script converts all PNG files in the current directory to
# 256-color indexed using maximum compression.
#
# Written by Frank Schoep
#

# get file list and loop through all files
FILES=`ls -1S *.png`
for FILE in $FILES
do
cp $FILE $FILE.orig
convert -quality 0 +dither -colors 256 $FILE $FILE

pngrewrite $FILE $FILE
optipng -zc1-9 -zm1-9 -zs0-2 -f0-5 $FILE
advpng -z4 $FILE
done

About this article

This article was written on the 1st of August 2005. I added the convert bit and the multiple file script on the 9th of September 2005.

External Links

The following links to related external sites are available:

  • AdvanceCOMP
    Homepage of the PNG recompression tool AdvanceCOMP.

  • Indopedia PNG Guide
    Indopedia tutorial about the recompression of PNG images.

  • OptiPNG
    Homepage of the PNG compression tool OptiPNG.

  • PNGRewrite
    The homepage of the PNG shrinking tool PNGRewrite.

Back to top