Choosing Between srcset and picture

srcset and <picture> both offer image choices, but they answer different questions. Use srcset when the browser should choose a file size. Use <picture> when you need to choose the image itself.

Let the browser choose the resolution

<img
  src="photo-800.webp"
  srcset="
    photo-400.webp 400w,
    photo-800.webp 800w,
    photo-1600.webp 1600w
  "
  sizes="(max-width: 700px) 100vw, 700px"
  width="1600"
  height="1067"
  alt="Street photograph"
>

The candidates contain the same composition at different widths. sizes describes how wide the image will appear, and the browser combines that with viewport and device information to choose a source.

That decision belongs in the browser. JavaScript screen-width detection knows less about network and device conditions.

Use <picture> when composition changes

A portrait crop may work on mobile while a landscape crop suits desktop:

<picture>
  <source media="(max-width: 600px)" srcset="portrait.webp">
  <img src="landscape.webp" alt="Person standing beside a lake">
</picture>

<picture> can also offer format alternatives:

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Street photograph">
</picture>

Each <source> can contain its own srcset, so art direction and resolution switching can be combined.

Always keep the <img> fallback. It carries the accessible text and intrinsic dimensions, and it is the element ultimately rendered. Lazy loading is a separate decision based on where the image appears.

The web.dev responsive images guide goes deeper into candidate selection. My shortcut remains: same image, different bytes—srcset; different crop or format—<picture>.

← Back to all articles