4.15 IMG (In-line Images) Element

The IMG element allows an image file to be inserted within an HTML document. This lets you include pictures, figures within a document and presented with the text, as opposed to having hypertext links that retrieve and display images in a separate viewing window. This element can not be used to include other HTML text within a given document.

Images can be included within a hypertext anchor: thus you can make an image that behaves as a button linked to other documents or resources. An example is given at the bottom of this document.

The IMG element is empty, meaning there is no closing </IMG>. It has several attributes:

SRC="image_url"

SRC give the URL of the image document -- this attribute must be present. The naming scheme is the same as for hypertext links: thus relative URLs such as SRC="foo.gif" or SRC="../foo.gif" are commonly used. At present you can only inline GIF images and X-bitmaps (standard extensions are .gif, .xbm, .xpm), although many (but not all) browsers also support inline JPEG (standard extensions .jpeg or .jpg) images as well.

ALT="alternative text"

Some browsers cannot display images, while users connecting via phone lines often turn off image loading. The ALT attribute lets you specify a text alternative to the image, for use in these circumstances. You should always include an ALT alternative, particularly if the image is a button linked to some other resource. If the image is unimportant, you can always put ALT="".

ALIGN="bottom", "middle", "top"

ALIGN tells the browser how to align the image with the neighbouring text. "Bottom" aligns the bottom of the image with the baseline of the text, and is the default. "Middle" aligns the middle of the image with the baseline of text, and "top" aligns the top of the image with the top of the tallest item in the line. This attribute is optional.
"left", "right" (HTML 3.2)
HTML 3.2 supports left and right-aligned images. In this case, the image "floats" to the left or right margin, with the text following the image element flowing around the image. This attribute value is supported by all current browsers.
"absmiddle", "absbottom", "texttop", "baseline" (HTML 3.2)
Netscape introduced these extra attributes, which work like "top", "middle" and "bottom" but which give additional vertical control of image placement, when the image flows with the text. These are illustrated in the example document.

HEIGHT="n", WIDTH="n" (HTML 3.2)

HEIGHT and WIDTH specify the display height and width (in pixels) for the image -- if the picture does not fit, the browser should rescale the image to fit in the specified box. An example is HEIGHT="30" WIDTH="50" This is supported by most current browsers. Some also support percent values (a percentage of page size, or sometimes a percentage of available size inside a table cell) -- but you had better test percentage values, to make sure things work as expected.

ISMAP

Most browsers also support the ISMAP attribute. This attribute marks the image as an active image map. This allows the user to click the mouse over the image and have different regions of the image cause different actions. See ISMAP to find out more about how to do this.

BORDER="n" (HTML 3.2)

If ISMAP is used, then the image is a hypertext link, and will be surrounded by a border to idicate this. BORDER specifies the width of this border. In particular, BORDER=0 specifies no border, which is rather cute.

HSPACE="n", VSPACE="n" (HTML 3.2)

These attributes specify the horizontal and vertical space, in pixels, to leave between the image and the surrounding elements.

LOWSRC="URL" (Netscape only)

Specifies a low-resolution image file. A netscape browser will first load the smaller, low-resolution file specified by LOWSRC and will then load the larger SRC-specified image file.

USEMAP="url" (HTML 4)

Specifies a URL pointing to a client side imagemap -- that is , a MAP element. For example, if the map element starts with <MAP NAME="foo">, then the map would be referenced as <IMG USEMAP="#foo"... >. smaller, low-resolution file specified by LOWSRC and will then load the larger SRC-specified image file.

Examples of IMG Elements

Look at Section 4.15.1 to see some examples of the use of the IMG element