Skip to Local Navigation
Skip to Content
California State University, Long Beach
 

Web Graphics

The majority of Internet users access the web with modems which range in speed from 28.8 to 56 Kbps which would download at a speed of 3.6 kilobytes per second. A byte of information (a character) has 8 bits, a 36K graphic could take up to 10 seconds to download through a modem. As a result of this speed problem, the extensive use of graphics online becomes a critical issue. Many considerations have to be taken to ensure the quality of the images is not sacrificed for speedier files..

RGB color model

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).

1-bit color details 8 bit color details
24 bit color details

Graphic File formats

GIF

Graphic Interchange Format (GIF) for 8 bit images using a palette of up to 256 distinct colors from the RGB color space. GIFs are the best format for solid blocks of color and type. GIF supports single color transparency and interlacing.

The way a GIF works:

example of 8-bit images

JPEG

Joint Photographic Experts Group compression scheme for full color images of 24 bit depth with millions of possible colors. Mostly used for photographic images with a wealth of tones and colors.

Huge compression ratios are possible, for faster download speeds. Gives excellent results in most photographs and medical images. Supports full-color images (24-bit "true color" images).

example of 24-bit images

PNG

Portable Network Graphics was designed to replace the GIF. PNG offers better compression and more features. The format is more suitable than GIF in instances where true-color imaging and alpha transparency are required. Internet Explorer 7 and above and Mozilla browsers such as Firefox now fully support the PNG file format.

Optimizing for WEB safe colors

When an image is converted to 256 colors, the image manipulation program picks the best 256 colors that fit that image. When 2 or more images custom-colored for 256 colors (that could make a total of 512 colors), are shown at the same time, some computers unable to display more than 256 colors will distort the color in those images.

Windows and Macintosh platforms have different system palettes, only 216 colors are identical between the 2 systems. These set of colors are "web-safe" colors.

web safe color palette

(24 Bit) Low JPG compression image - size=36K
example of low compression

High JPG compression image - size=28K
example of high compression

8 Bit (256 colors) Gif Compressed image - size=44K
example of 8bit compression

Custom palette (5 colors) image - size=16K
example of custom compression

Custom palette (3 colors) image - size=8K
another example of custom compression

Background Colors

Colored backgrounds should be used with care. It's easy to pick color combinations that are unreadable especially by color-blind users.

Using art as a background adds other considerations like tiling and contrast across the whole image. One cannot rely on text only appearing in one part of the background image.

Printing background art and colors

Most browsers will not print background art or colors. This can save you a lot of ink.

In IE6, the setting is under Tools > Internet Options > Advanced . In the "Printing" section, there is a checkbox for "Print background colors and images".

In Firefox, the checkbox is in File > Page Setup > Format & Options. In the Options section, the checkbox is labelled "Print Background."