Input HarborISSUE #35 of 46

picture · srcset · sizes · responsive images

FormaVSCaptain Invalid Input

Forma says<picture> and srcset serve the right image per screen — smaller files on phones, crisp ones on retina.

A plain <img> sends everyone the same file. srcset offers several sizes and lets the browser pick by screen width and pixel density, paired with sizes to say how wide the image renders.

<picture> goes further: <source> children with media queries swap entirely different crops (art direction) or modern formats (AVIF/WebP) with a JPG fallback in the inner <img> — which is still required.

Power-ups you unlock

srcset + sizes = browser picks the best-fit file
<picture> + <source media> = art direction & format swaps
Always keep a plain <img> inside <picture> as fallback
Serves smaller bytes to phones, sharp images to retina

Captain Invalid Input attacks — common mistakes

Omitting the inner <img> inside <picture> (nothing shows)
srcset without sizes → browser guesses the render width
Serving a 4000px image scaled down with CSS on mobile

Boss battleBuild a <picture> that uses a WebP source with a JPG fallback, then add a srcset with two widths to the inner img.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px">
  <picture>
    <source srcset="https://via.placeholder.com/600x300.webp" type="image/webp">
    <img src="https://via.placeholder.com/600x300"
         srcset="https://via.placeholder.com/300x150 300w, https://via.placeholder.com/600x300 600w"
         sizes="(max-width:500px) 300px, 600px"
         alt="responsive placeholder" style="max-width:100%">
  </picture>
</body></html>

▶ Open the interactive comic issue

‹ Canvas · Pixel Manipulation Accessibility · Aria Roles · Keyboard Nav ›