Responsive Image Delivery, Done Properly
Serving the right image file for the device, viewport and pixel density that requested it.
Imogen Clarke
At a glance
- srcset offers the browser several files to choose from
- sizes tells the browser how large the image will be displayed
- picture element for art direction and format fallbacks
- Device pixel ratio high-density screens need more pixels for the same size
- Dimensions width and height still required, to prevent layout shift
Why it matters
Why it matters: A single large image sent to every device wastes bandwidth on phones and looks soft on high-density screens, and the markup to fix it is well specified.
Best practice
- Generate the set of sizes the layout actually uses
- Always provide sizes alongside srcset, or the browser guesses badly
- Use picture when the crop changes between breakpoints
- Offer modern formats with a fallback through picture
- Set intrinsic dimensions on every image
Common pitfalls
Watch out for:
- One image file for every breakpoint and density
- srcset without sizes
- Art-direction crops done with CSS object-fit where the subject gets cut
- Generating dozens of variants nobody requests
When to call in a specialist
Bottom line Bring in help when image weight is failing Core Web Vitals, when a CMS is not generating usable variants, or when art direction is needed across breakpoints.
Where this comes from
- MDN Web Docs — Responsive images
- web.dev — Serve responsive images
- HTTP Archive Web Almanac — Media
The figures and practices above come from the sources listed.
Working on something like this?
We take on Image Editing & Retouching work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
