img

< html‎ | elements
Jump to: navigation, search

img

This article is In Progress.


W3C Candidate Recommendation

Summary

The img element (<img>) embeds an image in a document.


Overview Table

DOM Interface HTMLImageElement

The img element (<img>) embeds an image in a document. The <img> element can be nested in an <a> element to create an image that links to another page or section. The value of the alt attribute provides equivalent content for those who cannot process images or who have image loading disabled. Alternatives to the <img> element include setting the background-image property of an element.

Attributes

States

An img is always in one of the following states:

Unavailable
The user agent hasn't obtained any image data.
Partially available
The user agent has obtained some of the image data.
Completely available
The user agent has obtained all of the image data and at least the image dimensions are available.
Broken
The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

Examples

View live exampleThe following example shows how to use the img element to embed an image on a page with an alt attribute to specify text to display if the image isn't able to be displayed.

HTML

You are standing in an open field west of a house. <img src="house.jpeg" alt="The house is white, with a boarded front door."> There is a small mailbox here.

View live exampleThe following example shows how to use the srcset and sizes attributes to create responsive images. The browser will select the best image depending on viewport width.

HTML

<img sizes="100vw, (min-width:600px) 50vw" srcset="small.jpg 300w, medium.jpg 500w, large.jpg 700w" alt="The house is white, with a boarded front door.">



Related specifications

Specification Status Related Changes
HTML 2.0 W3C Recommendation
HTML5 W3C Candidate Recommendation
srcset W3C Editor’s Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 1.0
1.0
1.0
5.12
1.0


srcset support 34.0
Unsupported
Unsupported
21.0
Unsupported

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Chrome 34.0 Chrome has implemented srcset with version 34.0 but doesn’t yet support the sizes attribute.

See also

Related articles

HTML


















































  • html/elements/img
… further results

Multimedia












  • html/elements/img




External resources

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]