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
<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.
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.
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.
<p>Ingredients for black bean soup:<br /><img src="redball.gif" alt="Red ball" />Vegetable broth<br /><img src="redball.gif" alt="Red ball" />Black beans<br /><img src="redball.gif" alt="Red ball" />Crushed tomatoes</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.
<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:
<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:
<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:
<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:
img.photo {float: left;margin-right: 3px;}
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:
img {border: 0;}
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.
dirThis attribute specifies the base direction of text. Possible values:
ltr: Left-to-rightrtl: 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