Attributes for `<IMG ...>`
`WIDTH = "width expression"`
`HEIGHT = "height expression"`

[ Are WIDTH and HEIGHT Required? ] [ Not the Actual Dimensions ] [ WIDTH and HEIGHT as Percentages ] [ WIDTH or HEIGHT -- Not Both ]

WIDTH and HEIGHT tell the browser the dimensions of the image. The browser can use this information to reserve space for the image as it contructs the page, even though the image has not downloaded yet. For example, this tag tells the browser that the image is 105 pixels wide and 97 pixels tall.

this code produces this

<IMG SRC="starflower.gif" WIDTH=105 HEIGHT=97 ALT="Starflower">

Are `WIDTH` and `HEIGHT` Required?

There is a common misperception that WIDTH and HEIGHT are required. In fact they are not. The official specifications say nothing about them being required. Furthermore, WIDTH and HEIGHT detract from the appearance of the page in many situations. The problem is that if the image is never downloaded (which is quite common -- many people surf without images) then most browsers will still adhere to the dimension given in WIDTH and HEIGHT, even if these dimensions are too small to display the ALT text. (Many web designers consider this a serious weakness.) If WIDTH and HEIGHT are not specified, the browser will render the images to fit the ALT text. Compare these pictures of how Netscape renders a series of buttons which have the dimensions specified with how they are rendered without the dimensions specified:

With WIDTH and HEIGHT
Without WIDTH and HEIGHT

WIDTH and HEIGHT have their place. They are useful if the image is large and there is not much ALT text. To a great extent it's a judgement call -- either choice is technically valid.

Not the Actual Dimensions

WIDTH and HEIGHT do not have to be the same dimensions as the actual picture. If you set different dimensions, the browser will attempt to shrink/stretch the picture to accomodate the dimensions. Some older browsers will not do this, others do it with varying degrees of success.

this code produces this

<IMG SRC="starflower.gif" WIDTH=200 HEIGHT=40 ALT="Starflower">

<IMG SRC="starflower.gif" WIDTH=65 HEIGHT=200 ALT="Starflower">

Percentages

You can use percentages instead of pixel widths. Percentages are of the available width or height that the image could fill, usually the width or height of the current window. Percentages are useful for creating a "horizontal rule" effect. For example, we can use this image:

to create a rule the width of the page. We set the height to the image's natural height, and its width to 100%:

<IMG SRC="../graphics/forhr.gif" WIDTH="100%" HEIGHT=8 ALT="--------">

gives us this image:

When you create a psuedo-horizontal-rule this way, set the ALT text to several dashes, like this: ALT="---------". Also, when using percentages be sure to enclose the value in quotes -- unquoted attribute values cannot include the percent (%) character.

If HEIGHT is set to a percentage, common practice is for the browser to render it as a percentage of the height of the window (not the height of the full document). So, for example, this image is probably rendered on your browser as half as high as the window:

<IMG SRC="starflower.gif" WIDTH=105 HEIGHT="50%" ALT="Starflower">

gives us Starflower

`WIDTH` or `HEIGHT` -- Not Both

It is not defined how a browser should behave if you specify only one of WIDTH or HEIGHT, but generally browsers will render the picture so that the ratio of height to width stays the same:

this code produces this

<IMG SRC="starflower.gif" WIDTH=30 ALT="Starflower">

<IMG SRC="starflower.gif" WIDTH=300 ALT="Starflower">

<IMG SRC="starflower.gif" HEIGHT=50 ALT="Starflower">

Attributes for <IMG ...> WIDTH = "width expression" HEIGHT = "height expression"

Are WIDTH and HEIGHT Required?

Not the Actual Dimensions

Percentages

WIDTH or HEIGHT -- Not Both

Attributes for `<IMG ...>`
`WIDTH = "width expression"`
`HEIGHT = "height expression"`

Are `WIDTH` and `HEIGHT` Required?

`WIDTH` or `HEIGHT` -- Not Both