Why one image is not enough
A single large JPEG wastes bandwidth on phones and looks soft on retina screens. Responsive images let the browser pick the best file for the device.
The tools
- srcset lists multiple image widths so the browser chooses one that fits the layout and pixel density.
- sizes tells the browser how wide the image will display at each breakpoint, so it can choose before layout.
- The picture element with source lets you swap formats or art direction, like a square crop on mobile.
Formats and loading
- Modern formats like WebP and AVIF cut bytes sharply versus JPEG at similar quality.
- lazy loading with loading equals lazy defers off screen images until needed.
- Setting width and height prevents layout shift by reserving space before the image loads.
Key idea
Responsive images use srcset, sizes, modern formats, and lazy loading so each device downloads only the pixels and bytes it needs.