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 page 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.

Using the Save for Web dialog box (Photoshop)

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

A B

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:

1Select the slice select tool .

2Click 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 page 378.)

To link slices:

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

2Choose 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.