Use the IMG element to add an image to your page simply. The IMG element includes everything you need in the start tag. IMG does not have content or end tags.

Image <IMG>

Start Tag: Required
Content: Empty
End Tag: Forbidden

Attributes:
id, class: used in conjunction with style sheets
lang, dir: indicate language and text direction
src: URL of image
alt: short description; used for text-only browsers
longdesc: long description; used for text-only browsers
title: title of this element
style: define style here to override style sheet
usemap: URL of client-side image map
ismap: use server-side image map

height: height of image; use if overriding the actual image height
width: width of image; use if overriding the actual image width align, hspace, vspace, border: deprecated; should be specified in style sheet events

The two most important (and required) attributes are src and alt. The src attribute specifies from where the image arrives. Even with an inline image, the image exists as a separate file, usually stored in your images directory.

To support the shrinking number of text-only browsers, as well as the growing number of textsynthesizing browsers, include a useful alt attribute value. The alt attribute should contain a short, accurate description of the image’s appearance.

If you need a longer description, you should use the longdesc attribute. Height and width serve two purposes. If you use an HTML editor to specify an image, the HTML editor automatically inserts the height and width attributes to facilitate quick page loading. In addition, if you want to load a small image and stretch it into a larger image, then use the height and width attributes.

Don’t try to stretch a GIF image. Use JPEGs and PNGs for stretching instead. Usemap and ismap are associated with image maps. Image maps are images with clickable areas—actually hyperlinks—under the image.

The following examples show how to use the IMG element:

<IMG class=”logo” src=”images/logo.gif” alt=”Really Big Company
Logo”>

This code inserts an image called logo.gif into your page. If you hold your mouse over the image using Internet Explorer 3 and above, or Netscape Navigator 4 and above, the words Really Big Company Logo pop up. The formatting—padding, borders, alignment, and text wrapping—of the image depends on your style sheet and the definition of the IMG class logo.

<IMG class=”wrapped” src=”images/stretch-box.gif”
alt=”Concentric boxes” height=”200” width=”200”>

The preceding code inserts an image called stretch-box.gif. The original image is
16 16 pixels, while the stretched image will be 200 200 pixels. If successful, stretching an image is a great way to minimize the load time of your page. The formatting of the image on the page depends on how the IMG class “wrapped” is defined in your style sheet.