Scaling an Image

You can change the display size of an image just by specifying a new height and width in pixels. This is an easy way to have large images on your page without long loading times. Beware, though, if you enlarge your pictures too much, they'll be grainy and ugly.

Tips

You can also use a percentage value in step 2, with respect to the browser window (not the original image size).
Using the width and height attributes is a quick and dirty way to change how the image is displayed on a Web page, especially if you don't have an image editor (or don't have the time or inclination to use it). However, since the file itself is not changed, the visitor always gets cheated. Reduced images take longer to view than images that are really that size; enlarged images appear grainy. A better solution is to use your image editor to change the size of the image (see page 95).
You can set just the width or just the height and have the browser adjust the other value proportionally.
You can also use styles to control the width and height of elements. For more information, consult Setting the Height or Width for an Element on page 174.

Scaling an Image

Figure 5.17. At its original size of 396 by 439 pixels, the image is way too big on the page.

Figure 5.18. Don't specify pixels with the numbers. Just use bare numbers.

Figure 5.19. The image appears at half its original size. It's important to note, however, that it takes the same time to load as before. After all, it's the same file.