Provide multiple widths with srcset
srcset lets you offer several files representing the same image at different widths. The browser can then choose a resource suited to the context.
- Generate a few realistic sizes rather than dozens of variants.
- Keep the same crop when files represent the same visual.
- Use modern formats when your production workflow supports them.
Describe display size with sizes
sizes helps the browser estimate how much layout space the image will use before every style has been calculated.
- Make sizes match the real responsive layout.
- Avoid declaring 100vw if the image never fills the viewport.
- Inspect the resource actually loaded in developer tools.
Reserve space with width and height
Intrinsic dimensions let the browser calculate the aspect ratio and reserve space, reducing visible layout shifts while the image loads.
- Set width and height on content images.
- Keep visual resizing fluid with CSS.
- Use loading=lazy for non-critical images lower on the page.
Practical checklist
- Several relevant widths are available.
- sizes matches the real layout.
- width and height are present.
- Off-screen images use lazy loading.
- File weight and format match the content.
Continue with related resources
Conclusion
Responsive images support both mobile experience and performance. The aim is to download enough pixels for a sharp image, but not far more than necessary.