Web Palette Strategies (Web Design in a Nutshell, 2nd Edition)

22.3. Web Palette Strategies

There are no hard and fast rules, since every image has its own requirements. The following are some basic guidelines for using -- and resisting -- the web palette.

22.3.1. Flat Graphical Images

Goal: Keep flat color areas from dithering while maintaining smoothness in the anti-aliased edges.

Strategy: Use colors from the web palette to fill flat color areas when you are designing the image. Do not apply the strict web palette option when saving or exporting because you'll lose the gradations of color in the anti-aliasing. It is better to choose an adaptive palette with a "web snap" option, if it is available. In Photoshop, set the amount of web snap with the slider scale. In Fireworks, apply the Web Adaptive palette. This will maintain the web colors in your flat areas but allow some non-web-safe colors in the anti-aliasing and other blends to remain.

22.3.2. Photographic Images

Goal: To maintain clarity and color fidelity for the maximum number of users.

Strategy: First, if it is an entirely photographic image, consider saving it in JPEG format. Otherwise, choose an Adaptive palette (or Perceptual in Photoshop 5.5 and up) to preserve the original color range in the image. That way, the image will look the best it possibly can for users with 16- and 24-bit monitors (the vast majority). For users with 8-bit monitors, the image will map again to the web palette, but dithering is usually not detrimental in photographic images. The only advantage to applying the web palette to a continuous-tone image in the saving process is that you know it will look equally bad to everyone.

22.3.3. Combination Images (Flat and Photographic Areas)

Goal: To keep the flat areas from dithering while allowing the continuous tone areas to dither with an adaptive palette.

Strategy: Use web-safe colors in the flat areas when you are designing the image. When it's time to save or export to GIF format, choose an adaptive palette with a "web snap" option if it is available. The adaptive palette preserves the color fidelity in the photographic areas while the web snap option preserves the web-safe colors in the flat areas.