The XHTML WYSIWYG Editor For Desktop & Web Applications

img

Definition

The img element is used to author content that can be represented visually (as an image) and textually. The src attribute provides visual content and the alt attribute provides textual content (alternate text).

The content in the src and alt attributes must convey equivalent meaning. In other words, alternate text is an equivalent substitute for visual content and visual content is equivalent substitute for alternate text.

Example

  1. <p><img src="images/smith.jpg" alt="Photo: John Smith" /></p>

Best practice

Images can enhance a Web visitor's visual experience. However, when images are used incorrectly, they can distort the meaning of content, especially for users of assistive technologies, for search engines, users of small screen devices with limited display areas, and users who choose to disable image rendering in their Web browser. To use images correctly, the first step is to identify if the image is decorative or non-decorative.

Decorative images

Decorative images are used for purely esthetic purposes, in order to enhance the visual appeal of a Web page. They are essentially eye candy. Examples of decorative images include spacers, bullets, borders, backgrounds, or pictures used purely for decoration. Removing decorative images should therefore not change the meaning of content on a Web page. The screen shot below illustrates the use of a decorative image.

Screen shot of a Web page containing an image followed by a paragraph of text.

Though it is tempting to compose an alternate text for every image, alternate text should not be supplied for decorative images, since it can distort the meaning of content on a Web page. For example, the screen shot below shows what happens when the decorative image in the preceding screen shot is incorrectly given alternate text (in this case, the alternate text "Handshake"). When image rendering is disabled in the browser, the alternate text displays in place of the decorative image and the result ("Handshake In 2006...") is meaningless.

Screen shot of alt text rendered in place of an image on a Web page.

The soup recipe below is a further example of incorrect use of alternate text for decorative images. In this case the alternate text "Red ball" is supplied for the red bullet points that appear next to each soup ingredient. Listen to the sound file to hear the comic result when alternate text for the decorative bullet points is processed by an auditory user-agent such as a screen reader.

  1. <p>
  2. Ingredients for black bean soup:<br />
  3. <img src="redball.gif" alt="Red ball" />Vegetable broth<br />
  4. <img src="redball.gif" alt="Red ball" />Black beans<br />
  5. <img src="redball.gif" alt="Red ball" />Crushed tomatoes
  6. </p>

To avoid confusion of this type, it is therefore important to render decorative images invisible to non-visual devices. This is done by leaving the text in the alt attribute blank (as seen in the example below). For the same reason, attributes such as title and longdesc also should not be suppllied for decorative images.

  1. <img src="images/border.jpg" alt="" />

Non-decorative images

Unlike decorative images, the purpose of non-decorative images is to convey information, or meaning. Examples of non-decorative images include photos, charts, graphs, diagrams and logos. All non-decorative images require alternate text and the alternate text must be a suitable replacement for the image in cases where the image cannot be rendered.

Non-decorative images can have a long description provided in a form of a URL to a page containing a detailed description of the image. For example:

  1. <img src="graph.gif" alt="Graph: this graph charts the sales growth of 20 products over the last 2 years." longdesc="/details/sales-report.htm" />

Non-decorative images can also display a tooltip when the cursor lingers over the image. The tooltip text is placed in the title attribute. For example:

  1. <img src="tv.gif" alt="Wide-screen television" title="On Sale Now!" />

Image dimensions

Web browsers render Web pages faster when the size of an image is specified in the width and height attributes . When image dimensions are not specified, some Web browsers will pause rendering the Web page until the image can be downloaded.

CSS for images

Images should be aligned using the CSS float property. For example:

Markup:

  1. <p><img class="photo" src="headshot.jpg" alt="Photo: John Smith" /> John Smith lives in beautiful Los Gatos, California. He works as a software engineer and volunteers his free time as a coach for a local baseball team.</p>

CSS:

  1. img.photo {
  2. float: left;
  3. margin-right: 3px;
  4. }

Some browsers render a border around images that is visible when an image is inside a hyperlink. To remove the border, a common technique is to use the following CSS rule:

  1. img {
  2. border: 0;
  3. }

Attributes

Basic

alt
(Text) Textual content (alternate text) for the image. This attribute is required. The value should be left blank for decorative images.
height
(Length) Image height.
src
(URI) Visual content. This required attribute specifies the location of the image source.
width
(Length) Image width.

Advanced

ismap
If present, this attribute specifies that a server-side image map should be used. Possible value is ismap.
longdesc
(URI) This attribute specifies the location of a Web page that describes the image. This attribute should only be used for non-decorative images.
usemap
(IDReference) This attribute associates the image to a client-side image map defined by a map element. The value of this attribute must match the id attribute of the map element.

Common core attributes

class
(NameTokens) This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or set of class names. Multiple class names must be separated by white space characters. Class names are typically used to apply CSS formatting rules to an element.
id
(ID) This attribute assigns an ID to an element. This ID must be unique in a document. This ID can be used by client-side scripts (such as JavaScript) to select elements, apply CSS formatting rules, or to build relationships between elements.
title
(Text) This attribute offers advisory information. Some Web browsers will display this information as tooltips. Assistive technologies may make this information available to users as additional information about the element.

Common internationalization attributes

xml:lang
(NameToken) This attribute specifies the base language of an element's attribute values and text content.
dir

This attribute specifies the base direction of text. Possible values:

  • ltr: Left-to-right
  • rtl: Right-to-left

Common event attributes

onclick
(Script) A client-side script event that occurs when a pointing device button is clicked over an element.
ondblclick
(Script) A client-side script event that occurs when a pointing device button is double-clicked over an element.
onmousedown
(Script) A client-side script event that occurs when a pointing device button is pressed down over an element.
onmouseup
(Script) A client-side script event that occurs when a pointing device button is released over an element.
onmouseover
(Script) A client-side script event that occurs when a pointing device is moved onto an element.
onmousemove
(Script) A client-side script event that occurs when a pointing device is moved within an element.
onmouseout
(Script) A client-side script event that occurs when a pointing device is moved away from an element.
onkeypress
(Script) A client-side script event that occurs when a key is pressed down over an element then released.
onkeydown
(Script) A client-side script event that occurs when a key is pressed down over an element.
onkeyup
(Script) A client-side script event that occurs when a key is released over an element.

Common style attribute

style
(Text) This attribute specifies formatting style information for the current element. The content of this attribute is called inline CSS. The style attribute is deprecated (considered outdated), because it fuses together content and formatting.

Contains

  • Nothing