Dreamweaver

Optimization settings

When you insert an image file or copy part of an image from Photoshop, Dreamweaver displays the Image Preview dialog box to allow you to define and preview settings for a web-ready version of your image that has the right mix of color, compression, and quality:

  • File format, including image compression options

  • (Optional) Color palette adjustments to eliminate colors and reduce file size

  • (Optional) Scale or export area for the image

A web-ready image is one that can be displayed by all modern web browsers and looks the same no matter what system or browser the viewer is using. When you insert a Photoshop image, the Image Preview dialog box allows you to adjust various settings for optimal web publication. In general, the settings result in a trade-off between quality and file size.


Note: Whatever settings you select only affect the exported version of the image file. The original Photoshop PSD file always remains untouched.

Many image options are available in the Options tab and they vary depending on the file format you choose. Several sets of GIF and JPEG image options available for your convenience in the Saved Settings pop-up menu of the Image Preview dialog box.

JPEG image options

You can optimize a JPEG image by setting its compression and smoothing options. You cannot edit its color palette.

Quality
Use the slider to increase or decrease the quality of the image. Better quality results in a larger file.

Smoothing
Allows you to increase the smoothing as needed. Lower quality images may require a higher value.

Progressive Browser Display
Displays an image initially at low resolution and progressively increases the resolution during download. Not selected by default.

Sharpen Color Edges
Allows you to get a higher quality image.

Matte
Allows you to set the image’s background. You can maintain the transparency of a 32-bpc (bits per channel) PNG by clicking the transparency icon in the Matte dialog box. You can also use Matte to anti-alias soft-edged objects that lie directly above the canvas by matching the matte color to the target background.

Optimize to Size
Specifies the image size, in kilobytes. For 8-bpc images, the wizard attempts to achieve the requested file size by adjusting the number of colors or dithering.

GIF and PNG image options

In the Options tab, you can set a transparency value for individual colors in GIF and 8-bpc PNG images so that the background of the web page is visible through areas with those colors. Do this by adjusting the color palette on the left of the Options tab. PNG images that have 32-bpc format automatically contain transparency, though you won’t see a transparency option for 32-bpc PNGs in the Optimize panel.

Palette
Set to Adaptive by default.

Loss
Set to 0 by default. Not applicable to 8-bpc PNG images.

Dither
Approximates colors not in the current palette by alternating similar-colored pixels so that they appear to blend to the missing color. Dithering is especially helpful when exporting images with complex blends or gradients, or when exporting photographic images to an 8-bpc graphic format such as GIF. Not selected by default.
Note: Dithering can greatly increase file size.

Number Of Colors List
Set to 256 by default. The number of colors is dependent on the current behavior of the palette. For example, the "Web 216" palette only displays 216 colors.

Color Palette
The display of colors varies depending on the selected palette behavior and maximum number of colors.

Palette Tools
Click on any pixel in the palette and then click on these icons to change, add, or delete color, or to make a color transparent, web safe, or locked.

Select Transparency Color Icons
These buttons allow you to select, add, or remove a palette color. For example, if you choose the Select Transparency Color option, you can click on any pixel in the palette or on a point of color in the preview panel to render it transparent.

Transparency Pop-Up Menu
Allows you to set index, alpha, or no transparency. A gray-and-white checkerboard on document previews denotes transparent areas. To see how your choices affect the image, choose 2-up or 4-up in the image preview and click on an image other than the original.
Index
Use index transparency when exporting GIF images that contain transparent areas. With index transparency, you set specific colors to be transparent upon export. Index transparency turns on or turns off pixels with specific color values.

Alpha
Use alpha transparency when exporting 8-bpc PNG images that contain transparent areas. Alpha transparency allows gradient transparency and semi-opaque pixels.

Matte
Lets you set the image’s background. You can maintain the transparency of a 32-bpc PNG by clicking the transparency icon in the Matte dialog box. You can also use Matte to anti-alias soft-edged objects that lie directly above the canvas by matching the matte color to the target background.

Remove Unused Colors
Reduces file size by removing colors not used in the image.

Interlaced Browser Display
Displays an interlaced image initially at low resolution and progressively increases to full resolution during download. Not selected by default.

Optimize To Size
Lets you specify a size, in kilobytes, for the image. For 8-bpc images, the wizard attempts to achieve the requested file size by adjusting the number of colors or dithering.

Saved settings

Dreamweaver provides several option settings for your convenience. Depending on the saved settings you choose, the file-type-specific image options described above may change.

GIF Web 216
Forces all colors to web-safe colors. The color palette contains up to 216 colors.

GIF Websnap 256
Converts web-unsafe colors to their closest web-safe color. The color palette contains up to a maximum of 256 colors.

GIF Websnap 128
Converts web-unsafe colors to their closest web-safe color. The color palette contains up to 128 colors.

GIF Adaptive 256
A color palette that contains only the actual colors used in the graphic. The color palette contains up to a maximum of 256 colors.

JPEG Better Quality
Sets quality to 80 and smoothing to 0, resulting in a high-quality but larger graphic..

JPEG Smaller File
Sets quality to 60 and smoothing to 2, resulting in a graphic less than half the size of a Better Quality JPEG but with reduced quality.

Animated GIF Websnap 128
Sets the file format to Animated GIF and converts web-unsafe colors to their closest web-safe colors. The color palette contains up to 128 colors.