When to Use GIFs (Web Design in a Nutshell, 2nd Edition)

19.4. When to Use GIFs

GIF is a versatile format for condensing color images for use on the Web. It is particularly well suited for any image with areas of flat color, such as logos, line art, icons, cartoon-like illustrations, etc. (Figure 19-1). It compresses them cleanly (since it is a lossless compression) and efficiently (LZW compression looks for repetition of pixel colors). Even if the image contains some photographic elements, if the majority is flat colors, GIF is your best bet.

Figure 19-1. Examples of images well suited for GIF format

You will also need to use GIF format if you want a portion of the image to be transparent, because it is the only format that has this ability and is universally supported by browsers. PNG files can contain transparency information (actually, in a more sophisticated way than GIF), but as of this writing, browser support is too spotty to use them confidently.

GIF is also a good option for adding simple animation to your page without relying on plug-in technology, Java programming, or server-intensive methods. Most browsers display an animated GIF as easily as any other GIF. See Chapter 23, "Animated GIFs" for more information on GIF animation.

GIFs are not particularly good for photographic images. With the 8-bit limit, true color information is lost and the subtle gradations of tone become pixelated when the image is reduced to 256 colors. The quality of the image may be greatly reduced. In addition, GIF is not able to condense photorealistic image content efficiently.

In many cases (especially for very small images), GIF works just fine for all image types, but you will get much better image quality and smaller file sizes if you save photographs and continuous-tone images as JPEGs (see Chapter 20, "JPEG Format" for more information).