Responsive images with srcset

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

<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.

Export three widths from the same photo: a small, medium, and large version. Name them clearly (harbor-480.jpg, harbor-800.jpg, and so on). Wrong width metadata is worse than no srcset at all, because the browser picks based on those numbers.

Open the Network panel, reload at different viewport widths, and check which file downloaded. You should see the smaller file on a narrow screen when sizes matches your layout.

If every width loads the largest file, your sizes value probably does not match how CSS actually sizes the image. Fix sizes before you add more file variants.

The x descriptor (2x, 3x) is another srcset pattern for fixed-size images on high-density screens. The w plus sizes pattern fits responsive layouts better. Pick the model that matches how the image actually scales in your design.

Quick check

Start quiz

Result

You got of right.

Try again