Controlling dither

You may have noticed that certain areas of the image appear mottled or spotty when optimized with different color palettes and numbers of colors. This spotty appearance results from dithering, the technique used to simulate the appearance of colors that are not included in the color palette. For example, a blue color and a yellow color may dither in a mosaic pattern to produce the illusion of a green color that is not included in the color palette.

When optimizing images, keep in mind the two kinds of dithering that can occur:

• Application dither occurs when ImageReady or Photoshop attempts to simulate colors that appear in the original image but not in the optimized color palette you specify. You can control the amount of application dither by dragging the Dither slider in the Optimize palette.

• Browser dither can occur in addition to application dither. A browser dither occurs when a Web browser using an 8-bit (256-color) display simulates colors that appear in the optimized image’s color palette but not in the system palette used by the browser. You can control the amount of browser dither by shifting selected colors to Web-safe colors in the Color Table palette.

In the Photoshop Save For Web dialog box and in ImageReady, you can view application dither directly in an optimized image. You can also preview the additional browser dither that will appear in the final image when viewed in a browser using an 8-bit display.

Controlling application dither

Dithering creates the appearance of more colors and detail, but it can also increase the file size of the image. The Dither option controls the range of colors that ImageReady simulates by dithering. For optimal compression, use the lowest percentage of application dither that still provides the color detail you require.

1.	If necessary, open the 14Start2.psd file and zoom in to 200% or higher.
2.	Make sure that the optimized version of the image is selected, and that the Optimize palette is set to GIF format, Perceptual, and 32 colors. Notice the blocky drop shadows below the text.
3.	In the Optimize palette, enter the following options: Select Diffusion as the dithering algorithm (to replace No Dither). Drag the slider or type to set 100% as the Dither value. Using a combination of different colors, ImageReady tries to simulate the colors and tonalities that appear in the original image but not in the 32-color palette. Notice the speckled pattern that replaces the blocky drop shadows below the text. While not ideal, this pattern is a significant improvement and is acceptable. The dithered green background color for the Tropical Rainforest, however, is not acceptable.
4.	Drag the Dither slider to 50%, and then experiment with other dither percentages. ImageReady minimizes the amount of dither in the image, but no percentage of dither will preserve the drop shadows without ruining the green background. For an illustration of the effects of different dither percentages on an image, see figure 14-2 in the color section.
5.	Set the dither back to 100%.
6.	Change the number of colors back to 128.
7.	Use the eyedropper tool () to select the green background in the Tropical Rainforest, and then click the Lock button () in the Color Table palette to lock that color. In the Optimize palette, switch the Colors value back to 32.
8.	In the image window, change the magnification back to 100%.

Although the difference may seem subtle, the image is now acceptable.

Minimizing browser dither

As you learned earlier, images that include non–Web-safe colors undergo a process of dithering when displayed in a Web browser using an 8-bit display, because the browser simulates colors that do not occur in the 8-bit system palette. From ImageReady, you can preview how an optimized image will look when dithered in a Web browser.

To protect a color from browser dither, you can Web-shift the color, converting the color to its nearest equivalent in the Web palette. Because the Web palette includes the subset of colors that appear in both the Windows and the Mac OS system palettes, Web palette colors will display without dithering in browsers on either platform.

1.	With the optimized 14Start2.psd image open, choose View > Preview > Browser Dither (so that a checkmark appears next to the command). Notice that browser dither occurs in the brown African Savannah background. You’ll Web-shift that color to reduce the amount of browser dither in the image. Note If you don’t see the dithering, increase the zoom to about 300% or turn off the browser dither preview and then turn it back on to observe the effects. You can toggle the browser dither preview off and on by pressing Ctrl+Shift+Y (Windows) or Command+Shift+Y (Mac OS).
2.	Select the eyedropper tool () and click anywhere in the dithered brown background. The sampled color appears selected in the Color Table palette.
3.	Click the Web-shift button () at the bottom of the Color Table palette. The swatch changes position in the palette and a small diamond appears in the center of the swatch, indicating that it has been shifted to its nearest Web-palette equivalent. By Web-shifting the brown background, you change its color to one that can be displayed without dithering by a Web browser on a 256-color system.
4.	Choose File > Save.