Preparing Graphics for the Web

Preparing Graphics for the Web

About optimization

Optimization is the process of fine-tuning the display quality and file size of an image for use on the Web or other online media. Adobe Photoshop and Adobe ImageReady give you an effective range of controls for compressing the file size of an image while optimizing its online display quality.

There are two methods of optimizing images:

. For basic optimization, the Photoshop Save As command lets you save an image as a GIF, JPEG, PNG, or WBMP file. Depending on the file format, you can specify image quality, background transparency or matting, color display, and downloading method. However, any Web features-such as slices, links, animations, and rollovers-that you've added to a file are not preserved.

For complete information on using the Save As command to save an image as a GIF, JPEG, or PNG file, see "Saving images" on section 446.

. For precise optimization, you can use the optimization features in Photoshop or ImageReady to preview optimized images in different file formats and with different file attributes. You can view multiple versions of an image simultaneously and modify optimization settings as you preview the image to select the best combination of settings for your needs. You can also specify transparency and matting, select options to control dithering, and resize the image to specified pixel dimensions or a specified percentage of the original size.

When you save an optimized file using the Save for Web (Photoshop) or Save Optimized

(ImageReady) command, you can choose to generate an HTML file for the image. This file contains all the necessary code to display your image in a Web browser.

Optimizing images

In Photoshop, you use the Save for Web dialog box to select optimization options and preview optimized artwork. In ImageReady, you can view and work with optimized images at any time in the document window.

415

Using the Save for Web dialog box (Photoshop)

You use the Save for Web dialog box to select optimization options and preview optimized artwork.

C

D

E F G

Save for Web dialog box

A. Toolbox B. Preview pop-up menu C. Optimize pop-up menu D. Color Table pop-up menu

E. Zoom text box F. Original image G. Optimized image

Displaying the Save for Web dialog box Choose File > Save for Web.

Previewing images Click a tab at the top of the image area to select a display option: Original to view the image with no optimization, Optimized to view the image with the current optimization settings applied, 2-Up to view two versions of the image side by side, or 4-Up to view four versions of the image side-by-side.

If the entire artwork is not visible in the Save for Web dialog box, you can use the hand tool to bring another area into view. Select the hand tool (or hold down the spacebar), and drag in the view area to pan over the image. You can also use the zoom tool to magnify or reduce the view. Select the zoom tool , and click in a view to zoom in; hold down Alt

(Windows) or Option (Mac OS), and click in a view to zoom out. Alternatively, you can specify a magnification level in the Zoom text box at the bottom of the Save for Web dialog box.

Selecting a view Click a different pane in the Save for Web dialog box to select a new view. If you're working in 2-Up or 4-Up view, you must select a view before you apply optimization settings. A black frame indicates which view is selected.

Viewing annotations The annotation area below each image in the Save for Web dialog box provides valuable optimization information. The annotation for the original image shows the filename and file size. The annotation for the optimized image shows the current optimization options, the size of the optimized file, and the estimated download time using the selected modem speed. You can choose a modem speed in the Preview pop-up menu.

Working with slices in the Save for Web dialog box (Photoshop)

If your artwork contains multiple slices, you must specify the slices to be optimized. You can apply optimization settings to additional slices by linking the slices. Linked slices in GIF and PNG-8 format share a color palette and dither pattern to prevent the appearance of seams between the slices.

To show or hide all slices in the Save for Web dialog box:

Click the Toggle Slices Visibility button .

To show or hide auto slices in the Save for Web dialog box:

Choose Hide Auto Slices from the Preview pop-up menu. A check mark indicates that slices are hidden.

To select slices in the Save for Web dialog box:

1 Select the slice select tool .

2 Click a slice to select it. Shift-click or Shift-drag to select multiple slices.

Note: In the Save for Web dialog box, unselected slices are dimmed. This does not affect the color of the final image.

To view slice options in the Save for Web dialog box:

Select the slice select tool, and double-click a slice. (See "Specifying slice options" on section 378.)

To link slices:

1 Select two or more slices that you want to link.

Choose Link Slices from the Optimize pop-up menu . The link icon appears on the linked slices.

To unlink slices:

Do one of the following:

. To unlink a slice, select the slice, and then choose Unlink Slice from the Optimize pop-up menu.

. To unlink all slices in an image, choose Unlink All Slices from the Optimize pop-up menu.

Using the Optimize palette (ImageReady)

You use the Optimize palette to select optimization options. This palette corresponds to the Optimize panel in the Photoshop Save for Web dialog box.

Displaying the Optimize palette Choose Window > Optimize. To show all the optimi- zation options, click the Show Options control on the Optimize palette tab or choose Show Options from the Optimize palette menu.

Using the Optimize palette menu Click the triangle in the upper right corner of the palette.

Viewing optimized images (ImageReady)

In ImageReady, you view and work with optimized images directly in the document window. You can view up to four versions of an optimized image simultaneously and easily switch between the optimized and original (non-optimized) versions of an image.

Document window in 4-Up mode

To preview optimized images:

Click a tab at the top of the document window to select a display option:

. Original to view the image with no optimization.

. Optimized to view the image with the current optimization settings applied.

. 2-Up to view two versions of the image side by side.

. 4-Up to view four versions of the image side- by-side.

To select a view:

Click the view you want to select. A black frame indicates which view is selected. Note: If you're working in 2-Up or 4-Up view, you must select a view before you apply optimization settings.

In 2-Up and 4-Up view, the annotation area below each view provides valuable optimi- zation information. The annotation for the original image shows the filename and file size. The annotation for the optimized image shows the current optimization options, the size of the optimized file, and the estimated download time using the selected modem speed. You can choose a modem speed in the image information box at the bottom of the document window. (See "Displaying file and image information" on section 48.)

To hide or show optimization annotations in 2-Up and 4-Up mode:

Choose View > Hide Optimization Info or View > Show Optimization Info.

Applying optimization settings

You use the Optimize panel in the Save for Web dialog box (Photoshop) and the Optimize palette (ImageReady) to set optimization options. If you're working in 2-Up or 4-Up mode, you can repopulate the views to automatically generate lower-quality versions of the image based on the selected settings.

To apply optimization settings:

1 Select a view to which you want to apply optimization settings.

2 If your artwork contains multiple slices, select one or more slices to which you want to apply the optimization settings. (See "Working with slices in the Save for Web dialog box

(Photoshop)" on section 417 and "Selecting slices" on section 373.)

3 Do one of the following:

. Choose a named optimization setting from the Settings menu. For information on creating custom named settings, see "Saving and resetting optimization settings" on section 425.

. Choose a file format from the File Format menu.

4 Set additional optimization options. The file format you chose in Step 3 determines which options are available to you.

For more information on specific optimization options, see "Optimization options for GIF

and PNG-8 formats" on section 420, "Optimization options for JPEG format" on section 423,

"Optimization options for PNG-24 format" on section 424, and "Optimization options for

WBMP format" on section 424.

To apply optimization settings based on file size:

1 Choose Optimize to File Size from the Optimize pop-up menu (Photoshop) or the

Optimize palette menu (ImageReady).

2 Choose a Start With option:

. Current Settings to use current optimization settings.

. Auto Select GIF/JPEG to automatically generate a GIF or JPEG file. (Photoshop or ImageReady selects GIF or JPEG format, depending on its analysis of colors in the image.)

3 Enter a value for file size, and click OK.

To repopulate optimization settings:

1 Apply optimization settings to a view in 2-Up or 4-Up mode.

2 Choose Repopulate Views from the Optimize pop-up menu (Photoshop) or the

Optimize palette menu (ImageReady).

The the optimization settings for the selected view and the original view are not altered during repopulation.

To restore an optimized version of an image to the original version:

1 Select an optimized version of the image in 2-Up or 4-Up mode.

2 In the Optimize panel/palette, choose Original from the Settings pop-up menu.

Optimization options for GIF and PNG-8 formats

GIF is the standard format for compressing images with flat color and crisp detail, such as line art, logos, or illustrations with type. You can lower the size of GIF images by reducing the number of colors in the file. Like the GIF format, the PNG-8 format efficiently compresses solid areas of color while preserving sharp detail; however, not all Web browsers can display PNG-8 files. PNG-8 settings are very similar to the GIF settings.

(See "About file formats" on section 453.)

A B

C

D

Optimization panel for GIF format:

A. File format menu B. Color Reduction Algorithm menu C. Dither Algorithm menu

D. Transparency dithering menu E. Optimize menu

Note: In ImageReady, you can control which options show in the Optimize palette by clicking the Show Options control on the Optimize palette tab. To show all options, choose Show Options from the Optimize palette menu.

Lossy (GIF only) Specify a Lossy value to allow for lossy compression. Lossy compression reduces file size by selectively discarding data-a higher Lossy setting results in more data being discarded. You can often apply a Lossy value of 5-10, and sometimes up to 50, without degrading the image. File size can often be reduced 5%-40% using the Lossy option.

You can use masks from type layers, shape layers, and alpha channels to vary lossy compression across an image. This technique produces higher-quality results in critical image areas without sacrificing file size. (See "Using weighted optimization" on section 428.) Note: You cannot use the Lossy option with the Interlaced option or with Noise or Pattern Dither algorithms.

Color Reduction Algorithm and Colors Choose a algorithm for generating a color table from the Color Reduction Algorithm menu. (See "Generating a color table" on section 431.) Then specify the maximum number of colors in the Colors text box. If you choose Web for the color reduction algorithm, the Auto option becomes active in the Colors pop-up menu. Use the Auto option if you want Photoshop or ImageReady to determine the number of colors in the color table based on the frequency of colors in the image.

You can use masks from type layers, shape layers, and alpha channels to vary color reduction across an image. This technique produces higher-quality results in critical image areas without sacrificing file size. (See "Using weighted optimization" on section 428.)

GIF image with 0% dither, and with 100% dither

Choose a option from the Dither Algorithm menu:

. No Dither applies no dither to the image.

. Diffusion applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are extended across adjacent pixels. If you select this algorithm, specify a Dither percentage to control the amount of dithering that is applied to the image. A higher dithering percentage creates the appearance of more colors and more detail in an image, but can also increase the file size. You can use masks from type layers, shape layers, and alpha channels to vary the Dither percentage across an image. This technique produces higher-quality results in critical image areas without sacri- ficing file size. (See "Using weighted optimization" on section 428.)

Note: Diffusion dither may cause detectable seams to appear across slice boundaries. Linking slices diffuses the dither pattern across all linked slices, and eliminates the seams.

. Pattern applies a halftone-like square pattern to simulate any colors not in the color table.

. Noise applies a random pattern similar to the Diffusion dither algorithm, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise algorithm.

Transparency and Matte Select a combination of Transparency and Matte options to specify how transparent pixels in the image are optimized:

. To make fully transparent pixels transparent and blend partially transparent pixels with a color, select Transparency and select a matte color.

. To make all pixels with greater than 50% transparency fully transparent and all pixels with 50% or less transparency fully opaque, select Transparency and choose None from the Matte menu.

. To fill fully transparent pixels with the selected color and blend partially transparent pixels with the same color, select a matte color and deselect Transparency.

C D

Examples of transparency and matting:

A. Original image B. Transparency selected with a matte color C. Transparency selected with no matting D. Transparency deselected with a matte color

To select a matte color, click the Matte color swatch and select a color in the color picker. Alternatively, choose an option from the Matte menu. The matte color should match the background color of the Web page.

Transparency Dithering When the Transparency option is selected, you can choose a method for dithering partially transparent pixels:

. No Transparency Dither applies no dither to partially transparent pixels in the image.

. Diffusion Transparency Dither applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels. If you select this algorithm, specify a Dither percentage to control the amount of dithering that is applied to the image.

. Pattern Transparency Dither applies a halftone-like square pattern to partially trans- parent pixels.

. Noise Transparency Dither applies a random pattern similar to the Diffusion algorithm, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise algorithm.

Example of Pattern Transparency dithering

Interlace Select Interlaced to create an image that displays as a low-resolution version in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter and can assure viewers that downloading is in progress. However, inter- lacing also increases file size.

Web Snap Specify a tolerance level for shifting colors to the closest Web palette equiva- lents (and prevent the colors from dithering in a browser). A higher value shifts more colors.

Use Unified Color Table (ImageReady) Select to use the same color table for all rollover states.

Optimization options for JPEG format

JPEG is the standard format for compressing continuous-tone images such as photo- graphs. Optimizing an image as a JPEG format relies on lossy compression, which selec- tively discards data. (See "About file formats" on section 453.)

A B

Optimization panel for JPEG format:

A. File format menu B. Quality Level menu C. Optimize menu

Note: In ImageReady, you can control which options show in the Optimize palette by clicking the Show Options control on the Optimize palette tab. To show all options, choose Show Options from the Optimize palette menu.

Quality Choose an option from the Quality Level menu, or specify a value in the Quality text box. The higher the Quality setting, the more detail the compression algorithm preserves. However, using a high Quality setting results in a larger file size than using a low Quality setting. View the optimized image at several quality settings to determine the best balance of quality and file size.

You can use masks from type layers, shape layers, and alpha channels to vary the quality level across an image. This technique produces higher-quality results in critical image areas without sacrificing file size. (See "Using weighted optimization" on section 428.) Optimized Select Optimized to create an enhanced JPEG with a slightly smaller file size. The Optimized JPEG format is recommended for maximum file compression; however, some older browsers do not support this feature.

Progressive Select Progressive to create an image that displays progressively in a Web browser. The image will display as a series of overlays, enabling viewers to see a low- resolution version of the image before it downloads completely.

Note: Progressive JPEGs require more RAM for viewing, and are not supported by some browsers.

Blur Specify the amount of blur to apply to the image. This option applies an effect identical to that of the Gaussian Blur filter and allows the file to be compressed more, resulting in a smaller file size. A setting of 0.1 to 0.5 is recommended.

ICC Profile Select ICC Profile to preserve the ICC profile of the artwork with the file. ICC profiles are used by some browsers for color correction. (See "Setting up color management" on section 104.)

Matte Specify a fill color for pixels that were transparent in the original image:

. Click the Matte color swatch and select a color in the color picker.

. Choose an option from the Matte menu.

Pixels that were fully transparent in the original image are filled with the selected color, pixels that were partially transparent in the original image are blended with the selected color.

Preserve EXIF Metadata (ImageReady) Select to preserve metadata from a digital camera.

Optimization options for PNG-24 format

PNG-24 is suitable for compressing continuous-tone images; however, it produces much larger files than JPEG format. (See "About file formats" on section 453.)

The advantage of using PNG-24 is that it can preserve up to 256 levels of transparency in an image. To save an image with multilevel transparency, select Transparency. For more information on the Interlaced, Transparency, and Matte options, see "Optimization options for GIF and PNG-8 formats" on section 420.

Optimization options for WBMP format

WBMP format is the standard format for optimizing images for mobile devices, such as cell phones. WBMP supports 1-bit color, which means that WBMP images contain only black and white pixels.

Choose an option from the Dither Algorithm menu to determine the method for converting pixel values to black or white:

. No Dither applies no dither to the image.

. Diffusion applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels. If you select this algorithm, specify a Dither percentage to control the amount of dithering that is applied to the image. You can use masks from type layers, shape layers, and alpha channels to vary the Dither

percentage across an image. This technique produces higher-quality results in critical image areas without sacrificing file size. (See "Using weighted optimization" on

page 428.)

Note: Diffusion dither may cause detectable seams to appear across slice boundaries. Linking slices diffuses the dither pattern across all linked slices, and eliminates the seams.

. Pattern applies a halftone-like square pattern to determine the value of pixels.

. Noise applies a random pattern similar to the Diffusion dithering, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise algorithm.

Saving and resetting optimization settings

You can save optimization settings as a named set and apply the settings to other images. Settings that you save appear in the Settings pop-up menu, together with the predefined named settings. If you edit a named set or a predefined set, the Settings menu displays the term "Unnamed."

In Photoshop, after you optimize an image, you can return to the artboard without losing your settings. When you choose the Save for Web command again, the optimization settings are just as you left them.

To save a named set of optimization settings:

1 Set optimization options as desired, and choose Save Settings from the Optimize pop-up menu (Photoshop) or the Optimize palette menu (ImageReady).

2 Name the settings, and save them in the Presets/Optimized Settings folder inside the

Photoshop program folder.

Note: If you save the settings in a location other than the Presets/Optimized Settings folder, they will not be available from the Settings pop-up menu.

To edit a named set of optimization settings:

1 Choose the named set from the Settings pop-up menu.

2 Edit the optimization settings as desired. The Settings menu will display the term

"Unnamed," since the settings no longer match a named set.

3 Choose Save Settings from the Optimize pop-up menu (Photoshop) or the Optimize palette menu (ImageReady), and save the settings with the name of the original set.

To delete optimization settings:

1 Choose a named set or predefined set of optimization settings from the Settings pop-up menu.

2 Choose Delete Settings from the Settings panel menu.

Note: You cannot restore deleted settings, so use the Delete Settings command with care.

To save the current optimization setting (Photoshop):

Do one of the following:

. To save the settings and close the Save for Web dialog box, click Done.

. To save the settings without closing the Save for Web dialog box, press Alt ( Windows) or

Option (Mac OS), and click Remember.

To reset optimization settings to the last saved version (Photoshop):

Press Alt ( Windows) or Option (Mac OS), and click Reset.

Resizing the image during optimization (Photoshop)

When optimizing an image in the Photoshop Save For Web dialog box, you can resize the image to specified pixel dimensions or to a percentage of the original size.

To change the pixel dimensions of an image during optimization:

1 Click the Image Size tab in the Save For Web dialog box.

2 To maintain the current proportions of pixel width to pixel height, select Constrain

Proportions.

3 Enter values for Width, Height, or Percent.

4 Choose an interpolation method from the Quality pop-up menu:

. Jagged (Nearest Neighbor) for the faster, but less precise, method. This method is recommended for use with illustrations containing non-anti-aliased edges, to preserve hard edges and produce a smaller file.

. Smooth (Bicubic) for the slower, but more precise, method, resulting in smoother tonal gradations.

For more information on interpolation, see "About resampling" on section 66.

5 Click Apply.

Controlling optimization (ImageReady)

By default, Photoshop and ImageReady automatically regenerate the optimized image when you click the Optimized, 2-Up, or 4-Up tab at the top of the document (if you have modified the image since the last optimization), when you change optimization settings with the optimized image displayed, or when you edit the original image.

In ImageReady, you can turn off auto-regeneration so that the last version of the optimized image remains in the image window until you manually reoptimize the image or reactivate auto-regeneration. This feature is useful if you want to edit the image without pausing for reoptimization with each modification. You can also cancel optimization while it's in progress, and preserve the previous image.

To turn Auto Regenerate on or off:

In the Optimize palette, choose Auto Regenerate from the palette menu. A check mark indicates that the option is turned on.

To manually optimize an image:

Choose a method for optimizing:

. Choose Regenerate from the Optimize palette menu.

Note: Manually optimizing an image does not turn auto-regeneration on.

To cancel optimization:

Click the Stop button next to the progress bar at the bottom of the image window.

Setting optimization preferences (ImageReady)

You can set preferences in ImageReady to determine the default optimization settings and the default configuration of panels in 2-Up and 4-Up views.

To set optimization preferences:

1 Do one of the following:

. In Windows and Mac OS 9.x, choose Edit > Preferences > Optimization.

. In Mac OS X, choose ImageReady > Preferences > Optimization.

2 Choose an option in the Default Optimization section:

. Previous Settings to automatically apply the last used optimization settings.

. Auto Selected GIF or JPEG to automatically optimize the image as a GIF or JPEG. ImageReady selects GIF or JPEG based on an analysis of the image.

. Named Setting and select an option from the Named Settings pop-up menu to apply that setting.

3 Under 2-Up Settings or 4-Up Settings, specify settings for the 1st, 2nd, 3rd, and 4th panes (3rd and 4th panes apply to 4-Up view only):

. Original to display the original image in the specified pane. ( This option is available for the first pane only.)

. Current to display the image with current Optimize palette settings in the specified pane. ( This option is available for all panes.)

. Auto to display a smaller optimized version of the image generated automatically by ImageReady, based on the current Optimize palette settings. ( This option is available for the second, third, and fourth panes.)

. Select one of the named settings to display the optimized image with those settings.

(This option is available for the second, third, and fourth panes.)

4 Click OK.

Using weighted optimization

Weighted optimization lets you smoothly vary optimization settings across an image using masks from text layers, shape layers, and alpha channels. This technique produces higher- quality results in critical image areas without sacrificing file size. With weighted optimi- zation, you can produce gradual variations in GIF, PNG-8, and WBMP dithering, lossy GIF settings, and JPEG compression. Weighted optimization also lets you favor colors in selected image areas when you generate a color table.

About masks and weighted optimization

Photoshop and ImageReady automatically generate masks when you create a type layer or a shape layer. You can also manually create masks and store them in alpha channels. When you use a mask to apply optimization settings, the white areas of the mask describe the highest level of image quality, while the black areas for the mask describe the lowest level of image quality. ( The level of optimization in gray areas of the mask decreases by a linear scale.)

Weighted optimization is available for specific settings in the Optimize panel/palette, as indicated by the mask button . To access the weighted optimization dialog box, simply click the mask button.

To create masks for use during optimization:

Do one or more of the following:

. Create a type layer. (See "Creating type" on section 342.)

. Create a shape layer. (See "Creating shape layers" on section 201.)

. (Photoshop) Save a selection as a mask, or create a new alpha channel and use the painting and editing tools to modify it. (See "Storing masks in alpha channels" on section 280.)

. (ImageReady) Use a selection tool to select an area of the image. (See "Making pixel selections" on section 157.) Either save the selection using the Select > Save Selection command, or choose the Save Selection command from the Channel pop-up menu in the weighted optimization dialog box.

Using masks to modify JPEG quality

When you use masks to optimize the range of quality in a JPEG image, white areas of the masks yield the highest quality, and black areas of the masks yield the lowest quality. You can adjust the maximum and minimum level of quality in the Modify Quality Setting dialog box.

To use masks to modify JPEG quality:

1 In the Optimize panel/palette, choose a JPEG setting from the Settings menu, or choose

JPEG from the file format menu.

2 Click the mask button to the right of the Quality text box.

3 Choose which masks to use:

. All Text Layers to use the masks from all text layers in the image.

. All Vector Shape Layers to use the masks from all shape layers in the image.

. Channel to choose an alpha channel from the menu. In ImageReady, you can choose

Save Selection to create a new alpha channel based on the current selection.

4 To preview the results of the weighted optimization, select the Preview option.

5 Define the quality range:

. To set the highest level of quality, drag the right (white) tab on the slider, enter a value in the Maximum text box, or use the arrows to change the current value.

. To set the lowest level of quality, drag the left (black) tab on the slider, enter a value in the Minimum text box, or use the arrows to change the current value.

6 Click OK.

Using masks to modify GIF lossiness

When you use masks to optimize the amount of lossiness (or quality reduction) in a GIF image, white areas of the masks yield the highest quality, and black areas of the masks yield the lowest quality. You can adjust the maximum and minimum level of quality reduction in the Modify Lossiness Setting dialog box.

To use masks to modify GIF lossiness:

1 In the Optimize panel/palette, choose a GIF setting from the Settings menu, or choose

GIF from the file format menu.

2 Click the mask button to the right of the Lossy text box.

3 Choose which masks to use:

. All Text Layers to use the masks from all text layers in the image.

. All Vector Shape Layers to use the masks from all shape layers in the image.

. Channel to choose an alpha channel from the menu. In ImageReady, you can choose

Save Selection to create a new alpha channel based on the current selection.

4 To preview the results of the weighted optimization, select the Preview option.

5 Define the quality range:

. To set the highest level of quality, drag the left (white) tab on the slider, enter a value in the Minimum text box, or use the arrows to change the current value.

. To set the lowest level of quality, drag the right (black) tab on the slider, enter a value in the Maximum text box, or use the arrows to change the current value.

Note: Lossiness is a reduction in quality; therefore, the highest level of image quality is defined by the Minimum value, and the lowest level of image quality is defined by the Maximum value. This is the opposite of the JPEG quality setting.

6 Click OK.

Using masks to modify dithering

When you use masks to optimize the amount of dithering in a GIF, PNG-8, or WBMP image, white areas of the masks yield the most dithering, and black areas of the masks yield the least dithering. You can adjust the maximum and minimum levels of dithering in the Modify Quality Setting dialog box.

To use masks to modify dithering:

1 In the Optimize panel/palette, choose a GIF or PNG-8 setting from the Settings menu, or choose GIF or PNG-8 from the file format menu.

2 Click the mask button to the right of the Dither text box.

3 Choose which masks to use:

. All Text Layers to use the masks from all text layers in the image.

. All Vector Shape Layers to use the masks from all shape layers in the image.

. Channel to choose an alpha from the menu. In ImageReady, you can choose Save

Selection to create a new alpha channel based on the current selection.

4 To preview the results of the weighted optimization, select the Preview option.

5 Define the dithering range:

. To set the highest percentage of dithering, drag the right (white) tab on the slider, enter a value in the Maximum text box, or use the arrows to change the current percentage.

. To set the lowest percentage of dithering, drag the left (black) tab on the slider, enter a value in the Minimum text box, or use the arrows to change the current percentage.

6 Click OK.

Using masks to modify color reduction

When you use mask to optimize the colors in a GIF or PNG-8 image, the white areas of the masks indicate to the color reduction algorithm which pixels are highly important, whereas black areas of the masks indicate which pixels are less important.

To use masks to modify color reduction:

1 In the Optimize panel/palette, choose a GIF or PNG-8 setting from the Settings menu, or choose GIF or PNG-8 from the file format menu.

2 Choose a color reduction algorithm and specify the maximum number of colors.

3 Click the mask button to the right of the Color Reduction Algorithm pop-up menu.

4 Choose which masks to use:

. All Text Layers to use the masks from all text layers in the image.

. All Vector Shape Layers to use the masks from all shape layers in the image.

. Channel to choose an alpha channel from the menu. In ImageReady, you can choose

Save Selection to create a new alpha channel based on the current selection.

5 To preview the results of the weighted optimization, select the Preview option.

6 Click OK.

Optimizing colors in GIF and PNG-8 images

Decreasing the number of colors in an image is a key factor in optimizing GIF and PNG-8 images. A reduced range of colors will often preserve good image quality while dramati- cally reducing the file space required to store extra colors.

The color table gives you precise control over the colors in optimized GIF and PNG-8 images (as well as original images in indexed color mode). With a maximum of 256 colors, you can add and delete colors in the color table, shift selected colors to other colors or to transparency, and lock selected colors to prevent them from being dropped from the palette.

Viewing a color table

The color table for a slice appears in the Color Table panel in the Save for Web dialog box

(Photoshop) or the Color Table palette (ImageReady).

Note: In ImageReady, be careful not to confuse the Color Table palette with the Color palette or Swatches palette. You use the Color Table palette to optimize colors; you use the Color palette and Swatches palette to select colors.

To view the color table for an optimized slice:

1 (ImageReady) Choose Window > Color Table.

2 Select a slice that is optimized in GIF or PNG-8 format. (See "Selecting slices" on section 373.) The color table for the selected slice appears in the Color Table palette.

Note: In ImageReady, the color table for the selected slice will not appear if Auto Regen- erate is off. For more information, see "Controlling optimization (ImageReady)" on

page 426.

If an image has multiple slices, the colors in the color table may vary between slices

(you can link the slices first to prevent this from happening). If you select multiple slices that use different color tables, the color table is empty and its status bar displays the message "Mixed."

Generating a color table

You can change the palette-or set of colors-in the color table by selecting a color reduction option in the Optimize panel/palette. There are three categories of options:

. Dynamic options use a color reduction algorithm to build a palette based on the colors in the image and the number of colors specified in the optimization setting. The colors in the palette are regenerated every time you change or reoptimize the image. Perceptual, Selective, and Adaptive are dynamic options.

. Fixed options use a set palette of colors. In other words, the set of available colors is constant, but the actual colors in the palette will vary depending on the colors in the image. Web, Mac OS, Windows, Black & White, and Grayscale tables are fixed options.

. The Custom option uses a color palette that is created or modified by the user. If you open an existing GIF or PNG-8 file, it will have a custom color palette.

To select a color reduction algorithm:

Choose an option from the Color Reduction Algorithm pop-up menu (below the file format menu in the Optimize panel/palette):

Perceptual Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.

Selective Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.

Adaptive Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.

Web Uses the standard 216-color color table common to the Windows and Mac OS 8-bit

(256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. ( This palette is also called the Web-safe palette.) If your image has fewer colors than the total number specified in the color palette, unused

colors are removed.

Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.

Custom Preserves the current color table as a fixed palette that does not update with changes to the image.

Mac OS Uses the Mac OS system's default 8-bit (256-color) color table, which is based on a uniform sampling of RGB colors. If your image has fewer colors than the total number specified in the color palette, unused colors are removed.

Windows Uses the Windows system's default 8-bit (256-color) color table, which is based on a uniform sampling of RGB colors. If your image has fewer colors than the total number specified in the color palette, unused colors are removed.

Other color tables appear in the menu if you have saved them previously. (See "Loading and saving color tables" on section 437.)

You can use an alpha channel to influence the generation of color tables. (See "Using masks to modify color reduction" on section 430.)

To regenerate a color table (ImageReady):

Choose Rebuild Color Table from the Color Table palette menu. Use this command to generate a new color table when the Auto Regenerate option is off. (See "Controlling optimization (ImageReady)" on section 426.)

Changing the display of the color table

You can sort colors in the color table by hue, luminance, or popularity, making it easier to see an image's color range and locate particular colors. In ImageReady, you can also change the size of the color swatches in the color table.

To sort a color table:

Choose a sorting order from the Color Table palette menu:

. Unsorted. Restores the original sorting order.

. Sort By Hue, or by the location of the color on the standard color wheel (expressed as a degree between 0 to 360). Neutral colors are assigned a hue of 0, and located with the reds.

. Sort By Luminance, or by the lightness or brightness of a color.

. Sort By Popularity, or by the colors' frequency of occurrence in the image.

To change the size of the color swatches (ImageReady):

Choose Small Swatches or Large Swatches from the Color Table palette menu.

Adding new colors to the color table

You can add colors that were left out in building the color table. Adding a color to a dynamic table shifts the color in the palette closest to the new color. Adding a color to a fixed or Custom table adds an additional color to the palette. (See "Generating a color table" on section 431.)

To add a new color:

1 Deselect all colors in the color table (see "Selecting colors" on section 434).

2 Choose a color:

. Click the color selection box in the Save for Web dialog box (Photoshop) or the toolbox

(ImageReady), and choose a color from the color picker.

. Select the eyedropper tool in the Save for Web dialog box (Photoshop) or the toolbox (ImageReady) and click in the image.

. Select the eyedropper tool , click in the image, hold the mouse down, and drag anywhere on the desktop. You can use this option to select a color displayed in another application, such as a color in a Web page displayed in a browser.

. (ImageReady) Select a color from the Color palette or the Swatches palette.

3 Do one of the following:

. Select New Color from the Color Table palette menu.

. (ImageReady) Drag the color from the color selection box, Color palette, or Swatches palette to the Color Table palette.

To switch the color table to a Custom palette, hold down Ctrl ( Windows) or Command

(Mac OS) when you add the new color.

The new color appears in the color table with a small white square in the lower right corner, indicating that the color is locked. (See "Locking colors in the color table" on

page 436.) If the color table is dynamic, the original color is displayed in the upper left and the new color is displayed in the lower right.

Including black and white in a color table

You can add black and white to the color table when the image does not include these colors. Including black and white is useful when preparing files for multimedia authoring applications, such as Adobe After Effects.

To add black or white to the color table for an image:

1 Choose black or white as the foreground color. (See "Choosing foreground and background colors" on section 257.)

2 Add the color to the color table. (See "Adding new colors to the color table" on section 433.)

Selecting colors

You select colors directly in the optimized image or in the color table. In ImageReady, you can select a color from another application, such as a Web page displayed in a browser. To select a color from the optimized image:

1 Select the eyedropper tool in the Save for Web dialog box (Photoshop) or the toolbox (ImageReady).

2 Click a color in the image. A white border appears around that color in the color table. Shift-click to select additional colors.

To select a color from another application (ImageReady):

(ImageReady) Select the eyedropper tool, click in the image, hold the mouse down, and drag anywhere on the desktop. You can use this option to select a color displayed in another application, such as a color in a Web page displayed in a browser.