Dreamweaver

Choose image optimization settings

The Image Preview dialog box has three sections:

  • The Options tab allows you to define which file format to use and set preferences such as color.

  • The File tab allows you to set the scale and size of the image.

  • The Preview panel allows you to see a version of the image with your settings.

Choose the image file’s options in the Options tab

  1. Choose the type of file to use from the Format pop-up menu in the Options tab: JPEG, GIF, or PNG.
  2. (Optional) Choose other image options settings in the Options tab for the type of file format you have chosen.

(Optional) Review your settings in the Image Preview dialog box

  1. In the Image Preview dialog box, choose the Preview option if you want to see what the image looks like with your settings. If performance is an issue, you may want to deselect this option.
  2. Select one of the saved color palette settings from the pop-up menu if you want to use a preset set of options.
  3. Use the pointer tool to grab the previewed image and pan it to see different parts.
  4. Use the crop tool to reduce the image’s size. You may need to first zoom out to see the entire image.
  5. Choose a value from the Zoom pop-up menu to expand or reduce your view of the previewed image. You can also choose the Zoom tool to click to zoom in or to Alt-click (Windows) or Option-click (Macintosh) to zoom out.
  6. You can preview two or four different optimizations by clicking the 2-up or 4-up button at the bottom of the preview panel and choosing different color palettes for each pane.
  7. Animation controls do not apply to Photoshop images.

(Optional) Change the image’s scale or export area options on the File tab

  1. Select the File tab.
  2. Shrink or expand the image in one of the following ways:

    • Specify a scale percentage.

    • Enter absolute pixel values for width or height.

  3. Select Constrain to maintain the image’s original proportions as you rescale it.
  4. Change the shape of the placed image by choosing the Export Area option and doing one of the following:

    • Drag the dotted border around the previewed image as needed. You can drag the image within the borders to move hidden areas into view.

    • Enter pixel coordinates for the image’s boundaries.

Export and save the image

  1. When you have defined all your settings, click OK.
  2. You are prompted to save the file in the default images folder if you defined one for your site or the site’s root folder otherwise. Browse to the location you want and click OK.

To reoptimize, click the Optimize button in the Property inspector and the Image Preview dialog box appears. If the image was derived from Photoshop, the Photoshop image is reimported and you can reapply optimization settings to it. If there is no Photoshop PSD file associated with the image, the web-ready image is displayed.