HTML <img> Element
The HTML <img> element embeds an image in a web page. The image file is normally identified with the src attribute, while the alt attribute provides a text alternative that describes the image when appropriate.
Syntax
<img src="https://www.example-web.site/img/mountain-landscape.jpg" alt="Mountain landscape">The <img> element is a void element, so it does not have a closing tag and cannot contain content. The src attribute identifies the image resource, and the alt attribute provides alternative text when the image conveys meaningful information.
Attributes
The <img> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
alt |
Provides a text alternative for the image when the image cannot be seen or displayed. |
crossorigin |
Controls how cross-origin requests are handled when retrieving the image. |
decoding |
Provides a hint about how the browser should decode the image. |
fetchpriority |
Provides a hint about the relative priority the browser should use when fetching the image. |
height |
Specifies the intrinsic height of the image in CSS pixels. |
ismap |
Indicates that an image contained within a hyperlink is part of a server-side image map. |
loading |
Provides a hint about whether the browser should load the image immediately or defer loading until it approaches the visible area. |
referrerpolicy |
Controls how much referrer information is sent when requesting the image. |
sizes |
Describes the intended display size of the image under different layout conditions when used with srcset. |
src |
Specifies the URL of the image resource to display. |
srcset |
Provides one or more image candidates that allow the browser to select an appropriate image for the device or display conditions. |
usemap |
Associates the image with a client-side image map defined by a <map> element. |
width |
Specifies the intrinsic width of the image in CSS pixels. |
Example
This example displays a landscape image from the tutorial demonstration website. The alt attribute provides a short text alternative describing the meaningful content of the image.
Usage Notes
Use the src attribute to identify the image resource. The URL can be relative when the image is stored on the same website or absolute when the image is loaded from another location.
Use the alt attribute to provide an appropriate text alternative for images that communicate information. The alternative text should describe the image's purpose or meaningful content in the context where it appears.
For a purely decorative image that does not add information to the page, use an empty alt attribute such as alt="". This allows assistive technologies to ignore the decorative image.
Providing width and height attributes helps the browser reserve the correct amount of space before the image finishes loading, which can reduce unexpected movement of surrounding page content.
The srcset and sizes attributes can provide responsive image choices so the browser can select an image appropriate for the available space, screen density, and other conditions.
The loading="lazy" attribute can defer loading images that begin outside the visible area of the page. Images that are immediately visible when the page loads generally should not be unnecessarily lazy-loaded.
Use CSS to control the visual presentation of images, including responsive sizing, borders, spacing, and alignment. Older presentational attributes such as align, border, hspace, and vspace are obsolete.
Accessibility
Meaningful images should have concise alternative text that communicates the information or purpose a user would otherwise obtain visually. Avoid beginning alternative text with phrases such as "image of" or "picture of" unless that wording is important to understanding the content.
When an image is used as the only content of a link or button, its alternative text should describe the purpose or destination of that control rather than merely describing the image's appearance.
Decorative images should normally use alt="" so screen readers can skip them. Do not omit the alt attribute simply because an image is decorative.
Complex images such as charts, diagrams, or illustrations may require additional text near the image when a short alt value cannot communicate all of the important information.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <img> Element .
Related Elements
<picture> - Provides alternative image sources for different display conditions or image formats.
<source> - Specifies alternative media or image resources for elements such as <picture>, <audio>, and <video>.
<figure> - Groups self-contained content such as an image with an optional caption.
<figcaption> - Provides a caption for content contained within a <figure>.
<map> - Defines a client-side image map containing interactive areas.
<area> - Defines an interactive region within an image map.