Images and media

Responsive images with srcset

Offer several versions of the same image so the browser can choose an appropriate file for the available display width.

8 minute lesson

~~~

A large image looks sharp on a wide screen but wastes bandwidth on a small one. srcset lets you offer alternatives:

The browser picks an image that fits the available space.

<img
  src="harbor-800.jpg"
  srcset="
    harbor-480.jpg 480w,
    harbor-800.jpg 800w,
    harbor-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Cyclists crossing the harbor bridge"
  width="1200"
  height="800"
>

Each w descriptor gives the file’s intrinsic width. 480w means that source is 480 pixels wide.

sizes tells the browser how wide the image will be in the layout:

up to a 600-pixel viewport, it uses the full viewport width
otherwise, it is about 800 pixels wide

The browser combines that information with screen density and network conditions to choose a source. You do not dictate the exact file.

Keep src as a fallback and as the default candidate. Every source should show the same image composition. If the composition needs to change, use picture instead.

Quick check

Result

You got of right.

Lesson completed