In Dreamweaver Design View, position your cursor where you’d like to insert an image.Choose Insert Image, then browse to your original Photoshop document (.psd), select the file, then click OK.In the Image Preview dialog box, on the Options tab, select your preferred image format from the Format drop-down list (e.g., PNG 24), then click OK.In the Save Web Image dialog box, navigate to your desired folder, confirm the File name is displayed with the selected file format (e.g., .png), then click Save.

In the Image Tag Accessibility Attributes dialog box, add the Alternate text for the image, then click OK.

Observe that a Smart Object Icon appears at the top-left corner of the image, indicating that the image is inserted as a Photoshop Smart Object. Save your file.

Now, if you decide later to edit the original Photoshop image, the image on the web page will also be modified. Here’s how to do it!

Edit the Photoshop image as you like and Save the file.

In the Dreamweaver document window for the web page that has the image inserted, observe that the Smart Object Icon on the image now displays a red arrow, indicating that the image has been edited.

In the Dreamweaver Property Inspector, click the Update from Original button (underneath the Alt text box).

Observe that the image is updated and the Smart Object displays green arrows.