small PNG images with GIMP

Tue, 02 Jun 2009 15:15:52 -0700
noblog

These are my steps for processing PNG images for web. Suggestions welcome.

Import (at high resolution if it's an option.)

Crop to just the needed size, eliminating any border, which is what CSS is for. Save as GIMP XCF Image.

Image→Scale Image to the correct final size. Leave the width/height "link" button turned on to keep the ratio right.

Zoom in and use the Color Picker and Pencil tools to clean up any weird-looking stray pixels. Stray pixels also compress badly. Zoom back out to make sure it still looks fine at 100%.

Under Image→Mode, select "Indexed", "generate optimum palette", and "Color dithering: Positioned." Try with a few colors, undo and use more if it looks crappy.

Save as PNG, with compression at 9, options off. (unless it comes out bigger than 8KB or so, in which case turn on interlacing)