Providing several srcset candidates is insufficient when sizes describes the wrong image slot. The browser considers that declaration alongside conditions such as pixel density. A mobile view may therefore download an unnecessarily large resource.
This simplified example describes a viewport-wide image up to 640 pixels and a 600-pixel slot above that:
<img src="/image-600.webp"
srcset="/image-400.webp 400w, /image-800.webp 800w, /image-1200.webp 1200w"
sizes="(max-width: 640px) 100vw, 600px"
width="1200" height="800" alt="Product detail">
These values describe this example layout. Account for your actual container padding and maximum width.
Observe selection
Select the image in developer tools and inspect currentSrc. Compare the chosen resource with rendered width and simulated pixel density. Viewport width alone does not determine the selected file.
Repeat with fresh network conditions. Previously fetched assets can influence observations when you merely resize an existing window. Confirm that the candidate files actually have different intrinsic dimensions.
Avoid replacing every sizes declaration with one generic value. A wide hero and a compact product card have different requirements. The image-size calculator supports planning; verify selection against the implemented layout.