15.3. Resizing Images Ideally, images come onto your page at the perfect size. You may not know what this perfect size is, though, until you see it in the context of your page. As you'll recall from Chapter 5, if an image is too large, you can always scale it down and then resample it at its new dimensions. | BEHIND THE SCENES | You can also increase the size of an image, but this is generally less effective than decreasing the size. Bitmap images such as GIF, PNG, or JPEG contain set amounts of visual information. In other words, there are a specific number of pixels. When you scale an image down, you lose some of the existing information by jettisoning some of the pixels, but Dreamweaver can usually compensate pretty well, and the image looks more or less like it did at the larger size, just smaller. When you scale an image up, however, Dreamweaver has to add visual information. It literally increases the pixel count of the image, usually by duplicating neighboring pixels, so you're not really gaining anything new. In fact, you're probably making the image worse, because you're multiplying whatever graininess already exists in the smaller form. Increasing the size modestly is sometimes alright, depending upon the image, but don't count on taking a small icon image and blowing it up to the full size of your page. |
Take the image in Figure 15-13. It's too large for its surroundings. It needs to be smaller. You can achieve image reduction in one of two ways: Select the image and go to the Property Inspector. The W and H fields represent the width and height of the image. Type smaller values into these fields. To scale the image proportionately, you have to work out the math on your own. Select the image, and then drag one of the square handles. Drag the handle along the bottom of the image to scale the height. Drag the handle along the right side of the image to scale the width. Drag the handle in the lower-right corner to scale both width and height. To scale the image proportionately, hold down the Shift key while you drag.
Figure 15-13. This giant image needs to be smaller | TIP | To revert to the original dimensions of the image, click the curved-arrow icon that appears next to the W and H fields on the Property Inspector. Please note that once you resample the image, its new dimensions are its original dimensions, so make sure you really like the new size before you commit to it. |
Once you scale the image to a serviceable size, be sure to click the Resample button on the Property Inspector, as in Figure 15-14. As of now, the rescaled image only looks smaller. The image file itself retains its original dimensions. When you click the Resample button, Dreamweaver saves the image at its new size, but not before warning you that it's a permanent procedure. Figure 15-14. The Resample button Dreamweaver comes with a few other handy image-editing tools, listed in Table 15-1. Table 15-1. Dreamweaver image-editing toolsProperty Inspector button | Icon | Description |
|---|
Crop |
| Cuts away a portion of the selected image without resizing it | Resample |
| Optimizes and saves the selected image at its new dimensions | Brightness and Contrast |
| Adjusts the brightness and contrast of the selected image | Sharpness |
| Increases the sharpness or clarity of the selected image |
|