Lenny Domnitser’s
domnit.org

⇙ Jump to content

explicit

This is a static archive of the domnit.org blog,
which Lenny Domnitser wrote between 2006 and 2009.

How to Make PNG Images Small for the Web

First, make sure you want PNG. Rule of thumb: JPEG for photos, PNG for graphics.

2 things I do:

  1. Shrink the palette. PNGs usually have room for 224 colors, or 232 including a transparency/opacity channel. If you’re using 256 or fewer colors, you can save your image with an indexed palette, which uses 1 byte for each pixel, before compression. In the free graphics program GIMP, you do this in Image → Mode → Indexed… → Generate optimum palette. Photoshop can do it too, and I’m sure any other good graphics program can. Before you go off saving in 1-bit mode, keep in mind that with antialiasing, there may be more colors than you can count. Savings are in the 75% range.

  2. Compress more. To not be painfully slow, graphics programs use some heuristics to get good, but not totally optimized compression on PNGs. Once you’ve saved your final PNG, and can spare the minute or so, you can use programs like pngcrush or optipng to try to increase compression. I do optipng -o7 mypicture.png for maximum compression. With files saved in the GIMP, I usually get 0-2% off, but I’ve gotten 20% or more off for other PNGs.

That’s it, 2 steps to prep PNGs.