Responsive Images
debt(d5/e3/b3/t6)
Closest to 'specialist tool catches' (d5) — Lighthouse and PageSpeed Insights flag oversized images and missing srcset as 'Properly size images' audits.
Closest to 'simple parameterised fix' (e3) — add srcset/sizes attributes to img tags and generate resized variants server-side; pattern replacement per image but not architectural.
Closest to 'localised tax' (b3) — applies to image rendering components (templates, upload pipeline) but doesn't reshape the broader system; image generation pipeline carries ongoing cost.
Closest to 'serious trap' (t7) — the misconception that CSS max-width:100% makes images responsive is widespread and contradicts how download vs. display work; srcset without sizes is another counterintuitive gotcha.
Also Known As
TL;DR
Explanation
The srcset attribute provides multiple image sources with width descriptors (300w, 600w, 1200w). The sizes attribute tells the browser the display size at each viewport width. The browser picks the most appropriate source. The picture element enables art direction — different crops for different screens. The modern stack: generate WebP and AVIF variants, use srcset for density/size selection, and use picture for format selection with fallback. Tools: Imagemagick, sharp (Node), imgproxy, Cloudinary.
Common Misconception
Why It Matters
Common Mistakes
- srcset without sizes — browser assumes full viewport width and picks too large an image.
- No WebP/AVIF fallback in picture element — older browsers see nothing without the fallback img.
- Same image at different sizes without art direction — portrait images need different crops, not just scaling.
- Not pre-generating images server-side — on-the-fly resizing is slow; cache generated variants.
Code Examples
<!-- One large image for all devices:
<img src="hero-2400w.jpg" alt="Hero" style="max-width:100%">
<!-- Mobile: downloads 2400px image, displays at 400px — 6x wasted bandwidth --><!-- srcset for resolution switching:
<img
srcset="hero-400w.webp 400w, hero-800w.webp 800w, hero-1600w.webp 1600w"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
src="hero-800w.jpg"
alt="Hero"
loading="eager" fetchpriority="high"
width="800" height="400">
<!-- picture for format + art direction:
<picture>
<source media="(max-width:600px)" srcset="hero-mobile.avif" type="image/avif">
<source media="(max-width:600px)" srcset="hero-mobile.webp" type="image/webp">
<source srcset="hero-desktop.avif" type="image/avif">
<img src="hero-desktop.jpg" alt="Hero">
</picture>