This article is In Progress.
W3C Candidate Recommendation
The img element (<img>) embeds an image in a document.
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.
An img is always in one of the following states:
- 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.
- 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).
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.
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.
<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.">
|HTML 2.0||W3C Recommendation|
|HTML5||W3C Candidate Recommendation|
|srcset||W3C Editor’s Draft|
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Basic Support||1.0||1.0||1.0|| 5.12
|srcset support||34.0||Unsupported||Unsupported|| 21.0
|Feature||Android||BlackBerry||Chrome for mobile||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Opera Mini||Safari Mobile|
|Chrome||34.0||Chrome has implemented srcset with version 34.0 but doesn’t yet support the sizes attribute.|
- Picturefill is a polyfill to support srcset and sizes attributes
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]