HTML From the Ground Up

by L. Downs

More About Graphics

In an earlier lesson we mentioned that there were two types of graphics in common use for Web pages, GIF and JPEG. You might be wondering what the difference is, and why you'd want to use one over another. Let's look at these a little more closely.

A computer graphic is stored in one of two ways. Either a series of step-by-step instructions are encoded on how to recreate the graphic (a "vector" graphic) or the actual individual dots making up the graphic are stored (a "bitmap" graphic). Although the use of vector graphics is gradually increasing on the Web, these are still a tiny minority of those currently in use; by far most graphics on Web pages are bitmap graphics.

There's one little problem with bitmap graphics: a single graphic can be made up of a very large number of individual dots, or pixels. For example, this innocent little arrow graphic on the right consists of a grid of dots thirty high and thirty wide, or (gulp) nine hundred individual dots. In comparison, many entire Web pages contain fewer than a thousand individual characters of text. And that's nothing. The image we used earlier of the Grand Canyon is 640 pixels wide by 480 pixels high, for a grand total of 307,200 pixels. For a color image, you need at least 1 byte for each pixel to store the color, and for high-quality images you actually need 3 (which means that our Grand Canyon picture saved in high quality color format would take up almost one million bytes). Obviously graphics can grow very large very fast. Since the speed that a Web page loads is directly proportional to the number of bytes that have to be transmitted, keeping file sizes down is extremely important, especially if users are accessing pages via phone lines and modems.

The answer is compression. Believe it or not, you don't have to use one byte for each pixel on the screen. In almost any graphic, there will be many groups of several pixels in a row of the same color. If we come up with a system for storing this information, instead of storing all of the actual pixels, we can reduce the size of the file considerably. (Think of the file as consisting of instructions like "5 red pixels, 2 orange pixels, 1 light brown pixel," etc.) Depending on the file, we can shrink the size down by half or even more (our actual Grand Canyon graphic file takes up just 128,176 bytes, or less than half of the uncompressed size). Since we don't actually throw away any information, and the compressed file is exactly like the original, we call this "lossless" compression. This kind of compression is very effective for what is sometimes called "illustration art," or art which includes areas of solid colors and/or a limited total number of colors, such as logos or text art.

Unfortunately, color photographs are exactly the opposite. If saved as high quality files, there may be long stretches in which every single pixel is a slightly different color ('cause that's the way the real world looks). Such a file when compressed may actually end up bigger than the uncompressed version.

For these files, a much more effective version is the JPEG format. Unlike the GIF format, JPEG files actually throw away some information when they compress the file--information which the eye normally does not notice. The result is that JPEG files are often much smaller than the originals, without visible loss of information. This kind of compression is called "lossy" compression.

However, you have to be careful just how much you compress a JPEG file. Here are six versions of the same photograph, each compressed a little more than the previous one. Note the difference in file sizes--and quality!


File size: 47K	File size: 14K

File size: 8K	File size: 6K

File size: 3K	File size: 2K

To summarize, use GIF files for artwork with many areas of solid color, and use JPEG files for color photo files or artwork with many subtle gradiations of shading.

Sometimes it isn't the file that you want to shrink, but the image itself. The Grand Canyon photos above were shrunk down from the original 640 x 480 pixel image using commercial software (in this case Corel Photopaint). Generally this is the preferred way to resize an image. You can also have the user's browser itself resize an image using the HEIGHT and WIDTH attributes in the <IMG> tag, like this:
<IMG SRC="gcanyon.gif" HEIGHT="188" WIDTH="250">

but most browsers do a pretty poor job compared to photo editing software, as you can see:


Resized in browser	Resized using Photopaint

Not to mention that if you use the unreduced original image and shrink it with the browser it's still just as large a download as if you hadn't shrunk it at all.

Another reason to use JPEG files is that by default they can save an image in up to 16,000,000 different colors (although not all monitors can display that many). GIF files, on the other hand, can only save up to 256 different colors in a single image. This means that when photographs are saved as GIF files you may see large expanses of gently shading colors (such as sky scenes) as bands of color instead, due to the limited number of colors available.

There's one major advantage to the GIF file format, and that's the ability to set one of the colors as "transparent." This means that any pixels of that color in the image will become invisible when the graphic is displayed, allowing any background color or image to show through. For example, consider this image:

In its "raw" form, the green surrounding the image covers anything beneath it. However, using image editing software we can select the green as our "transparent" color, making the image look like this:

Where this really becomes effective is when there's a background image behind the graphic, such as in this one-cell table:

In our next lesson we discuss: accessibility.

Terms to know from this lesson

Vector graphic: A graphic file which contains instructions for drawing an image step by step.

Bitmap graphic: A graphic file which contains detailed information on each individual pixel used to make up an image.

Lossless compression: A form of image compression in which the compressed image is absolutely identical to the original when displayed.

Lossy compression: A form of image compression which discards information not readily visible to the eye, resulting in the displayed image not being exactly identical to the original. The greater the amount of compression applied, the less the compressed image resembles the original.

HEIGHT attribute: In the <IMG> tag, used to set the height of a displayed graphic in pixels.

Transparent GIF: A GIF file in which one color is designated as "transparent," meaning that when displayed in a browser any pixels of the transparent color will be "invisible," allowing any color or image behind to show through.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.