HTML Media

Responsive Images

Phones don't need the same huge image as a 4K monitor. HTML lets the browser pick the right file.

srcset: different sizes

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Students learning to code">

picture: different formats or crops

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Students learning to code">
</picture>

The browser uses the first <source> it supports and falls back to the <img>.

figure and figcaption

<figure>
  <img src="chart.png" alt="Bar chart of course sign-ups by month">
  <figcaption>Sign-ups doubled in 2026.</figcaption>
</figure>