IMG - Inline Image

Syntax	<IMG>
Attribute Specifications	SRC=`URI` (location of image) ALT=`Text` (alternate text) LONGDESC=`URI` (link to long description) WIDTH=`Length` (image width) HEIGHT=`Length` (image height) USEMAP=`URI` (client-side image map) ISMAP (server-side image map) ALIGN=top\|middle\|bottom\|left\|right (image alignment) BORDER=`Length` (link border width) HSPACE=`Pixels` (horizontal gutter) VSPACE=`Pixels` (vertical gutter) common attributes
Contents	Empty
Contained in	Inline elements, block-level elements except PRE

The IMG element specifies an inline image. The required SRC attribute specifies the location of the image. The image can be any format, though browsers generally only support GIF and JPEG images. Support for the PNG image format is growing slowly.

The required ALT attribute provides alternate text for those not loading images. Effective ALT text should generally give the function of the image rather than a description of the image. For example, ALT="Welcome to XYZ Corp." would be more appropriate than ALT="XYZ Corp. Logo" for a company's logo on its welcome page. Good ALT text is crucial to the document's accessibility for the significant portion of users who do not load images; see Use of ALT texts in IMGs for a thorough discussion.

The LONGDESC attribute gives the location of a long description of the image. This attribute should be used to provide a long description of an image where this would be useful. For example, a painting, graph, or corporate logo could be given a description so that blind and other text-only users can develop a mental picture of the image.

The WIDTH and HEIGHT attributes are most useful when they specify the exact dimensions of the image in pixels. This allows image-loading browsers to reserve the proper amount of space for the image and continue to render the rest of the document, thus giving the appearance of a faster-loading page.

Unfortunately, many graphical browsers will use these dimensions when not loading images, which can cause the ALT text to be cut off if the image is small or the ALT text is large. In such cases, authors may wish to leave off the WIDTH and HEIGHT attributes, depending on the importance of the ALT text and the placement of the image on the page (an image towards the end of the document without WIDTH and HEIGHT attributes will generally not noticeably slow the rendering of the page).

Authors can also specify different dimensions for the WIDTH and HEIGHT attributes, in which case browsers should scale the image. Percentages, relative to the horizontal or vertical space available (not relative to the image's natural size) can also be specified, though these are not as widely supported as pixel lengths. Since browsers typically do a poor job of scaling images, authors should avoid using WIDTH and HEIGHT for this purpose as much as possible.

The ALIGN attribute, deprecated in HTML 4.0, specifies the alignment of the image. The values top, middle, and bottom specify the image's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the image with the current baseline. To center the image horizontally on the page, place the image in a centered block, e.g.,

<H1 ALIGN=center><IMG SRC="logo.gif" ALT="Welcome to XYZ Company"></H1>

The other ALIGN values, left and right, specify a floating image; the image is placed at the left or right margin and content flows around it. To place content below the image, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning images.

The BORDER attribute, deprecated in HTML 4.0, specifies the width of the image's border. Specifying BORDER=0 will eliminate the border around a linked image in most browsers, though some allow the user to override this. Authors should only use BORDER=0 if the image would be clearly recognizable as a link, or as a method of de-emphasizing a link. For example:

<A HREF="reference/"><IMG SRC="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference</A>

The deprecated HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the image. The value must be in pixels and applies to both sides of the image. Style sheets provide more flexibility in specifying the space around images.

The USEMAP attribute is used with client-side image maps to give the location of the map definition. While this value may be a full URI--allowing a single map definition to be applied to multiple pages--Netscape Navigator will only find map definitions in the same file, effectively limiting the USEMAP value to a fragment identifier such as "#map".

The ISMAP attribute is used with server-side image maps. When the ISMAP attribute is included with a linked image and the user clicks the image, the image coordinates clicked are sent to the server, from which a location can be returned. The method of handling the coordinates is server-dependent, but the NCSA server's method is most common.

Server-side image maps are better supported than client-side image maps, but almost all browsers today support both methods. Client-side image maps are generally preferred since they do not require an extra request to the server (and so are faster), and since they allow a usable menu to be provided to text-only users. Using both methods in combination is a good approach, since browsers supporting client-side image maps will use that method while older browsers will use the server-side image map. An example follows:

<A HREF="/cgi-bin/imagemap/sitemap.map"><IMG SRC="sitemap.gif" ALT="Site Map" ISMAP USEMAP="#map" WIDTH=100 HEIGHT=100></A>

IMG - Inline Image

More Information