image height and width

These two attributes are fairly straightforward in themselves, but there are some related issues worth discussing. Therefore, they've been given their own page.

Both attributes take a numeric value that represents a number of pixels on the screen. So, the image below has been produced by the tag which follows it:

<img src="trees.jpg" alt="Image: trees at dusk" height="150" width="300" />

You might be thinking that's a bit superfluous. Aren't image heights and widths already defined, simply by the size of the actual image file? Well, yes, that's true. But that doesn't mean you always want to go with that pre-defined size. If I use the same tag as above, but without the height and width attributes, the result is as follows:

That's the image's "natural state". A smaller (or indeed larger) image might simply look better on the screen. It might be necessary to change the size in order that the image fit in a table cell (see table size for more details). Or, you might want to distort the image, by stretching it in one dimension relative to the other, like this:

Finally, defining height and width can help a browser lay out a page before the images are downloaded. This is a rather technical point, but it's sometimes better for your readers to not see text "jumping around" while images are being loaded and fitted into place. This particularly applies to pages with a lot of images. If you define these two attributes in all your images the browser will know where to put the text before it loads the images. Although it makes no difference to the functionality of a page, it can make it a slightly friendlier experience to read.

Back to the top

Back to the menu for lesson 5