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).


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
Unknown
?
Yes
?
Yes
?
Yes
?
Yes
srcset attribute
34.0
Yes
?
Unknown
?
none
21
Yes
8
Yes

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Yes
?
Yes
?
Yes
?
Yes
?
Yes
srcset attribute
?
none
?
none
?
none
?
none
8
Yes

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

See also

Related articles

HTML


















































… further results

Multimedia










  • 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]