Yale C/AIM Web Style Guide

Contents

Web Graphics

Introduction

Color display primer

Graphic file formats

Interlaced GIF

Transparent GIF

JPEG graphics

Summary-File formats

Illustrations

Optimizing graphics I

Optimizing graphics II

Height & width tags

Colored backgrounds

Imagemaps

The following is a brief overview of color computer displays that explains some of the basic terminology used in the Macintosh and Windows operating systems.
Current color monitors for desktop microcomputers are based on cathode ray tubes (CRT's). Because CRT's transmit light, CRT displays use the red-green-blue (RGB) additive color model. The RGB model is called "additive" because a combination of the three pure colors "adds up" to white light.

Diagram of RGB color model for display monitors.

The computer's operating system (Mac, Windows, etc.) organizes the display screen into a grid or x,y coordinates, like a checkerboard. Each little box on the screen is called a "pixel" (short for "picture element"). Current Macintosh and Windows displays are made up of these grids of pixels (see screen diagram below).

Pixels and color
To control the color of each pixel on the screen the operating system must dedicate a small amount of memory to each pixel. In aggregate this memory dedicated to the display screen is often referred to as "video RAM" or "VRAM". In the simplest form of black and white computer displays a single bit of memory is assigned to each pixel. Since each memory bit can only be positive or negative (0 or 1), a one-bit display system can only manage two colors (black or white) for each pixel on the screen:

Diagram of 1-bit computer display.

If we dedicate more bits of memory to each pixel in the display, we can manage more colors. When eight bits of memory are dedicated to each pixel, each pixel could be one of 256 colors. (256 = 2 to the eighth power; in other words, 256 is the maximum number of unique combinations of 0's and 1's you can make with eight bits). This kind of computer display is called an "eight-bit" or 256-color" display, and is very common in current microcomputing, especially on lap-top computers and older desktop machines.

Diagram of 8-bit display screen.

If still more memory is dedicated to each pixel, we can get nearly photographic color on the computer screen. "True-color" or "24-bit" color displays can show millions of unique colors simultaneously on the computer screen. True-color (24-bit) images are composed by dedicating 24 bits of memory to each pixel; eight each for the red, green, and blue components (8+8+8=24).

Diagram of 24-bit display screen.

The amount of VRAM dedicated to each screen pixel in the display is commonly referred to as the "bit depth" of the monitor. Most Mac and Windows microcomputers sold in the last few years are capable of displaying bit depths greater than eight-bit, in thousands (16-bit) or millions (24 bit) of simultaneous colors.
To check your computer system for the range of bit depths available to you, use the "Display" control panel (Windows95) or the "Monitors" control panel (for Macintosh):

Win95 and Mac display control panels.

Bit depth and color graphics files
The terminology and memory schemes used in color displays are directly analogous those used to describe color depth in graphics files. In their uncompressed states, eight-bit or 256-color image files dedicate eight bits to each color pixel in the image. In eight-bit images the 256 colors that make up the image are referenced to a "palette" or "index" (also called a color lookup table, or CLUT). The main point for eight-bit images is that they can never contain more than 256 colors.

8-bit image with color palette.

True-color or 24-bit images are typically much larger than eight-bit images in their uncompressed state, because each pixel in a 24-bit image has 24 bits of memory dedicated to it, typically in three monochrome layers: red, green and blue:

Diagram of RGB image layers in 24-bit image.

References

Rizzo, J., and K. D. Clark. 1996. How Macs work. Emeryville, CA: Ziff Davis Press.

Siegel, D. 1996. Creating killer web sites. Indianapolis: Hayden Books.

www.killersites.com

Weinman, L. 1996. Designing Web graphics. Indianapolis: New Riders.

www.lynda.com
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.