Web Design Reference Guide

GIFs

Last updated Mar 1, 2004.

Is the G in GIF pronounced "gift" or "jiffy?" To me, it's not a big deal because I've used it both ways. Regardless of what the right way is, it stands for Graphics Interchange Format. GIF was developed for CompuServe in the 1980s for the sole purpose of online delivery. Its file extension is .gif, which tells the computer what kind of file it is, so it will properly display the graphic. All Web browsers except Lynx and other text-browsers can understand gif despite the browser or computer used. Text-based browsers don't "understand" a GIF.

It uses a lossless compression scheme called LZW, which came from Lempel-Ziv and Welch. Terry Welch designed LZW using a variant of LZ28, a compression scheme. When used appropriately, graphics add spice to Web sites except when they take a long time to load. That's where file compression plays a key role. Compression makes a graphics file compact by throwing out colors, which limits the palette and quickly loads the image. When a file is poorly compressed, it takes longer to load.

When dealing with an image of lots of solid and flat colors, GIF is usually your best bet. If an image is black-and-white (two colors), it should be converted to GIF. JPG would be useful only if it uses a wide variety of grays and black shadings or smooth tone transitions.

GIF89a is an extension of the GIF spec in which the previous version was GIF87a. GIF89a supports animation and background transparency. This spec allows the designer to specify a transparent color so that whatever is behind the image can show throw, and in most cases is white. As for animation, GIF89a indicates the delay time between images and whether or not to loop, or repeat the sequence. In case you're curious about the odd numbers of 87 and 89, they represent the years the specs were created.

GIFs also have the capability to do interlacing, which is somewhat like streaming. Rather than waiting for the whole thing to load, the image immediately appears in the form of a low-quality graphic and loops until the image is fully loaded at its highest quality.

Large, sloppy files are taking up unnecessary space because they were not compressed or they were compressed under the inappropriate file format, like a photo saved as a GIF file. Compressed files make the best use of space and thus shorten downloading times.

Other than for aesthetics, Web designers work closely with graphics to speed Web page loading. Nobody likes to enter a Web site and wait and wait for the graphics to load. Other than connection speed to the Internet, this could happen because the graphics are large or the graphics file size is bigger than it needs to be. The latter can be compared to a bucket filled with rocks and sand. Do you pour the sand in first and then the rocks? Or do you put the rocks in and then pour the sand? Which way will fill up the bucket faster?