Responsive Images with srcset and sizes

Serve correctly sized images for every screen using srcset, sizes, and the picture element.

Overview

Serving one large image to all devices wastes bandwidth on mobile and may look blurry on high-DPI screens. The srcset and sizes attributes on <img> solve this they let the browser pick the most appropriate image from a set you define. srcset lists available image files with their widths (in w descriptors) or pixel densities (x descriptors). sizes tells the browser how wide the image will be displayed at different viewport widths. The browser combines this information with its knowledge of the screen resolution to download the optimal file. The <picture> element extends this further, allowing art direction showing a completely different crop or composition on different screen sizes.

Key Points

•srcset with w descriptors: lists image files and their intrinsic widths in pixels
•sizes tells the browser the rendered width of the image at different breakpoints
•The browser chooses the best src from srcset based on viewport, screen DPI, and sizes
•Without sizes, browsers assume the image is 100vw wide (usually wrong)
•x descriptors (1x, 2x) are simpler but only account for pixel density, not layout width
•<picture> is for art direction different image content, not just different sizes of the same image

Examples

srcset with w descriptors and sizes

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg  400w,
    hero-800.jpg  800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w
  "
  sizes="
    (max-width: 600px)  100vw,
    (max-width: 1200px) 75vw,
    800px
  "
  alt="Mountain landscape at sunrise"
  width="800"
  height="450"
>

sizes: "on mobile full width, on tablet 75% of viewport, otherwise 800px". The browser downloads accordingly.

srcset with pixel density (2x Retina)

<!-- Simple 1x/2x density switching -->
<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Company logo"
  width="200"
  height="60"
>

x descriptors are simpler but don't account for layout width use for logos, icons.

<picture> for art direction

<!-- Different crop on mobile vs desktop -->
<picture>
  <!-- Portrait crop on phones -->
  <source
    media="(max-width: 480px)"
    srcset="hero-portrait-480.jpg"
  >
  <!-- Wide landscape on desktop -->
  <source
    media="(min-width: 481px)"
    srcset="hero-landscape-1200.jpg 1200w, hero-landscape-800.jpg 800w"
    sizes="100vw"
  >
  <!-- Fallback img required -->
  <img src="hero-landscape-800.jpg" alt="Team working in the office">
</picture>

Art direction: show a completely different composition on small screens.

WebP with PNG fallback using <picture>

<picture>
  <source srcset="photo.webp" type="image/webp">
  <source srcset="photo.jpg"  type="image/jpeg">
  <img src="photo.jpg" alt="Photo description">
</picture>

Browsers that support WebP use the first source; others fall back to JPEG.

Common Mistakes

Omitting sizes browser assumes 100vw, may download an unnecessarily large image
Using srcset without width/height attributes causes layout shift
Art direction with srcset only use <picture> + <source media=""> for art direction

Note

Use a tool like Squoosh (squoosh.app) or Sharp (Node.js) to generate multiple sizes. The typical set for a full-width hero: 400w, 800w, 1200w, 1600w at JPEG + WebP pairs.

Responsive Images with srcset and sizes

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does the w descriptor in srcset specify?