PDF (adobe.com)

Setting Image Preview dialog box options



    Image Preview dialog box options

    When you create a Smart Object or paste a selection from Photoshop, Dreamweaver displays the Image Preview dialog box. (Dreamweaver also displays this dialog box for any other kind of image if you select the image and click the Edit Image Settings button in the Property inspector.) This dialog box lets you define and preview settings for web-ready images using the right mix of color, compression, and quality.

    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 lets you adjust various settings for optimal web publication. In general, the settings result in a trade-off between quality and file size.
    View full size graphic
    The Image Preview dialog box

    A.
    Options tab

    B.
    File tab

    C.
    Preview panel

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

    The Image Preview dialog box has three sections:

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

    • The File tab lets you set the scale factor and target file size of the image.

    • The Preview panel lets you see a version of the image with your current settings.

    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 are available for your convenience in the Saved Settings pop-up menu.

    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 background of the image. 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.

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

    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. Select one of the saved color palette settings from the pop-up menu if you want to use a preset set of options

    Loss
    Set to 0 by default. Not applicable to 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 any pixel in the palette and then click 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 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 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 background of the image. 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.

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

    (Optional) Preview and adjust images in the Preview panel

    1. In the Image Preview dialog box, select 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 Saved Settings pop-up menu if you want to use a preset set of options.

    3. If your image is larger than the preview area, 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 and click to zoom in; 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.

    Note: The animation controls in the Image Preview dialog box are always disabled for Photoshop images.