HTML Responsive Images

Responsive images give the browser candidate files and layout hints so it can choose an appropriate source without shipping a desktop photograph to every phone.

A single huge photograph is a poor default on a phone. Responsive images give the browser candidate files and a layout hint so it can choose a source that matches the rendered size, pixel density, and supported format. The img still needs useful alt and intrinsic dimensions from the HTML Images lesson.

Offer width candidates with srcset and sizes

A w descriptor tells the browser how wide each file is in pixels. sizes describes the layout slot, often with a media condition and a fallback such as 100vw or 720px. Keep a usable src as the fallback for older clients. Lazy-load images below the first viewport; the hero image should usually load immediately.

<img
  src="lesson-800.jpg"
  srcset="lesson-480.jpg 480w, lesson-800.jpg 800w, lesson-1400.jpg 1400w"
  sizes="(max-width: 640px) 100vw, 720px"
  alt="Annotated HTML lesson displayed in a browser"
  width="1400"
  height="900"
>

• src remains a working fallback.
• w descriptors state file widths, not CSS layout.
• sizes describes the expected rendered width.
• The browser may still pick a larger file on a high-density screen.
• alt and width/height still belong on img.