01

Separate rendered size from source size

CSS determines how much layout space an image occupies, while srcset provides candidate files. The browser combines the viewport, sizes and device pixel ratio to select a source; the width attribute alone does not reveal the downloaded asset.

At representative widths such as 360, 393, 768, 1440 and 1920px, record the rendered CSS width and the requested file width. A source can be larger to serve a high-DPR screen, but a 390px phone should not download a 2400px image without a reason.

02

Make sizes describe the real layout

The sizes value should describe the image's rendered width under each layout condition, not repeat design breakpoints. If a desktop article image is capped at 720px, declaring 100vw will often make the browser choose an unnecessarily large asset.

<img
  src="/hero-960.webp"
  srcset="/hero-640.webp 640w, /hero-960.webp 960w, /hero-1440.webp 1440w"
  sizes="(max-width: 720px) 100vw, 720px"
  alt="Responsive layout test screen"
>
03

Prioritise the LCP image

If the above-the-fold hero is the LCP element, it should not be lazy-loaded. Make it discoverable early in the HTML, provide dimensions and raise its fetch priority only when it is genuinely the key asset. Images further down the page can load later.

Reload under slower network conditions and confirm that a cookie banner, carousel frame or alternate background does not unexpectedly become the LCP element at another viewport.

04

Check cropping, aspect ratio and layout shift

object-fit: cover protects a card ratio but may crop a face, product or embedded text. Review portrait phones, landscape phones, tablets and wide screens instead of checking only that the container does not overflow.

  • Reserve space with width and height or aspect-ratio
  • Verify art-directed sources switch at the intended condition
  • Write alternative text that describes the content
  • Inspect icons and fine lines on 2× and 3× DPR displays
05

Create a repeatable image acceptance record

For each representative viewport, record rendered size, selected source, transfer size, format, LCP and crop result. Retest with the same network and cache state so an improvement reflects the implementation rather than a warm cache.