Description

An image doesn’t require a height attribute, but it has its uses. The main use for specifying the height (and 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 height (and 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.

If the 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 "30", "100", and "200" pixel widths, respectively) in Figure 1.

Figure 1. Rescaling an image by setting the height attribute alone

If, however, the correct width attribute is set, but the height differs, the image will appear stretched, as shown in Figure 2.

Figure 2. Stretched images resulting from the application of an incorrect height attribute

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.

Value

This attribute takes a number representing the height of the image in pixels, or as a percentage of the containing element.

Compatibility

It causes no compatibility issues, and has excellent support across all tested browsers.