A Complete Guide to Web Design

306 Chapter 17 – Designing Graphics with the Web Palette

Image Types

Web Design in a Nutshell, eMatter Edition

The following list shows the palettes that popular web graphics tools make avail-

able when you convert graphics to Indexed Color mode.

Adobe Photoshop (4.0 and 5.0)

Exact, System (Mac), System (Windows), Web, Uniform, Adaptive, Custom,

Previous

Adobe ImageReady

Perceptual, Adaptive, Web, MacOS, Windows

Macromedia Fireworks

Adaptive, Web-Snap Adaptive, Web 216, Exact, Macintosh, Windows, Gray-

scale, Black & White, Uniform, Custom

PaintShop Pro

Indexing is automatic; no palette options are offered

Image Types

Before jumping into specific graphic production tools and techniques, let’s first

look at the different types of images and how the Web Palette applies to each of

them.

Photographic Images

Images made up entirely of photographic material will dither when converted

from RGB mode to Indexed Color mode. In most cases, dithering is acceptable, or

at least less obvious, in areas with a lot of photographic detail.

You have a number of options for dealing with purely photographic images. The

first (and probably the best) is to save it as a JPEG, which will probably result in a

smaller file size and will allow any user with a 24-bit display to see it in its orig-

inal true-color glory. If you must convert it to Indexed Color, an Adaptive palette

(or Perceptual if you’re using ImageReady) will preserve the original colors and

character of the image. You can allow the browser to do the dithering for 8-bit

displays, but the image will look much better for users with 24-bit displays.

The only advantage to converting photographic material to the Web Palette is that

you can see exactly how the image will appear on 8-bit displays and you will

know that the image will look exactly the same for all users.

Flat Graphics

Dithering is most distracting and unacceptable in areas of flat color within a

graphic, particularly if that area contains small text. The restricted number of

colors in the Web Palette has its largest influence on graphics where dithering

might be a problem, such as logos, line-art illustrations, and graphical headlines.

You should pay particular attention to the Web Palette for these types of images.

Your best bet is to design the graphic using colors from the Web Palette right from

the beginning instead of converting it after the fact. Another alternative is to

convert to the Web Palette and severely restrict the amount of dithering, which

will force the image to use Web colors and make the file size smaller, but may

also result in ugly banding and posterization in gradient and blurred areas.