Responsive images in HTML

Serving the right image file for the screen that is asking.

<picture>
  <source media="(min-width: 60rem)" type="image/avif"
          srcset="/img/wide.avif 1600w" sizes="50vw">
  <source media="(min-width: 30rem)" type="image/webp"
          srcset="/img/mid.webp 960w" sizes="50vw">
  <img src="/img/small.jpg" alt="A desk with a split keyboard"
       srcset="/img/small.jpg 480w, /img/mid.jpg 960w"
       sizes="(min-width: 30rem) 50vw, 100vw"
       width="480" height="320">
</picture>

How it works

1. srcset offers widths and sizes says how wide it renders.
2. picture with media swaps art direction, not just resolution.
3. The img inside picture is the required fallback.

The run, in numbers

Lines

10

Characters to type

386

Tokens

58

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 46 seconds.

Type this snippet

Step 5 of 9 in Media & embeds, step 12 of 23 in Semantics & metadata.

← Previous Next →