<img>
The <img> element embeds an image in a document. It is the standard way to present meaningful visual content, icons, illustrations, and photos with alternate text.
Overview
The <img> element embeds an image in a document. It is the standard way to present meaningful visual content, icons, illustrations, and photos with alternate text.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML attribute | ||||||
alt | 1 | 12 | 1 | 3 | 18 | 2 |
| The crossorigin attribute, valid on the audio, img, link, script, and video elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute. | 13 | 12 | 8 | 6 | 18 | 6 |
| This attribute provides a hint to the browser as to whether it should perform image decoding along with rendering the other DOM content in a single presentation step that looks more "correct" (sync), or render and present the other DOM content first and then decode the image and present it later (async). In practice, async means that the next paint does not… | 65 | 79 | 63 | 11.1 | 65 | 11.3 |
height | 1 | 12 | 1 | 3 | 18 | 2 |
src | 1 | 12 | 1 | 1 | 18 | 1 |
width | 1 | 12 | 1 | 3 | 18 | 2 |
| DOM API | ||||||
| The HTMLImageElement interface represents an HTML img element, providing the properties and methods used to manipulate image elements. | 1 | 12 | 1 | 1 | 18 | 1 |
| The alt property of the HTMLImageElement interface provides fallback (alternate) text to display when the image specified by the img element is not displayed, whether because of an error, because the user has disabled the loading of images, or because the image hasn't finished loading yet. It reflects the element's alt content attribute. | 1 | 12 | 1 | 3 | 18 | 1 |
| The complete read-only property of the HTMLImageElement interface is a Boolean value indicating whether or not the image has completely loaded. | 1 | 12 | 1 | 3 | 18 | 1 |
| The crossOrigin property of the HTMLImageElement interface is a string which specifies the Cross-Origin Resource Sharing (CORS) setting to use when retrieving the image. It reflects the element's crossorigin content attribute. | 13 | 12 | 8 | 6 | 18 | 6 |
| The decode() method of the HTMLImageElement interface returns a Promise that resolves once the image is decoded and is safe to be appended to the DOM. | 64 | 79 | 68 | 11.1 | 64 | 11.3 |
| The decoding property of the HTMLImageElement interface provides a hint to the browser as to how it should decode the image. More specifically, whether it should wait for the image to be decoded before presenting other content updates or not. It reflects the element's decoding content attribute. | 65 | 79 | 63 | 11.1 | 65 | 11.3 |
| The height property of the HTMLImageElement interface indicates the height at which the image is drawn, in CSS pixel, if the image is being drawn or rendered to any visual medium such as a screen or printer. Otherwise, it's the natural, pixel density-corrected height of the image. | 1 | 12 | 1 | 3 | 18 | 1 |
| The Image() constructor creates a new HTMLImageElement instance. It is functionally equivalent to Document.createElement(). | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only naturalHeight property of the HTMLImageElement interface returns the intrinsic (natural), density-corrected height of the image in CSS pixel. | 1 | 12 | 1 | 3 | 18 | 1 |
| The read-only naturalWidth property of the HTMLImageElement interface returns the intrinsic (natural), density-corrected width of the image in CSS pixel. | 1 | 12 | 1 | 3 | 18 | 1 |
| The src property of the HTMLImageElement interface specifies the image to display in the img element. It reflects the element's src content attribute. | 1 | 12 | 1 | 3 | 18 | 1 |
| The width property of the HTMLImageElement interface indicates the width at which the image is drawn, in CSS pixel, if the image is being drawn or rendered to any visual medium such as a screen or printer. Otherwise, it's the natural, pixel density-corrected width of the image. | 1 | 12 | 1 | 3 | 18 | 1 |
| The read-only x property of the HTMLImageElement interface indicates the x-coordinate of the img element's left border edge relative to the root element's origin. | 1 | 12 | 14 | 3 | 18 | 1 |
| The read-only y property of the HTMLImageElement interface indicates the y-coordinate of the img element's top border edge relative to the root element's origin. | 1 | 12 | 14 | 3 | 18 | 1 |
- Previously available under a different name: image (≤37)
- Previously available under a different name: image (15)
- Previously available under a different name: image (≤32)
- Previously available under a different name: image (5.1)
- Previously available under a different name: image (≤37)
- Previously available under a different name: image (5)
- This feature was removed in a later browser version (7)
- This feature was removed in a later browser version (7)
Syntax
<img src="photo.jpg" alt="東京タワーの夜景"
width="800" height="600" loading="lazy">
<img src="icon.svg" alt="" role="presentation"
width="24" height="24">Live demo
Use cases
Content images
Display photos, diagrams, screenshots, and illustrations that contribute to understanding the page.
Informative icons
Use img for logos or icons when the visual itself carries meaning and needs alternate text.
Cautions
- Choose CSS backgrounds instead when the image is purely decorative and does not belong to the content itself.
- Large images should include sizing, optimization, and responsive decisions so they do not cause layout shift or excessive download cost.
Accessibility
- Every meaningful image needs appropriate alt text, while decorative images should use empty alt text rather than redundant descriptions.
Related links
Powered by web-features