The Mysteries GIF Compression

The Compuserve Graphic Interchange Format (GIF) includes a rather strong compression routine that allows you to pack a high "bang per byte" into your graphics, but only if you understand the limitations of the format and design your graphics to exploit the maximum compression factor. When designing graphics for the Internet, you want complete mastery of the compression available to you: the smaller the graphic, the faster the Web page.

While you could pour through the technical specifications for GIF87a and GIF89a through your hearts content, it still provides few details on how to creatively plan for the effects of the controversial LZH compression routine. Of course, none of these compressed design techniques work when dealing with newer formats such as the Portable Network Graphics (PNG) Format or the JPEG Format. In the rest of this article, I'll show examples of the effects of horizontal repetition, vertical repetition, dithering colors, color palatte optimization, and interlacing. All of the example graphics used in this tutorial are 72 pixels by 72 pixels, allowing us to compare the file size of different techniques.

Horizontal Repetition

Examples:
GIF compression works on a "horizontal repetition" basis, so that a straight line (left to right) of the same color compresses to the smallest possible size. In example 1, 72x72 is reduced to the smallest data size possible (912 bytes.) As we increase the vertical complexity (increasing the number of different horizontal bars), the data size increases only slightly - only 2% more data in example 3 then in example 2. This is one important way that you can maximize the compression of your graphics ... try to increase the amount horizontal repetition.

Vertical Repetition

Examples:
Despite the fact that horizontal repetition increases the compression of a GIF graphic, vertical repetition does not have a strong effect on compression. Since GIF treats graphics as a grid and stores the data in horizontal rows, the adjacent vertical pixels of a graphic are stored in very different places of the file. Example 5 is just example 2 rotated 90 degrees, but it is 8.1% larger. It only gets worse the more complex the image is - example 6 is 21.5% larger than example 3 and example 7 is 27.5% larger than example 4. The lesson here? Vertical repetition is not an effective technique to maximize compression.

Dithering

Examples:
These two examples were both created in Photoshop with Kai's Powertools then converted from 24-bit color to 256 color mode. Example 8 was converted with no dither (meaning each pixel was changed to the nearest grey in the system color palatte), while example 9 was converted with dither (meaning colors between system colors were approximated by alternating colors.) Using dither increased the size of the graphic by 9.8% - depending upon the effect on the appearance, this may be an acceptable increase. As a general rule, dithering decreases the amount of compression applied to a GIF be decreasing the amount of horizontal repetition.

Color Palatte Optimization

Examples:
The smaller the number of colors in the palatte of the GIF, the smaller the size of the graphic (by reducing the size of the palatte data and by increasing the possibility of horizontal repetition.) Example 10 has a color palatte remapped to match the colors used in the graphic while example 11 has a color palatte remapped to include up to 256 colors that are used in the graphic. Specifically, in Photoshop the former example was saved as "Exact" while the latter was saved as "8-bit Adaptive". You'll notice that example 10 is both a smoother graphic and smaller in size (example 11 is 2.6% larger.) Example 12 was saved in the normal system palatte, dithered to approximate the colors used in the graphic, producing a rougher look and a 74.3% filesize increase over example 10.

While it might seem that this suggests saving all your GIFs with custom color palattes, there is an important compatibility issue to raise. If the machine viewing your graphic has only 256 colors available (or even worse, only 16 colors), remapping the color palatte will change the colors of everything else on the screen, including other graphics that might have different color palattes. Coordinating the graphics on a page to all use the same color palatte (either the system palatte or a single custom palatte) would help insure compatibility.

Interlacing

Examples:
Interlacing is supported by the GIF89a format, allowing the graphic information to be stored in a multi-pass format (still saving a horizontal row at a time, but no longer storing them in successive order.) This produces the pleasant "build in" effect (when the browser is set to display graphics while loading.) Sometimes, interlacing can actually make a GIF slightly smaller (such as example 13, an interlaced version of example 9 that is actually 0.14% smaller), but usually interlacing causes the file to be slightly larger (such as example 14, an interlaced version of example 3 which is 1.8% larger.)

Summary

Start taking a closer look at the GIF graphics you see on web pages, and compare the physical size of the graphic to the data size of the graphic. You'll find that those with the greatest "bang-per-byte" maximize the effect of GIF's compression by If you find other creative tidbits or ideas regarding GIF graphics, feel free to email me at bclark@radzone.org.


The Radiation Zone is copyright © 1995 by its creators. All rights are reserved.