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.
Stripes
Format: GIF
Colors=256
File size=1203 bytes
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:
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 Format: GIF Colors=256 File size=3324 bytes |
 |
Single Die Format: GIF Colors=128 File size=3056 bytes |
 |
Single Die Format: GIF Colors=64 File size=2879 bytes |
 |
Single Die Format: GIF Colors=32 File size=2779 bytes |
 |
Single Die Format: GIF Colors=16 File size=1764 bytes |
 |
Single Die Format: GIF Colors=8 File size=1542 bytes |
 |
Single Die Format: GIF Colors=4 File size=1192 bytes |
 |
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.
