Responsive Images

A phone with a small screen shouldn't download a desktop-sized photo, and a high-resolution display deserves sharper images. HTML's srcset, sizes and <picture> let you offer several versions of an image and have the browser pick the best one.

The problem

A single 2000-pixel-wide photo looks great on a large monitor but wastes megabytes on a phone. A 400-pixel image is fast but blurry on a big or high-density screen. Responsive images solve both problems at once.

Resolution switching with srcset (x descriptors)

For an image displayed at a fixed size, offer versions for different pixel densities:

A standard screen downloads the 1× file; a "retina" phone with twice the pixel density downloads the 2× file. src remains as a fallback for very old browsers.

Width descriptors and sizes

For images whose displayed size changes with the layout, describe each file's actual width with w, and tell the browser how wide the image will be shown with sizes:

Read sizes as: "on screens up to 600px wide, the image fills the whole viewport width (100vw); otherwise it fills half (50vw)." The browser combines this with the screen's pixel density to choose the smallest file that will look sharp. You describe the facts; the browser makes the decision, and it can also factor in things like a slow connection.

Art direction with <picture>

Sometimes you want a different crop on small screens — a close-up instead of a wide shot. <picture> with media conditions gives you that control:

The browser uses the first <source> whose media matches. The <img> inside is required: it provides the fallback, the alt text and the sizing — the sources only change which file is used. Resize your browser window to see the image switch.

Modern formats with fallbacks

<picture> can also offer newer, smaller formats, letting browsers skip the ones they don't support:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Our team at the summer offsite" width="1200" height="600">
</picture>

AVIF and WebP files are often 30–50% smaller than JPEG at the same quality. Every current browser supports WebP, and AVIF has broad support, so the JPEG is a fallback for older software.

Which technique when?

Generating the files

You won't usually make every size by hand. Image CDNs and services (Cloudinary, imgix, Cloudflare Images), framework components such as Next.js's <Image>, and build tools can create the variants automatically from one original. The HTML they produce uses exactly the attributes in this lesson.

SVG images

Vector images like SVG don't need multiple sizes at all — they're sharp at every size and density. Use them for logos, icons and diagrams (lesson 41).

Try it yourself

Drag the edge of your browser window to make it narrower and wider, and watch which image the picture element chooses: