Image Optimization: GIF

In the article Images
on the Web
, we looked at knowing when to use a GIF image and when to
use a JPEG image. Making the correct choice is always the first step in optimizing
the images on your Web site. But you also can do more to optimize the images
after making the right choice. The methods are a little different in each case
because of the differences in how each format handles images and compression.

GIF Format

GIF stands for Graphics Interchange Format, and was introduced
by the CompuServe online service in 1987 as a way for CompuServe members to
share images with each other. GIF images use a reduced color palette and LZW
compression to reduce the file size. When you scan an image, like a photograph,
the scanned image is usually stored as “24-bit True Color”. Each of
the three primary colors, red, green, and blue, is given an 8-bit byte to record
the intensity of that color for each pixel. This lets you display 16 million
possible colors (2^8 times 2^8 times 2^8). To reduce the amount of data (and
hence to reduce the file size), GIF allows a maximum of 8-bits total for all
three of the primary colors, or a total of 256 colors. If you take a photograph
that is in JPEG, TIFF, BMP, or some other format that allows thousands or millions
of colors, and convert it to GIF, you must throw away
a large amount of the fine detail in the colors since you need to get it down
to 256 colors maximum. It is important to understand this, since you will often
hear GIF referred to as a “lossless” format. What that really means
is that once you have converted the image to GIF format, and decided on the
number of colors you will use, the LZW compression introduces no additional
losses.

GIF images have a table in the header of the image file that defines
the colors that will be used for the image. When creating Web images, it is
a good idea to stick with the Web-safe
colors
for your image to avoid the chance that dithering or other image
problems will occur. By using the header, each color can be completely defined
using 24-bits of description, but then assigned an 8-bit code that is actually
used in the image. Furthermore, compression can be achieved when there are large
blocks of a solid color, since the code can say things like “283 pixels
of color #143”, instead of specifying each pixel individually. That is
what the LZW compression does. It is a file compression method similar to what
is used in ZIP files. The way the GIF format works, the image is scanned in
rows, which produces an interesting effect.

Horizontal stripes imageHorizontal
Stripes
Format: GIF
Colors=256
File size=1203 bytes

Vertical stripes imageVertical
Stripes
Format:GIF
Colors=256
File size=2083 bytes

This is actually the same image, just rotated 90 degrees by the graphics program,
but you can see the effect on the file size. The vertical stripe image is nearly
75% larger!

GIF Optimization

The first thing you can do to optimize your GIF image is to reduce the number
of colors. I saved the two images above using a palette of 256 colors. That
means that the header section of the file has to maintain information on 256
different colors. But in fact I only used two colors, so I could reduce the
file size even further by saving it as a two-color image. Any good graphics
program should let you specify the number of colors for a GIF image. Here is
the same image saved as a two-color image:

Horizontal stripes, optimizedHorizontal
stripes
Format: GIF
Colors=2
File size=364 bytes

Rule #1: Always save GIF images with the number of of colors
just equal to the number of colors in your image.

When you have larger numbers of colors, you need to be careful about reducing
the number of colors in the image too far. Here is
a simple image of a single die:

Single die, 256 colors Single Die
Format: GIF
Colors=256
File size=3324 bytes
Single die, 128 colors Single Die
Format: GIF
Colors=128
File size=3056 bytes
Single die, 64 colors Single Die
Format: GIF
Colors=64
File size=2879 bytes
Single die, 32 colors Single Die
Format: GIF
Colors=32
File size=2779 bytes
Single die, 16 colors Single Die
Format: GIF
Colors=16
File size=1764 bytes
Single die, 8 colors Single Die
Format: GIF
Colors=8
File size=1542 bytes
Single die, 4 colors Single Die
Format: GIF
Colors=4
File size=1192 bytes
Single die, 2 colors Single Die
Format: GIF
Colors=2
File size=982 bytes

In this case, we could get down as low as 16 colors without any noticeable
difference between the 16 color image and the 256 color image, while achieving
close to 50% reduction in the file size. But the next step made a big difference
in the quality of the image. The edges are more jagged on the die, the image
is beginning to show severe dithering on the die itself, etc. And reducing the
colors even further caused even more reduction in image quality. As we said
before, when someone says that GIFs are “lossless”, they mean that
after you have reduced the number of colors, the LZW
compression will not cause any further losses. In
optimizing GIF images, you need to pay attention to both file size and image
quality, and make the best tradeoff between them.

Rule 2: Image optimization means choosing the optimal combination
of small file size and image quality.