Images in HTML
From the HTML cheat sheet · Media & Graphics · verified Jul 2026
Images
Responsive and accessible image elements
css
<!-- Basic image -->
<img src="photo.jpg" alt="Description of image">
<!-- Responsive image -->
<img src="photo.jpg"
alt="Description"
width="800"
height="600"
loading="lazy">
<!-- Picture element for art direction -->
<picture>
<source media="(min-width: 768px)" srcset="large.jpg">
<source media="(min-width: 480px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive image">
</picture>
<!-- Responsive images with srcset -->
<img srcset="small.jpg 480w,
medium.jpg 768w,
large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
33vw"
src="medium.jpg"
alt="Responsive image">html
<figure>
<img src="photo.jpg" alt="A beautiful sunset">
<figcaption>Sunset over the mountains</figcaption>
</figure>🟢 Essential - Always include alt text
💡 loading="lazy" defers offscreen images
📌 picture element for art direction
⚡ srcset for resolution switching
⚠️ Specify width/height to prevent layout shift
imagesmediaresponsive