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 ...
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.