Smaller PNG pictures: how to make them and save 7-45% compared to GIF.

The PNG image format to replace GIF is now well supported and generally produces smaller file sizes than all but the tiniest GIFs. Next question is, how to make your PNG files as small as possible, so your pages load as fast as they can? I tested a couple of tools with one of my web pages. The page started out with 18 PNG images totaling 178k (183,031 bytes), created with ThumbsPlus.

The gains are less impressive with the 15 small and highly hand tweaked GIFs used on the home page of the CompuServe's Comedy Central Forum but well worth having for a speed-sensitive page:

All of these tools and choices are completely lossless, unlike JPEG compression. Photoshop creates particularly large PNG files, so you're likely to benefit from using these tools if you use it.

This is good but you should be aware that color matching between HTML, CSS and PNG colors has enough glitches to make the best advice to be avoid GIF when you're trying to exactly match colors between them. You might have this issue if you're trying to make a logo smoothly bend into a page background. It's not a problem for normal use of spot images, either opaque or transparent. For 1x1 transparent GIFs the smallest size is about 35 bytes and PNG has a minimum size a bit larger than that, so GIF remains best for this job. For family photographs and similar full color pictures, JPEG is best, unless you need to avoid losing any quality. For animated pictures, stick with animated GIFs.

How to do it yourself.

Optipng, very slow but smallest files and fastest downloads

It took many minutes to run but the smallest result was obtained using Optipng. This tries 1026 different filter and compression possibilities for every image. To do this, start a command prompt in the directory containing a copy of the images and type: optipng -zc1-9 -zm1-9 -zs0-2 -f0-5 *.png

Optipng, very fast, very good

Next best choice was the basic optipng. This is very fast. It's a good choice when you're in a hurry and want a not quite perfect result. To do this, start a command prompt in the directory containing a copy of the images and type: optipng *.png

Pngcrush, slow

A well known optimization tool is pngcrush. The best Pngcrush result took many minutes to run and tried 114 variations. To do this, start a command prompt in the directory containing the images and type: pngcrush -d outdir -brute *.png The compressed pictures will be in a new child directory called outdir.

Pngcrush, fast, still better than ThumbsPlus

Where to get the tools

Optipng 0.4.1 can be obtained from http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ . Pngcrush can be obtained from http://pmt.sourceforge.net/pngcrush/ .