[ Ahuka Home Page | HTML Level 1 Main Page | 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
Format: GIF
Colors=256
File size=1203 bytes

Vertical 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
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.

Next: Image Optimization: JPEG

Back: Images on the Web