An image doesn’t require a
height attribute, but it has its uses. The main use
for specifying the
width) is to improve the user experience while a page is
loading. If the dimensions are specified in the markup, as the page is
loaded, the space required for the images is reserved by the browser;
without this information, the browser doesn’t know how big the image is,
and can’t allocate the appropriate space to it. On a slow-loading page,
the effect can be quite disturbing, as content is constantly reflowed as
each new image appears on the page.
The downside of specifying a
width) is that
if you later decide to update an image that’s used site-wide—for example,
a company logo—you’d need to change the dimension attributes for each page
of the site. Depending on how your web site is managed (manually, in a
template-driven way, via a CMS, or through server-side includes), this may
either be a minor niggle, or a real issue for you. It’s a case of weighing
up the pros and cons in each situation.
height attribute is set by itself, but no
width attribute is set, the image will be rescaled
proportionally, as shown by the three images (set to
"200" pixel widths, respectively) in Figure 1.
If, however, the correct
attribute is set, but the
height differs, the image
will appear stretched, as shown in Figure 2.
Note that it’s not a good practice to rescale images in your markup. If you need an image with dimensions of 200×200 pixels, don’t drop in an image of 1000×1000 pixels and use HTML attributes to rescale it. Not only does this approach force the user to download a large image that’s rendered at a much smaller size on the web page, but the result is usually quite untidy. The correct method is to rescale the image in a graphics application first, and then place the correctly sized image on the page.
height attribute is set to
<img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina" height="30"/>
This attribute takes a number representing the height of the image in pixels, or as a percentage of the containing element.
It causes no compatibility issues, and has excellent support across all tested browsers.