Responsive Images: srcset, sizes, and picture Element — Technical Reference

Responsive Images: srcset, sizes, and picture Element — Technical Reference

Serving the right image size to each device reduces bandwidth and improves load time. HTML provides srcset, sizes, and <picture> for this. This guide covers how they work and when to use each.

The Problem

• Desktop: May need 1920×1080 or larger.
• Mobile: 375×667 or similar — serving 1920px wastes bandwidth.
• Retina/HiDPI: 2× or 3× pixel density means logical 400px might need 800px or 1200px of image data.

srcset and sizes (Resolution Switching)

Use when the image is the same content at different resolutions; the browser picks the best source.

x-descriptor (pixel density)

<img src="image-400w.jpg" 
     srcset="image-400w.jpg 1x, image-800w.jpg 2x, image-1200w.jpg 3x"
     alt="Description">

• 1x = standard density
• 2x = Retina (e.g. 2 physical pixels per CSS pixel)
• 3x = high-DPI displays

The browser selects based on devicePixelRatio. No sizes needed.

w-descriptor (width) + sizes

<img src="image-800w.jpg" 
     srcset="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
     alt="Description">

• 400w, 800w = intrinsic width of each candidate in pixels.
• sizes = how wide the image will be displayed (CSS pixels) per media condition.
• Browser uses this to pick a source and can also pick 2x/3x variants if you provide them.

sizes examples

sizes="100vw"                    /* Full viewport width */
sizes="(max-width: 768px) 100vw, 50vw"  /* Mobile full, else half */
sizes="(min-width: 1200px) 800px, 100vw" /* Max 800px on desktop */

The browser uses sizes to compute the needed image width, then picks the smallest candidate that meets or exceeds it (and devicePixelRatio if applicable).

picture Element (Art Direction)

Use when different crops or compositions are needed at different breakpoints (e.g. different framing for mobile vs desktop).

<picture>
  <source media="(max-width: 768px)" srcset="mobile-crop.jpg">
  <source media="(min-width: 769px)" srcset="desktop-crop.jpg">
  <img src="desktop-crop.jpg" alt="Description">
</picture>

• <source> defines candidates; media selects by viewport.
• <img> is fallback and required. Its alt applies to the picture.

picture + multiple densities

<picture>
  <source media="(max-width: 768px)" 
          srcset="mobile-400w.jpg 400w, mobile-800w.jpg 800w"
          sizes="100vw">
  <img src="desktop-800w.jpg" 
       srcset="desktop-800w.jpg 800w, desktop-1600w.jpg 1600w"
       sizes="(min-width: 769px) 800px, 100vw"
       alt="Description">
</picture>

When to Use What

Format Negotiation (WebP, AVIF)

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Description">
</picture>

Browsers pick the first supported format. Fallback is JPEG/PNG in <img>.

Generating Responsive Variants

You need multiple file sizes. Typical widths: 400, 800, 1200, 1600. Use an image resizer or build pipeline.

→ Image resizer — Generate specific dimensions (e.g. 800×450, 1200×675) for responsive breakpoints.

Conclusion

• srcset + sizes: Same image, different resolutions; browser picks by viewport and DPR.
• <picture>: Different crops, formats, or art direction per breakpoint.
• Always provide meaningful alt and a solid src/<img> fallback.

Generate resized images: Image resizer | Image converter for format conversion.

Fri Mar 13 2026 00:00:00 GMT+0000 (Coordinated Universal Time)