The CompuServe Information Service popularized the Graphic Interchange Format in the 1980s as an efficient means to transmit images across data networks. In the early 1990s the original designers of the World Wide Web adopted GIF for its efficiency and widespread familiarity. The overwhelming majority of images on the Web are now in GIF format, and virtually all Web browsers that support graphics can display GIF files. GIF files incorporate a compression scheme to keep file sizes at a minimum, and they are limited to 8-bit (256 or fewer colors) color palettes. Several slight variants of the basic GIF format add support for transparent color and for the interlaced GIF graphics popularized by Netscape Navigator.
The GIF file format uses a relatively basic form of file compression (Lempel Zev Welch, or LZW) that squeezes out inefficiencies in the data storage without losing data or distorting the image. The LZW compression scheme is best at compressing images with large fields of homogeneous color. It is less efficient at compressing complicated pictures with many colors and complex textures:
You can take advantage of the characteristics of LZW compression to improve its efficiency and thereby reduce the size of your GIF graphics. The strategy is to reduce the number of colors in your GIF image to the minimum number necessary and to remove stray colors that are not required to represent the image. A GIF graphic cannot have more than 256 colors but it can have fewer colors, down to the minimum of two (black and white). Images with fewer colors will compress more efficiently under LZW compression.
The conventional (non-interlaced) GIF graphic downloads one line of pixels at a time from top to bottom, and browsers display each line of the image as it gradually builds on the screen. In interlaced GIF files the image data is stored in a format that allows browsers that support interlaced GIFs to begin to build a low-resolution version of the full-sized GIF picture on the screen while the file is downloading. Many people find the "fuzzy-to-sharp" animated effect of interlacing visually appealing, but the most important benefit of interlacing is that it gives the reader a preview of the full area of the picture while the picture downloads into the browser.
Interlacing is best for larger GIF images such as illustrations and photographs. Interlacing is a poor choice for small GIF graphics such as navigation bars, buttons, and icons. These small graphics will load onto the screen much faster if you keep them in conventional (non-interlaced) GIF format. In general, interlacing has no significant effect on the file size of GIF graphics.
The GIF format allows you to pick colors from the color lookup table of the GIF to be transparent. You can use image-editing software like Photoshop (and many shareware utility programs) to select colors in a GIF graphic's color palette to become transparent. Usually the color selected for transparency is the background color in the graphic.
Unfortunately, the transparent property is not selective; if you make a color transparent, every pixel in the graphic that shares that particular color will become also transparent. This can cause unexpected results:
Adding transparency to a GIF graphic can produce disappointing results when the image contains antialiasing (see Typography, Antialiased type). If you use an image-editing program like Photoshop to create a shape set against a background color, Photoshop will smooth the shape by inserting pixels of intermediate colors along the shape's boundary edges. This smoothing, or antialiasing, improves the look of screen images by softening jagged edges. Trouble starts when you set the background color to transparent and then use the image on a Web page against a different background color. The antialiased pixels in the image will still correspond to the original background color. In the example below, when we change the background color from white to transparent (letting the gray Web page background show through), an ugly white halo appears around the graphic:
Transparency works best with simple diagrammatic graphics, but it can also work with complex shapes. The GIF graphic of the watercolor painting below (from the second edition of the online version of this guide) can run across the scan column and into the white background because we made the white background of the sparrow painting transparent. We avoided potential problems with a light halo around the leaves in the gray scan column area by retouching the painting to remove the white antialiased "halo" from the leaf edges:
The GIF file format allows you to combine multiple GIF images into a single file to create animation. There are a number of drawbacks to this functionality, however. The GIF format applies no compression between frames, so if you are combining four 30-kilobyte images into a single animation, you will end up with a 120 KB GIF file to push through the wire. The load is lightened somewhat by the fact that animated GIF files stream to the user, so the frames load and play even before the entire file is downloaded. Another drawback of GIF animations is that they are an imposition and a potential distraction. Because there are no interface controls for this file format, GIF animations play whether you want them to or not. And if looping is enabled, the animations play again and again and again. GIF animations are rarely used in a meaningful way, and generally distract readers from the main content of the page. If you are using GIF animation as content — to illustrate a concept or technique where animation is really required — use the technique sparingly.