Responsive Images

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>

References

• ↗ https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Tags

Related Terms