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.

J Color Table

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.

Note: In Photoshop 7.0 and ImageReady 7.0, you can also quickly map one color to another color or to a transparency. This remapping reassigns all the pixels that appeared in the selected color to the new color or transparency. For more information, see Adobe Photoshop 7.0 online Help.

Understanding Adobe Photoshop Features You Will Use

Understanding Adobe Photoshop Features You Will Use

Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.

Get My Free Video

Post a comment