Web Design in a Nutshell, 3rd Edition

Specifying Width and Height

Although src and alt are the only required attributes in the img element, width and height are often used because they speed up page display. The width and height attributes simply indicate the dimension of the image in pixels, such as:

<img src="star.gif" alt=""width="50" height="50" />

With this information, the browser can lay out the page before the images download.

Tip

CSS width and height properties are preferred to the presentational attributes, and will also ensure that the page can be assembled before the images arrive.

Without width and height values, the page may be redrawn several times, first without images in place, and again each time new images arrive. It is worthwhile to take the time to include accurate width and height information in every img element.

If the width and height values specified are different than the actual dimensions of the image, the browser resizes the image to match the specified dimensions. If you specify a percentage value for width and height, some later browsers resize the image to the desired proportions.

Although this effect may be convenient and prevent an extra trip to the image editor, in some browsers, it just results in a pixelated, poor quality image, as shown in Figure 12-3.

<img src="star.gif"alt="" width="50" height="50" />
<img src="star.gif" alt="" width="200" height="50" />

Figure 12-3. Resizing an image with ...