Web Graphics Formats

One of the great things about the WWW is that it works so well on different kinds of computers and with different web browsers. In part, this is the case because web developers remain committed to a set of standards. Web graphics are a good case in point. Nearly all web graphics are sent over the Internet in one of two file formats - GIF (Graphic Interchange Format) or JPEG (Joint Photographic Experts Group).

Web designers do need to recognize that there are some important differences between the GIF and JPEG formats and it is important to learn when to use each.

• The GIF format is most appropriate for images containing large areas of solid color as might be the case in logos that might appear at the top of web pages, simple illustrations, cartoons, or or large decorative text.
• The GIF format works best when the designer can control the colors that will be used. This is easiest to do when the images are created on the computer rather than captured from some other source (e.g., video captured, scanned). GIF images must use fewer than 256 colors (fewer still if colors available on all computers are considered) and distortions occur when other hues are converted to these basic colors.
• Use the GIF format when you want an image to appear as an object against the background of the rest of the page rather than in the shape of a rectangular box. GIFs allow transparency. In the creation of the GIF, it is possible to select one color (any color) and set that color to invisible. If an image consists of an object surrounded by a solid color background, setting the solid color to invisible creates the appearance that only the object is present. This technique is easiest to use with simple images created specifically for the web. With complex images, there is likely either to be no solid color background or the color of the background may also appear here and there throughout the entire image. Attempting to change such an image into a transparent GIF will have disastrous results.
• The JPEG format is most appropriate for complex images such as photographs which contain many colors in complex patterns.

Comparison of Formats: The following images were all based on the same PICT image (214,492 bytes):



GIF format - 45,698 bytes



JPEG - High Quality - 58,846 bytes



JPEG - Low Quality - 26,977 bytes



PNG Format - 192,947 bytes

PNG (pronounce ping) Portable Network Graphics - this is a newer format capable of lossless compression with the capability of 8 bit or 24 bit color. This image will display if you have Quicktime 3.0 installed or you might download a plug-in from:

The hard or soft g controversy Here is a question for the week (or so). How is the word GIF pronounced (soft as in gent or hard as in gift)? Different authors very authoritatively make different claims:

"GIF is pronounced "giff," not "jiff" - the "g" stands for the hard "g" in "graphical". (page 174)

Williams, R. & Tollett, J. (1998). The non-designers web book. Berkeley: Peach Pit Press.

 

"The official way is with a soft g, but so many people say it with a hard g that I've decided either way is right. I actually took a poll for The Net Magazine web site where the hard g was last winning by a vote of 426 to 256." (page 40).

Weinman, L. (1996). Designing web graphics. Indianapolis: New Riders.