• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 2. Working with Graphics > Resizing and Refreshing Graphics

Resizing and Refreshing Graphics

When you import a graphic, the width and height of the image are shown in the Property inspector and placed into the code automatically, giving the browser the information it needs to define the layout of the page. This important option can make a difference in the speed of loading your graphics. You can change these numbers in Dreamweaver.

In invent_lens.html, click the invlens_header.gif image to select it. In the Property inspector, change the width to 220 pixels and the height to 38 pixels.

You are using the width and height tags to make this graphic appear in smaller dimensions without making the actual graphic file smaller. Notice that the file size of the selected image that is displayed in the Property inspector does not change.

Click one of the selection handles—the black squares—on the border. Drag to resize the image and make it larger than the original size.

The width and height specifications update automatically. Notice that the new dimensions you have set are displayed in bold. This bold formatting is an indicator that the graphic has been resized. At times, you may resize a graphic accidentally, and the bold numbers will clue you to that change. You can also change the size by changing the numbers in the Width and Height text fields.


Hold down the Shift key while you drag the image's selection handles to constrain the proportions of the image.

Notice that when you scaled the image larger, the image quality diminished. Images display in browsers at screen resolution, which is 72 dpi. This resolution is not high enough to display an image with a specified size larger than the actual size of the graphic. You could scale the image smaller, and it will look OK, but you won't have changed the file size, so the graphic will take just as long to download. When you adjust the size of an image within Dreamweaver, you are only changing the size at which it displays in the browser—you are not resizing the actual graphic itself. Always adjust the image size in your image-editing software (such as Macromedia Fireworks or Adobe Photoshop) to ensure that you have the smallest file size possible.


The Property inspector for images features an Edit button in the top half and right side of the panel. This option provides a quick way to open and modify your images in an external image editor. To choose your preferred editor, choose Edit > Preferences and select File Types/Editors in the Category list of the Preferences dialog box. You can use this dialog box to assign different editors according to the file extensions. Production with Dreamweaver MX, Flash, and Fireworks can be integrated through what is known as roundtrip editing, a feature that causes file updates to be transferred between the programs.

In the Property inspector, click Reset Size on the right side of the panel.

The image resets to the original size of the graphic. Notice that the width and height numbers revert to plain text, indicating that the image is set at the original size.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint