One image does not fit all
Shipping a single large image wastes bytes on small screens and looks blurry when scaled up on large ones. Responsive images let the browser choose.
Srcset and sizes
The srcset attribute lists image candidates with their intrinsic widths. The sizes attribute tells the browser how wide the image will display at different breakpoints. Together they let the browser pick the smallest file that still looks sharp, accounting for device pixel density.
- List several widths so the browser has choices.
- Describe the layout width with sizes, not the file width.
- The browser decides, considering the screen and pixel ratio.
Art direction
When you need a different crop rather than a different size, use the picture element with multiple sources and media conditions to swap the image entirely.
Key idea
Srcset plus sizes lets the browser download the smallest image that still looks sharp, while picture handles different crops for art direction.