Implementing Graphics in Webpage Design

Craig Borysowich (Chief Technology Tactician)

There are a variety of ways to enhance Web pages by incorporating graphics. For example, use graphics to:

· create small background strips or repeating tiles,

· add larger background images using photographs,

· embed graphical images to enhance the textual content,

· serve as the main content for the page (e.g., imagemaps),

· create icons for navigating the site.

Guidelines

Some general guidelines for incorporating graphics in Web page design:

· Adding graphics to Web pages makes the user wait longer for the page to download. Make sure the images are compelling and add value to make it worth the wait.

· Avoid background graphics that use high-contrast patterns making the text on the page difficult to read.

· Limit the background graphic size so that it does not take too long to download. As a rule of thumb, limit the size to about 10K.

· Avoid dithering by mapping graphics to the 216-color browser-safe palette.

· Use GIF format for images that use few, flat colors (e.g., icons) and JPEG for complex images (e.g., photographs).

· Use techniques such as interlacing, caching, and streaming to speed download time of graphics and multimedia files.

· Exploit HTML attributes to give the impression of faster download speeds. For example, use low source images to load a light version of a graphic before the final version downloads. Download non-graphical content first by manually setting the width and height of images in the HTML file.