Episode 1 — Fundamentals / 1.5 — Semantic HTML and Browser Rendering

1.5.h — Responsive Images (`srcset`, `sizes`) and Formats

In one sentence: Responsive images let the browser pick an appropriate resolution (and sometimes format) for the user’s device and layout — saving bandwidth while keeping visuals sharp, and explicit dimensions keep CLS under control.

Navigation: ← 1.5.g — Lists · 1.5.i — Links & forms →

1. The two problems

Resolution: retina screens need more pixels; sending a 4000px-wide image to a phone is wasteful.
Layout width: an image might be full viewport on mobile but 400px in a sidebar on desktop — the browser needs a hint.

2. `srcset` + `sizes` on `<img>`

srcset lists candidate files with descriptors:

w descriptors — image intrinsic widths (e.g. banner-400.jpg 400w)
x descriptors — DPR (e.g. icon@2x.png 2x)

sizes tells the browser how wide the image will render at various breakpoints so it can pick a reasonable w candidate before layout completes (it uses CSS + viewport math).

Example (pattern):

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  width="1200"
  height="675"
  alt="…"
/>

width and height: reserve layout space → reduces CLS (see 1.5.b). aspect-ratio in CSS can also help when only one dimension is known.

3. `<picture>` — art direction & format negotiation

Use <picture> when:

You need different crops at breakpoints (art direction)
You want format fallback (AVIF → WebP → JPEG)

<picture>
  <source type="image/avif" srcset="…" sizes="…" />
  <source type="image/webp" srcset="…" sizes="…" />
  <img src="fallback.jpg" alt="…" width="…" height="…" />
</picture>

The browser picks the first <source> it understands and can decode.

4. Modern formats (WebP, AVIF)

Format	Notes
WebP	Broad support; good compression vs JPEG/PNG for many assets
AVIF	Often smaller still; encode cost higher; provide fallback via `<picture>`

Always keep a baseline img src for unknown clients when using cutting-edge formats.

5. Optimization mindset (intro)

Right pixels — not always “maximum quality”
Lazy loading — loading="lazy" for below-the-fold images (test LCP for hero images — heroes often should not lazy-load)
decoding="async" — hints that decode work can happen off the critical path; the browser may still choose sync decode when it must paint immediately — measure on slow devices.
fetchpriority="high" — use sparingly on the Largest Contentful Paint (LCP) image so the preload scanner and network queue favor it; avoid sprinkling “high” on everything.
CDN + variants — many CDNs generate w-descriptor sets from one master; your job is still to ship sizes that match real layout.

5b. Vector vs raster (when `srcset` is not the whole story)

SVG scales crisply for logos and simple illustrations — often one file beats many raster breakpoints. Photos stay raster; combine SVG icons + responsive <img> photos as appropriate.

6. CLS tie-in

CLS spikes when intrinsic dimensions arrive late:

Omitting width/height/aspect-ratio
Fonts or dynamic ads shifting content
Client-rendered placeholders replaced by taller media

Fix: reserve space; prefer dimensions in HTML for known media.

7. Key takeaways

srcset + sizes solve “which resolution file?”
<picture> solves “which file at all?” (format/art direction).
WebP/AVIF shrink bytes — ship fallbacks.
Dimensions connect images to CLS and layout stability.

Explain-It Challenge

Explain without notes:

Why sizes matters for w-based srcset.
When <picture> is worth it vs a single <img srcset> alone.
How width/height on <img> reduces CLS (one sentence tying to layout).