media
<img>
Embeds a raster or vector image into the document. Use it for content images; use CSS background-image for purely decorative visuals.
<img src="cat.jpg" alt="Sleeping cat" width="640" height="360">Common attributes
| Attribute | Purpose |
|---|---|
| src | Image URL (required) |
| alt | Text alternative for AT and broken images |
| width | Intrinsic width in pixels |
| height | Intrinsic height in pixels |
| loading | eager | lazy — defer offscreen images |
| decoding | sync | async | auto |
| srcset | Responsive candidate sources |
| sizes | Layout hint for srcset selection |
Examples
<img src="/logo.svg" alt="Utilko" width="120" height="32">Logo with explicit dimensions to prevent CLS
<img src="hero.jpg" alt="" loading="lazy" decoding="async">Decorative image, lazy-loaded
<img srcset="s.jpg 480w, m.jpg 800w, l.jpg 1600w" sizes="(max-width:600px) 100vw, 800px" src="m.jpg" alt="Landscape">Responsive image with srcset/sizes
Gotcha
The alt attribute is required — use alt="" for purely decorative images so screen readers skip them. Always set width and height (or aspect-ratio in CSS) to reserve space and avoid Cumulative Layout Shift.
Related tags
<svg>
Inline vector graphics that scale losslessly and can be styled and animated with CSS or JS. Use it for icons, logos, charts, and any illustration that must stay crisp at any size.
<video>
Embeds a video player in the page, with native browser controls and multiple source support. Use it for self-hosted or CDN-hosted video instead of Flash or heavy JS players.
<iframe>
Embeds another HTML document inside the current page. Use it for third-party embeds (maps, videos, payments) — but treat every iframe as untrusted and sandbox where possible.