• 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 insert a graphic, the width and height of the image are added in the property inspector automatically, giving the browser the information it needs to define the layout of the page. This important information can make a difference in the speed of loading your graphics. You can change these numbers in Dreamweaver.

In travel_log.html, click the banner_head.gif image to select it. In the property inspector, change the width to 30 pixels and the height to 200 pixels.

You are using the width and height tags to create a special effect for this graphic without making the actual graphic larger or smaller. The file size of the selected image is displayed in the property inspector.

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

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


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

Notice that when you scaled the image larger, the image quality diminished. When you resize a rasterized image (such as a GIF or a JPEG) the blocks of color that make up the image simply become larger, and thus, more visible as blocks. 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 changing the size only at which it displays in the browser—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.

In the property inspector, click Reset Size in the bottom-right corner.

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