When preparing images for the web and other online media, you often need to compromise between image display quality and the file size of the image.

You use the Save For Web & Devices dialog box (File > Save For Web & Devices) to select optimization options and preview optimized artwork.

Save For Web & Devices dialog box (Photoshop version)

A.

Display options

B.

Toolbox

C.

Optimize pop‑up menu

D.

Color Table pop‑up menu

E.

Animation controls (Photoshop only)

F.

Zoom text box

G.

Preview In Browser menu

H.

Original image

I.

Optimized image

1. Choose File > Save For Web & Devices.
2. Click a tab at the top of the dialog box to select a display option: Optimized, 2‑Up, or 4‑Up. If you select 4‑Up, click the preview you want to optimize.
3. (Optional) If your image contains multiple slices, select one or more slices you want to optimize.
4. Select a preset optimization setting from the Preset menu, or set individual optimization options. The available options change depending on the file format you select.
   If you’re working in 4‑Up mode, choose Repopulate Views from the Optimize menu to automatically generate lower-quality versions of the image after you change the optimization settings.
5. Fine-tune the optimization settings until you are satisfied with the balance of image quality and file size. If your image contains multiple slices, be sure to optimize all the slices.
   To restore an optimized preview to the original version, select it and then choose Original from the Preset menu.
6. If optimizing an image with an embedded color profile other than sRGB, you should convert the image’s colors to sRGB before you save the image for use on the web. This insures that the colors you see in the optimized image will look the same in different web browsers. The Convert to sRGB option is selected by default.
7. (Photoshop only) From the Metadata menu, choose what metadata to save with the optimized file. (Choose File > File Info to view or enter document metadata.) Metadata is fully supported by JPEG file format, and partially supported by GIF and PNG file formats.
   Note: The output metadata conforms to Metadata Working Group standards, so some JPEG metadata is stored in the EXIF and IIM formats, rather than XMP.

   None

   No metadata saved (except for the EXIF copyright notice in JPEG files). Produces the smallest file size.

   Copyright

   Saves copyright notice, rights usage terms, copyright status, and copyright info URL.

   Copyright and Contact Info

   Saves all copyright information, plus the following information: creator, creator job title, e-mail(s), address, city, state/province, postal code, country, telephone(s), and website(s).

   All Except Camera Info

   Saves all metadata, except EXIF data about camera settings such as shutter speed, date and time, focal length, exposure compensation, metering pattern, and flash use.

   All

   Saves all metadata in the file.

8. Click Save.
9. In the Save Optimized As dialog box, do the following, and then click Save:

   • Enter a file name, and select a location for the resulting file or files.

   • Select a Format option to specify what kind of files you want to save: an HTML file and image files, only image files, or only an HTML file.

   • (Optional) Set output settings for HTML and image files.

   • If your image contains multiple slices, select an option for saving slices from the Slices menu: All Slices or Selected Slices.

   To reset optimization settings to the last saved version, press Alt (Windows) or Option (Mac OS), and click Reset. To keep the same settings the next time you open the Save For Web & Devices dialog box, press Alt/Option and click Remember.

   For a video on saving files for the web in Illustrator, see www.adobe.com/go/vid0063.

1. Set optimization options as desired, and chooseSave Settings from the Optimize palette menu.
2. Name the settings, and save them in the appropriate folder:

   Photoshop

   (Windows XP) Document and Settings\[Username]\Application Data\Adobe\AdobePhotoshop CS5\Optimized Settings

   (Windows Vista) Users\[Username]\AppData\Roaming\Adobe\Adobe Photoshop CS5\Optimized Settings

   (Mac OS) Users/[Username]/Library/Preferences/AdobePhotoshop CS5 Settings/Optimized Settings

   Illustrator

   (Windows XP) Document and Settings\[Username]\Application Data\Adobe\AdobeIllustrator CS5 Settings\[Language]\Save for Web Settings\Optimize

   (Windows Vista) Users\[Username]\AppData\Roaming\Adobe\AdobeIllustrator CS5 Settings\[Language]\Save for Web Settings\Optimize

   (Mac OS) Users/[Username]/Library/ApplicationSupport/Adobe/Adobe Illustrator CS5/[Language]/Save for Web Settings/Optimize

   Note: If you save the settings in a another location, they will not be available from the Preset pop‑up menu.
3. To delete a preset, select the preset from Preset menu, and select Delete Settings from the Optimize menu.

• To show or hide all slices, click the Toggle Slices Visibility button .
• To select slices in the Save For Web & Devices dialog box, choose the Slice Select tool , and then click a slice to select it. Shift-click or Shift-drag to select multiple slices.
  Note: In the Save For Web & Devices 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 & Devices dialog box, select the Slice Select tool, and double-click a slice.
• To link slices, select two or more slices and choose Link Slices from the Optimize pop‑up menu  (to the right of the Preset menu). The link icon  appears on the linked slices.
• 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.

1. Choose File > Save For Web & Devices.
2. Click a tab at the top of the Save For Web & Devices dialog box to select a display option: Optimized, 2‑Up, or 4‑Up. If you select 4‑Up, select the preview you want to optimize.
3. (Optional) Select the slices you want to optimize and the file format you want to use.
4. Select Optimize To File Size from the Optimize menu (to the right of the Preset menu).
5. Enter the desired file size.
6. Select a Start With option:

   Current Settings

   Uses the current file format.

   Auto Select GIF/JPEG

   Automatically selects the optimal format depending on image content.

7. Select a Use option to specify whether you want to apply the specified file size to current slice only, to each slice in the image, or to all slices. Click OK.

1. Click the Image Size tab in the Save For Web & Devices dialog box.
2. Set any of the additional options:

   Constrain Proportions

   Maintains the current proportions of pixel width to pixel height.

   Quality

   (Photoshop only) Specifies the interpolation method. Bicubic Sharper generally produces better results when you are reducing image size.

   Anti-Alias

   (Illustrator only) Removes jagged edges in the artwork by applying anti-aliasing.

   Clip To Artboard

   (Illustrator only) Clips the artwork size to match the document’s Artboard boundary. Any artwork outside the Artboard boundary will be deleted.

   Note: None of the features in the Image Size palette are available for the SWF and SVG file formats except Clip To Artboard.

3. Enter new pixel dimensions or specify a percentage by which to resize the image, and click Apply.

1. Click the Layers tab in the Save For Web & Devices dialog box.
2. Select Export As CSS Layers.
3. Select a layer from the Layer pop‑up menu, and set the following options as desired:

   Visible

   Creates a visible CSS layer in the resulting HTML file.

   Hidden

   Creates a hidden CSS layer in the resulting HTML file.

   CSS layers are the same as GoLive layers. Using Adobe GoLive, you can animate a CSS layer and use built‑in JavaScript actions to create interactive effects.

• To preview an image in your default web browser, click the browser icon at the bottom of the Save For Web & Devices dialog box.
• To select a different browser, select Other from the browser pop‑up menu (next to the browser icon).
• To add, edit, or remove a browser in the browser pop‑up menu, select Edit List from the browser pop‑up menu. In the Browsers dialog box, you can find all browsers on your computer and set the default browser to preview your image.

1. Choose File > Save For Web & Devices.
2. Click the Optimized tab at the top of the Save For Web& Devices dialog box.
3. Choose JPEG Low from the Preset menu.
4. In the Image Size area, click the chainlink icon to the right of the W and H boxes to retain image proportions. Then enter a width.

   For e‑mail, 400 pixels is a good size. Use a smaller size if your recipient has a slow Internet connection.

5. Click Save. Enter a file name and location in which to save the file. Under Format, make sure that Images Only is selected. Again click Save.

   Now you are ready to e‑mail the file. In some e‑mail programs, you can drag the file into the body of the message. In other programs, you use the Attach or Insert command.