I'm trying to understand a Lighthouse/PageSpeed Insights warning about properly sizing responsive images. In a simplified example, an image is about 380 CSS pixels wide on a 412px mobile viewport and uses several width-based candidates: 250w, 300w, 400w, 768w, and 1024w. Its sizes attribute describes the image as nearly full-width on small screens and about 360px wide on larger layouts.
Because browsers account for device pixel ratio when choosing a srcset candidate, a 380px image may need roughly 665px at DPR 1.75, 760px at DPR 2, or 1140px at DPR 3. That means selecting the 768w candidate can be perfectly reasonable, especially on a high-density display.
However, Lighthouse may still report the 768px image as oversized because the rendered CSS width is only around 300–380px. This seems contradictory to the recommendation to provide sufficiently large candidates for high-DPI screens.
Is the audit comparing the intrinsic image width with the rendered CSS width in a way that does not fully account for DPR? Could this create false positives because Lighthouse tests only one fixed viewport and DPR combination? Should this warning be treated as a heuristic when sizes is accurate and the browser is making the expected srcset choice? Would removing the 768w candidate improve the audit but make images softer on real DPR 2–3 devices?
2 Answers
The audit evaluates one point in the responsive-image matrix, while your srcset is meant to serve many viewport and DPR combinations. Its estimate may be less generous than the browser’s spec-based candidate selection, so a correctly configured image can still be flagged.
That said, there is a practical improvement here: the candidates jump from 400w straight to 768w. At roughly 380 CSS pixels and DPR 1.75, the browser needs about 665px, so adding an intermediate candidate around 640w or 672w could reduce the byte jump for those users. That addresses the likely waste without removing the 768w option.
Do not remove 768w solely to satisfy the audit. A DPR 2 device needs close to 760px for this layout, and removing that candidate could force it to download 1024w or receive a softer image. Also remember that audit opportunities generally do not directly reduce the performance score; the actual performance metrics matter more than a warning like this.
You’ve identified a real limitation of the audit. Lighthouse runs one fixed emulated device configuration rather than evaluating every viewport and device-pixel-ratio combination. It can therefore see a roughly 380px CSS box with a 768px resource and call that wasteful, even though a real high-DPI device may need that resolution to avoid a blurry image.
Check the network request on an actual device, or use browser emulation with the relevant DPR, to verify that the browser is selecting the expected candidate. In this situation, the warning is better treated as advisory than as proof that the srcset is wrong.
That’s the confusing part: if the browser requests around 721px for a 412px viewport at DPR 1.75, the extra resolution is expected rather than wasteful.