Introduction

Attributes

Introduction

Here's an example of the code needed to display an image, and the image it displays:

HTML Code	Results of the Code
<img src="../images/raisin.gif">

There are four common attributes used with the <img> tag: src, height, width, and border.

The height and width of the image are read by default from the image file and used to size the image on the web page. However, the <img> tag also supports height and width attributes. If these are assigned, then the browser will use these values to determine the size of the displayed image -regardless of the original size of the image.

Here's a repeat of the code above, but this time with the height and width defined. There's also a second example that shows you can expand (or shrink) an image by changing the height/width attributes. You'll also notice that enlarging an image too much can result in distortion of the image. This is true of any raster (bitmapped) image, which includes both .jpg and .gif images.

HTML Code	Results of the Code
<img height=38 width=37 src="../images/raisin.gif">
<img height=76 width=74 src="../images/raisin.gif">

For a browser to display a web page it must read in the entire HTML file, as well as all of the images that it is supposed to display. If the height/width attributes of the <img> tag are not assigned, the browser must wait until the images are read to know how much space to allocate to the images. It is good practice to assign the height/width attributes so that the browser can allocate the correct space without having to first read the images. This will speed up display of the web page.

While the image file is being read, the browser will display the value of the attribute alt. Alt is typically assigned a short description of the image, so that the visitor to the web page will know what is in the image that has not yet been displayed. For broadband users this tag is not that important. For phone connections, however, an image can take several minutes to download and the use of the alt attribute helps let the visitor know if the image will be worth waiting for the download.

In this next example, which includes the alt attribute, you can see that the alt value is also displayed when the image cannot be located on the server. A non-existent image filename has been selected to demonstrate the alt value.

HTML Code	Results of the Code
<img alt="raisin man" src="../images/raisinX.gif">

A border can also be placed around an image, helping set it off visually from the rest of the web page content. The border attribute is used and may assigned a value which determines the thickness of the border.

Here's an example of the code needed to display an image with a border, and the image it displays:

HTML Code	Results of the Code
<img border=4 src="../images/raisin.gif">

The attributes mentioned so far are the most-used attributes of the <img> tag. A complete list of supported attribute is provided below, as well as in the reference section of this site.

Attributes

Attribute	Description
align	how text should flow around the picture
alt	text to show if you don't show the picture
border	border around the picture
height	how tall is the picture
hspace	horizontal distance between the picture and the text
ismap	is this a clickable map
longdesc	URL of long description
name	identifier for the tag
src	where to get the picture
usemap	name of the map definition
vspace	vertical distance between the picture and the text
width	how wide is the picture

Some browsers support custom attributes which are not part of the HTML specification. See the extensions section of this site for additional details.