Responsive images with srcset and sizes — a practical guide

A 2400px wide hero image on a 375px wide phone screen is downloading 6× more data than needed. The srcset attribute lets you serve the right size for every screen.

The problem

Without responsive images, every device downloads the same file:

<!-- Every device downloads the 2400px image -->
<img src="hero-2400.jpg" alt="..." />

A phone on a cellular connection downloads 800 KB when 150 KB would have been enough.

The solution: srcset

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

The browser picks the best image based on the viewport width and device pixel ratio.

How srcset works

srcset lists available image files and their widths (using the w descriptor):

hero-400.jpg  400w   → 400px wide
hero-800.jpg  800w   → 800px wide
hero-1200.jpg 1200w  → 1200px wide
hero-2400.jpg 2400w  → 2400px wide

The browser combines this with the sizes attribute and the device's pixel ratio to choose the optimal file.

How sizes works

sizes tells the browser how wide the image will be displayed at different viewport widths:

sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"

This reads as:

• On screens up to 600px wide: the image fills 100% of the viewport
• On screens 601–1200px wide: the image fills 50% of the viewport
• On screens wider than 1200px: the image is displayed at 800px

Practical example

A blog with a content area that's 100% on mobile and 768px max on desktop:

<img
  src="post-image-768.jpg"
  srcset="post-image-384.jpg 384w, post-image-768.jpg 768w, post-image-1536.jpg 1536w"
  sizes="(max-width: 768px) 100vw, 768px"
  alt="..."
  width="1536"
  height="1024"
/>

On a phone (375px, 2× pixel ratio): browser needs 750px → picks post-image-768.jpg On a phone (375px, 3× pixel ratio): browser needs 1125px → picks post-image-1536.jpg On desktop: browser needs 768px (1× or 1536px (2×) → picks accordingly

How many sizes do you need?

For most sites, 3–4 sizes is sufficient:

1. Small: 400px (for mobile at 1×)
2. Medium: 800px (for mobile at 2× and small tablets)
3. Large: 1200px (for desktop at 1× and tablets at 2×)
4. Extra large: 2400px (for desktop at 2×, optional)

Don't create 10 different sizes — the diminishing returns aren't worth the build complexity.

Generating the sizes

Use our resize tool to create each size from your original:

1. Drop your full-resolution image
2. Set the width to 400, download
3. Set the width to 800, download
4. Set the width to 1200, download

For batch workflows, create a simple script that calls your image processing pipeline for each breakpoint.

The picture element alternative

For format switching (not just size switching), use <picture>:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="..." width="1200" height="800" />
</picture>

You can combine <picture> with srcset for both format and size adaptation, but this gets complex fast. For most sites, srcset with a single format (WebP) is the pragmatic choice.