Servage Magazine

When optimizing GIF images, it is useful to keep in mind that GIF compression works by condensing bands of repetitive pixel colors. Many optimization strategies work by creating more areas of solid color for the compression scheme to sink its teeth into.

The general methods for keeping GIF file sizes in check are:

• Reducing the number of colors (the bit-depth) of the image

• Reducing dithering in the image

• Applying a “lossy” filter

• Designing with flat colors

Reducing the number of colors

The most effective way to reduce the size of a GIF file, and therefore the first stop in your optimization journey, is to reduce the number of colors in the image.

Although GIFs can contain up to 256 colors, there’s no rule that says they have to. In fact, by reducing the number of colors (the bit-depth), you can significantly reduce the file size of an image. One reason for this is that files with lower bit depths contain less data. Another byproduct of the color reduction is that more areas of flat color are created by combining similar, abutting pixel colors. More flat color areas mean more efficient compression.

Nearly all graphics programs that allow you to save or export to GIF format will also allow you to specify the number of colors or bit depth. In Photoshop and Fireworks, the color count and the color table are revealed in the settings panel. Click on the Colors pop-up menu to select from a standard list of numbers of colors. Some tools give you a list of bit-depths instead.

You’ll be surprised to find how many images look perfectly fine with only 32-pixel colors (5-bit). That is usually my starting point for color reduction, and I go higher only if necessary. Some image types fare better than others with reduced color palettes, but as a general rule, the fewer the colors, the smaller the file.

The real size savings kick in when there are large areas of flat color. Keep in mind that even if your image has 8-pixel colors, if it has a lot of blends, gradients, and detail, you won’t see the kind of file size savings you might expect with such a severe color reduction.

Online Image Optimizers

If you don’t have Fireworks or Photoshop, you can use one of the free online image optimizing tools listed here. They do not give you control over settings that you find in web image tools, but they are effective and certainly better than no optimization at all.

Smush.it (www.smushit.com).

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a lossless tool, which means it optimizes images without changing their look or visual quality. I’ve personally found that it finds a way to slightly reduce the file size of images. I’ve already optimized myself in Photoshop. This is a great resource.

Dynamic Drive Online Image Optimizer (tools.dynamicdrive.com/imageoptimizer).

This is another online tool that takes your files and returns optimized versions based on more aggressive optimization settings. It is not a lossless tool, so you need to choose from the optimized images to find the one that maintains acceptable quality.