Compressing Images for the Web - GIF Compression

February 4, 2000 - For a long time, the only type of image file format web authors could use as an inline image was the GIF file format. Created by Compuserve as a way to download and display images in their online service, the gif file format has some strengths and some weaknesses. Luckily, we can use other file formats now that take over where gif breaks down.

In last week’s article, we looked at using the JPEG file format to compress photographic quality images. Gif’s strength lies in compressing line art, such as logos and images with large areas of solid color.

Let’s look at some of the aspects of GIF files.

• GIFs are limited to using 256 colors. This can either hinder or help your image quality. If you have an image with less than 256 colors, you will see no degradation of quality, and since you are not including color information for unused colors, it is possible to get smaller file sizes. If, however, you have an image with lots of subtle variation in areas of color, such as gradients or natural chiaroscuro, you can see drastic image quality degradation, and a file size that is larger than you might expect. In the second case, it would be better to use the jpeg format. You will get little loss of quality and a smaller file size.
• GIFs compress large areas of color extremely well without the "artifacts" that JPEG compression leaves behind.
• It is very important to remember to NEVER resize a gif, either in Photoshop, or by using the image size attributes in HTML. You should only resize the Photoshop version of the image, or quality will degrade rapidly. Images that have been resized using image attirbutes not only look bad, the file size is not affected. The original file size was 8K, for a 200 x 220 image.

Size reduced before indexing. 7K	Size Reduced after indexing. 5K

Image resized using the width and height attributes. 8K This doesn't decrease the file size at all, and creates a jaggy image.

Here is an example of a line-art image compressed using JPEG and GIF. Notice the difference in both quality and file size.

GIF 7K	JPEG - around 16K

Again, notice the difference in quality and file size. The JPEG doesn't look that bad, but the files size is more than twice the size of the GIF.

Here is an example of a drawing compressed using JPEG and GIF.

GIF - 82K	JPEG - 44K

As you can see, the gif image has a bit more detail, and the jpeg image is slightly blurred. Sometimes you can get a smaller file size using gif on a drawing, but sometimes you can't. It all depends on the detail, amount of colors, and the size of the drawing (the clips shown above are actually reversed file-size-wise compared to the full-size versions, the jpeg is at 36K and the gif at 20K). Different books site different results on this, and my tests so far seem to be following a path of their own.

Now that you understand the differences between the gif and jpeg file types, you should be able to experiment to find the best quality and file-size relationship for your images.

Jennifer Nieland is the lab coordinator for the College of the Design student computer labs.