Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Mail Systems
Eclipse Documentation

How To Guides
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Problem Solutions
Privacy Policy




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:

Images which have WIDTH and HEIGHT, but images are turned off -- the ALT text is not visible

Without WIDTH and HEIGHT
Images which have WIDTH and HEIGHT, but images are turned off -- the ALT text is visible

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">


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">

  Copyright 1997-2002 Idocs inc. Published under the terms of the Open Content License Design by Interspire