Insert and edit images in Dreamweaver

Place the insertion point where you want the image to appear in the Document window and do one of the following:

• In the Insert panel, select HTML from the drop-down list. Click Image. Double-click or drag the icon to the document window (or to the Code view window if you are working using code).

• Select Insert > Image.

• Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3.

• Drag an image from the Files panel to the desired location in the Document window; then skip to step 3.

• Drag an image from the desktop to the desired location in the Document window; then skip to step 3.

• In Live View, drag an image from the Extract panel or the Layers tab. Drop the element at the top, bottom, right or left of an element, based on Live Guides. Alternatively, you can drop the element at a precise place in the document structure by clicking </> and using Element Quick View.

Browse to select the image or content source that you want to insert.

If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

Click OK. 

To view the Property Inspector for a selected image, click the image and select Window > Properties.

In the text box below the thumbnail image, enter a name. You can use this name to refer to the image when using a Dreamweaver behavior such as Swap Image, or when using a scripting language such as JavaScript or VBScript.

The width and height of the image, in pixels. Dreamweaver automatically updates these text boxes with the image’s original dimensions when you insert an image in a page.

If you set W and H values that do not correspond to the actual width and height of the image, the image is not displayed properly in a browser. To restore the original values, click the W and H text box labels, or the Reset image size button that appears to the right of the W and H text boxes.

Specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.

Specifies a hyperlink for the image. Drag the Point-To-File icon to a file in the Files panel. Click the folder icon to browse to a document on your site, or manually type the URL.

Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.

Allow you to label and create a client-side image map.

Target     Specifies the frame or window in which the linked page loads. This option is not available when the image is not linked to another file. The names of all the frames in the current frameset appear in the Target list. You can also choose from the following reserved target names:

• _blank loads the linked file into a new, unnamed browser window.
• _new loads the linked file into a new browser window.
•  _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
• _self loads the linked file into the same frame or window as the link. This target is the default target. You do not need to specify this value explicitly.
•  _top loads the linked file into the full browser window, thereby removing all frames.

Starts the image editor you specified in External Editors preferences and opens the selected image.

Opens the Image Optimization dialog box and lets you optimize the image.

When the image on the Dreamweaver page is out of sync with the original Photoshop file, Dreamweaver detects that the original file has been updated. The application displays one of the Smart Object icon’s arrows in red. When you select the web image in Design view and click the Update from Original button in the Property Inspector, the image updates automatically. The updated image reflects the changes that you made to the original Photoshop file.

Trims the size of an image, removing unwanted areas from the selected image.

Resamples a resized image, improving its picture quality at its new size and shape.

Adjusts the brightness and contrast settings of an image.

Adjusts the sharpness of an image.

In the Document window, click the image or select the image tag in code.

Do one of the following to enter a name or a brief description for the image in less than 50 characters in to the Alternate Text box. The screen reader reads the information you enter here.  

• Edit the appropriate image attributes in Code view.

• Edit image attributes in Live View using the Quick Property Inspector.

• Edit the Alt value in the Property inspector.

Resize handles appear at the bottom and right sides of the element and in the lower-right corner. If resize handles do not appear, click outside the element and then reselect it. Alternatively, you can click the appropriate tag in the tag selector to select the element.

• To adjust the width of the element, drag the selection handle on the right side.

• To adjust the height of the element, drag the bottom selection handle.

• To adjust the width and the height of the element at the same time, drag the corner selection handle.

• To preserve the element’s proportions (its width-to-height ratio) as you adjust its dimensions, Shift-drag the corner selection handle.

• To adjust the width and height of an element to a specific size (for example, 1 x 1 pixel), use the Property Inspector. Enter a numeric value in the W and H fields. You can visually resize elements to a minimum of 8 x 8 pixels.

To return a resized element to its original dimensions, in the Property Inspector, delete the values in the W and H fields. You can also click the Reset Size button in the image Property Inspector.

Resize the image as described in the section Resize an image.

Click the Resample button in the image Property inspector.

Select Edit > Image. You can set the following Dreamweaver image-editing features:

Select a preset, specify a file format, and specify the level of quality. As you move the slider across the quality levels, you can see the file size of the image in the dialog box. Click OK once done.

Adds or subtracts pixels from a resized JPEG and GIF image files to match the appearance of the original image as closely as possible. Resampling an image reduces its file size and improves download performance.

When you resize an image in Dreamweaver, you can resample it to accommodate its new dimensions. When a bitmap object is resampled, pixels are added to or removed from the image to make it larger or smaller. Resampling an image to a higher resolution typically causes little loss of quality. Resampling to a lower resolution, however, always causes data loss and usually a drop in quality.

Edit images by reducing the area of the image. You can use crop to place more emphasis on the subject of the image, and remove unwanted aspects surrounding the center of interest.

Modifies the contrast or brightness of pixels in an image. Brightness and Contrast affects the highlights, shadows, and midtones of an image. You typically use Brightness/Contrast when correcting images that are too dark or too light.

Adjusts the focus of an image by increasing the contrast of edges found within the image. When you scan an image, or take a digital photo, the default action of most image capturing software is to soften the edges of the objects in the image. The scanning prevents extremely fine details from becoming lost in the pixels from which digital images are composed. However, to bring out the details in digital image files, it is often necessary to sharpen the image. Using the Sharpen option increases the edge contrast, making the image appear sharper.

Open the page containing the image you want to crop, select the image, and do one of the following:

• Click the Crop Tool icon  in the image Property inspector.

• Select Edit > Image > Crop.

• Crop handles appear around the selected image.

A dialog box informs you that the image file you are cropping will be changed on disk. Click OK.

Every pixel in the selected bitmap outside the bounding box is removed, but other objects in the image remain.

Preview the image and ensure that it meets your expectations. If not, select Edit > Undo Crop to revert to the original image.

Open the page containing the image that you want to optimize. Select the image, and do one of the following:

• Click the Edit Image Settings button in the image Property Inspector.

• Select Edit > Image > Optimize.

Make your edits in the Image Optimization dialog box and click OK.

• Click the Sharpen button in the image Property inspector.

• Select Edit > Image > Sharpen.

To specify the degree of sharpening Dreamweaver applies to the image, drag the slider control. You can also enter a value between from 0 through 10 in the text box. As you adjust the sharpness of the image using the Sharpen dialog box, you can preview the change to the image.

Save your changes by selecting File > Save, or revert to the original image by selecting Edit > Undo Sharpen.

• Click the Brightness and Contrast button in the image Property Inspector.

• Select Edit > Image > Brightness/Contrast.

• In the Insert panel, select HTML from the drop-down list. Select Rollover Image, from the list of options.

• Select Insert > HTML > Rollover Image.

In the Insert Rollover Image dialog box, select the images and set the properties for the rollover. You can set the following properties:

The name of the rollover image.

The image you want to display when the page loads. Enter the path in the text box, or click Browse and select the image.

The image you want to display when the pointer rolls over the original image. Enter the path or click Browse to select the image.

Preloads the images in the browser’s cache so no delay occurs when the user rolls the pointer over the image.

(Optional) Text to describe the image for viewers using a text-only browser.

The file that you want to open when a user clicks the rollover image. Enter the path or click Browse and select the file.

To preview the rollover image, select File > Real-time Preview, or press F12.

To open an external editor, do one of the following:

• Double-click the image that you want to edit.

• Right-click (Windows) or Control‑click (Macintosh) the image that you want to edit. Then, click Edit With > Browse and select an editor.

• Select the image that you want to edit, and click Edit in the Property Inspector.

• Double-click the image file in the Files panel to start the primary image editor. If you haven’t specified an image editor, Dreamweaver starts the default editor for the file type.

If you don’t see an updated image after returning to the Dreamweaver window, select the image and then click the Refresh button in the Property Inspector.

Select Edit > Preferences (Windows) or Dreamweaver > Preferences (macOS), and select File Types/Editors from the Category list on the left pane.

In the Extensions list, select the extension for which you want to set an external editor.

In the Select External Editor dialog box, browse to the application that you want to start as an editor for this file type.

In the Preferences dialog box, click Make Primary if you want this editor to be the primary editor for this file type.

Dreamweaver automatically uses the primary editor when you edit this image type. You can select the other listed editors from the context menu for the image in the Document window.

Select Edit > Preferences (Windows) or Dreamweaver > Preferences (macOS), and select File Types/Editors from the Category list on the left pane.

In the File Types/Editors Preferences dialog box, click the Add (+) button above the Extensions list.

A text box appears in the Extensions list.

Select the extension of the file type for which you want to set an editor.

To select an external editor for the file type, click the Add (+) button above the Editors list.

In the dialog box that appears, select the application that you want to use to edit this image type.

Click Make Primary if you want this editor to be the primary editor for the image type.

Select Edit > Preferences (Windows) or Dreamweaver > Preferences (macOS), and select File Types/Editors from the Category list on the left pane.

In the File Types/Editors preferences dialog box, in the Extensions list select the file type you are changing to view the existing editors.

In the Editors list, select the editor you want to affect, then do one of the following:

• To add or remove an editor, click the Add (+) or Delete (–) buttons above the Editors list.

• To change which editor starts by default for editing, click the Make Primary button.