Nicholson, S. (1998). GIF versus JPEG: Choosing a graphics compression format for Web publications. Information Technology and Libraries 17(2). 109-110.

GIF versus JPEG: Choosing a Graphics Compression Format for Web Publications
by Scott Nicholson (published in Informatiom Technology and Libraries)


Currently, there are two formats for graphics that are used in Web publications: GIF (officially pronounced "jif") and JPEG (also known as JPG, and pronounced "jay-peg"). Each of these standards takes a computer image and compresses it up to 100 times. Today's browsers have built-in decompressors for each format, so many Web page creators do not know which one to use. The common myth is that JPEG creates smaller files, but this is not always true. The intention of this article is to help Web page creators make an informed decision when selecting a format for each graphic in a Web publication.

IMAGE QUALITY

When an image is compressed, some loss of quality can occur. The algorithm for GIF is lossless, which means all of the original picture information is saved. The palette of colors used in the picture is saved, along with which color and intensity to diplay for each pixel. GIF palettes are limited to 256 colors, so an image with more colors, like a photograph, will have some colors removed or dithered (taking two colors and interlacing them to create a third). This may create unacceptable image quality.

A JPEG image uses a lossy algorithm, which means some of the information about the picture is lost in compression. However, it supports 16.7 million colors, so it is usually the best choice when reproducing photographic images. JPEG's algorithm involves saving a high-quality black-and-white copy of the image, and then applying colors where needed. JPG images can have more artifacts (blurs or images not in the original picture), especially when compressing images with sharp lines (like the letters of a bold, black font on a white background).

SPECIAL FEATURES

There are some special features available with the GIF89a (the current GIF standard) format for a designer to consider. GIF images can have a transparency color, where one color in the palette is selected as transparent, so the Web page background shows through. A designer using this option needs to be aware that if transparency is turned on, all pixels of that color become transparent. For example, if one creates a button with white around the edge and selects white as the transparency color, then any white pixels in the button will also become transparent. To avoid this nasty surprise, one can use a bright green or other color not in the button for the transparent areas.

GIF89a images can also be interlaced. With this feature, this image is first displayed at a low resolution, and, as more information loads, the resolution improves. This effect may be desired to allow a user to quickly see what type of images are on the page instead of forcing the user to watch each image load from the top down.

The third special feature available with GIF is animation. This is overused on the Web, as many people put animated mailboxes, bullets, or other images that change repeatedly like a undying neon sign. Most animated GIFs fall under the old adage, "Just because you can doesn't mean you should." An animated GIF is created by taking a number of individual pictures and storing them into one file using a graphical utility, and thus take much longer to load than a non-animated image. These should be avoided unless there is no other way to demonstrate the point. While cute at first, most animated GIFs quickly get tiring to look at and do nothing more than can be done with a static image.

FILE SIZE

The most important factor in selecting graphical formats for the Web is the final file size of the image. The user population for the Web page determines how large the graphical files should be. If the users are all connected to a fast network (such as an Intranet), then concern about file size is not as important. If the users are accessing the pages via modem, however, larger files can cause transmission errors or, even worse, user boredom.

GIF files are compressed by looking for horizontal patterns. As pixels are stored in memory by going across row after row, patterns of identical horizontal pixels are saved only once and then are just redisplayed. Therefore, images that have rows with the same color or horizontal patterns that are the same may be much smaller as a GIF than as a JPEG.

To reduce the size of a GIF file, reduce the number of colors that make up the pictures. Programs such as Photoshop make this easy to do. Many images can be reduced to 32 colors or fewer with only a slight loss in quality. The best way to experiment with this is to reduce the colors from the master (using the UNDO command each time) until the image is unacceptable, and then go back up one step. Many buttons and small images on the Web can be made with just a few colors, which makes for much smaller GIF files.

JPEG files are better at storing subtle shades of colors or photographic images. The more colors used in an image, the better the chance that JPEG will create a smaller file than will GIF. Images that have many changes of color across horizontal rows will also be best saved as a JPEG. For example, a picture of TV static, while made up of only a few colors, will make for a much smaller JPEG than GIF file.

To reduce the size of a JPEG file, reduce the quality of the final image. Unlike with GIFs, there is not a great savings in file size for reducing the colors in the image. In most programs that create JPEG files, the level of quality can be selected. Many times, the lowest quality setting will produce acceptable results. To explore these options, start with the lowest quality file and move up until the image is acceptable.



Sample Images and File Sizes (each image is 400 pixels X 400 pixels)
BMP (Bitmap) 161.078 KB 161.078 KB 161.078 KB 161.078 KB
GIF89a 0.622 KB 1.232 KB 4.879 KB 198.968 KB
JPEG 2.207 KB 10.666 KB 10.822 KB 80.873 KB

The above charts show that the size of the file does not change for the contents using the uncompressed BMP format. In the first three images, only two colors are used and there are horizontal patterns; therefore, the GIF files are smaller than the BMP and the JPEG files. In the fourth image, however, where many shades of grey are used and where there is no horizontal pattern, the GIF file is larger than both the BMP and the JPEG files.

CONCLUSIONS

Selecting the appropriate file format for can make a huge difference in the time it takes a Web publication to load. A good rule of thumb is that images with few colors should be saved as GIFs, and those requiring many colors saved as JPEGs. However, if the horizontal rows of pixels change frequently without patterns, then a JPEG may allow for a smaller file even with a few colors. If designers can save a few kilobytes on each image, it can drastically improve the loading time of image-loaded pages for users with slow connections.

SOURCES

Information and ideas for this article came from these two books, both of which are good for Web site designers:

Siegel, D. (1996). Creating Killer Web Sites. Indianapolis, IN: Hayden Books.

Weinman, L. (1996). Designing Web Graphics: How to Prepare Images and Media for the Web. Indianapolis, IN: New Riders.