Web Design in a Nutshell

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 original 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, ...