The <img> Element
As defined in the HTML Living Standard, the <img> element represents an image. It is a void element used to embed graphical content into a web page.
<img src="path/to/image.jpg" alt="A descriptive summary of the image content">
View HTML Living Standard: The img element
The Essential alt Attribute
The alt attribute provides a text alternative for the image. It is the single most important accessibility feature for visual content.
WCAG Requirement: Non-text Content
Success Criterion 1.1.1 (Level A): All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
For images that convey information, the alt text should be a concise description of that information. If an image is purely decorative (like a background pattern or a redundant icon), you must still include the attribute but leave it empty: alt="". This tells screen readers to skip the image entirely.
Modern Performance Attributes
loading="lazy": Instructs the browser to defer loading the image until it is near the viewport. This significantly improves performance and page load speed for users on slow connections.decoding="async": Allows the browser to decode image data off the main thread, preventing "jank" or freezes during scrolling.srcsetandsizes: Used for Responsive Images, allowing the browser to choose the most appropriate image resolution based on the user's screen density and viewport width.
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-width: 1024px) 1024px, 100vw"
alt="A scenic view of the ocean"
loading="lazy">
Usage Warnings
- No Text in Images: Avoid using images that contain text unless it is a logo. Real HTML text is more accessible, can be resized without loss of quality, and is readable by search engines.
- SVG fallback: If using SVGs via the
<img>tag, ensure you still provide thealtattribute.
A11y Tip: Beyond Alt
If an image requires a very long description (e.g., a complex infographic), use the alt attribute for a brief summary and provide the full details in the surrounding text or via a link to a separate description page.