Responsive images cover two distinct needs that get conflated constantly.

Resolution Switching: Use srcset

The problem: the same image needs to be delivered at different pixel sizes so a phone doesn't download a desktop-sized file.

The tool: srcset with width descriptors, plus a sizes attribute telling the browser how wide the image will render at each breakpoint. The browser then picks the best candidate for the viewport and device pixel ratio.

The key point: the browser chooses. You describe the options and the layout; it decides. That's why srcset works well with a build pipeline that generates several widths automatically.

Art Direction: Use picture

The problem: a different image is needed at different sizes. A wide cinematic hero with the subject small in the frame becomes unreadable on a phone; you want a tighter crop instead.

The tool: the picture element with source children carrying media conditions, and an img fallback. Here you decide, and the browser obeys the first matching source.

Typical cases:

  • Wide landscape crop on desktop, square or portrait crop on mobile.
  • A detailed chart on desktop, a simplified version on mobile.
  • A version with text baked in for one locale and a different one elsewhere.

Format Fallbacks Also Use picture

The other main use of source elements is offering modern formats with a fallback: an AVIF source, then a WebP source, then a JPEG in the img. The browser takes the first type it supports. Order matters — put the most efficient format first, because the browser does not compare, it just takes the first match.

The Mistakes That Make It Useless

  1. Forgetting the img fallback. The img inside picture is not optional; it's what actually renders. Without it nothing displays.
  2. Putting attributes on the wrong element. Alt text, width, height, loading and fetchpriority belong on the img, not on picture or source.
  3. Ratio changes without reserved space. If your art-directed crops have different aspect ratios, each breakpoint needs its own reserved ratio or you reintroduce layout shift.
  4. Using picture for pure resolution switching. It works, but you lose the browser's ability to account for device pixel ratio and network conditions. Use srcset for that.
  5. Duplicating art direction in CSS too — two different mechanisms hiding and showing images means double downloads on some browsers.

Choosing Quickly

  • Same picture, different sizes → srcset + sizes.
  • Different crop or different content → picture + source media.
  • Different file format → picture + source type.
  • All three at once is legitimate: source elements can carry both media and srcset.

Start with plain srcset. Reach for picture only when the composition genuinely fails at small sizes — art direction doubles your asset production, so spend it where it changes comprehension.