Responsive Images in HTML

From the HTML cheat sheet · Media & Graphics · verified Jul 2026

Responsive Images

Serve optimized images for different screen sizes with picture, source, and srcset

html

<!-- srcset for different resolutions -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Product photo"
  loading="lazy"
>

<!-- Picture for art direction -->
<picture>
  <source media="(max-width: 600px)" srcset="mobile.jpg">
  <source media="(max-width: 1200px)" srcset="tablet.jpg">
  <img src="desktop.jpg" alt="Hero image">
</picture>

💡 Use <picture> for art direction (different crops per breakpoint) and srcset for resolution switching

⚡ loading="lazy" defers offscreen images — massive performance win with zero JavaScript

📌 Set width and height attributes to prevent Cumulative Layout Shift (CLS)

🟢 Always provide a title attribute on iframes for accessibility — screen readers use it

picturesrcsetresponsiveiframelazy

More HTML tasks

Back to the full HTML cheat sheet