Responsive Images with srcset and sizes

The Responsive Image Problem

Serving the same image to every device wastes bandwidth and slows loading. A 1920px-wide hero image downloaded to a 375px-wide phone screen is over five times larger than necessary. The browser scales it down, but the full file still transfers.

Responsive images solve this by letting browsers choose the most appropriate size from available options. You provide multiple versions, and the browser downloads only what it needs based on device screen size and pixel density.

srcset and sizes Basics

The srcset attribute lists available image versions with their widths:

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

The sizes attribute tells the browser how large the image will display at different breakpoints. In this example, the image is 100% of viewport width below 600px and 50% above.

Using this information, the browser calculates which image version best matches the display size and downloads that one. A phone might download the 320px version, while a desktop monitor downloads the 1200px version.

Code Examples

Basic srcset for a full-width image:

<img srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="100vw"
     src="photo-800.jpg" alt="Description">

Common breakpoints for responsive layouts:

<img srcset="img-320.jpg 320w, img-768.jpg 768w, img-1024.jpg 1024w, img-1920.jpg 1920w"
     sizes="(max-width: 320px) 100vw, (max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
     src="img-1024.jpg" alt="Description">

Using Our Resize Tool

Generate multiple image sizes efficiently with our resize tool. Create versions at common breakpoints (320, 768, 1024, 1920) and use consistent naming like filename-320.jpg, filename-768.jpg.

Batch resize multiple images at once by processing them through the tool with the same target dimensions. This ensures consistency across your image library.

Picture Element for Art Direction

The <picture> element goes beyond sizing to support different images at different breakpoints:

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

This is useful when a wide desktop image doesn’t work well on mobile. You might show a close-up crop on phones and the full scene on desktops.

Picture elements also handle format switching:

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

Common Mistakes

Missing sizes attribute forces browsers to assume the image is full viewport width, potentially downloading unnecessarily large files.

Wrong density descriptors confuse browsers. Use width descriptors (320w) rather than pixel density (1x, 2x) unless you’re specifically targeting Retina displays.

Not accounting for DPR — devices with high pixel density (Retina, modern phones) need larger images. A 400px-wide image on a 2x DPR device should ideally be 800px for crisp display.