This check identifies images that could use fewer bytes through better dimensions, compression, or delivery settings. It is separate from choosing a modern file format.
Why this matters
Oversized images compete for bandwidth and can delay Largest Contentful Paint. Sending a desktop-sized asset into a small mobile slot wastes data even when the browser visually scales it down.
How to fix it
- Export images close to their maximum rendered dimensions and remove unnecessary metadata.
- Use
srcsetandsizesso the browser can select an appropriate resource for the viewport and layout. - Choose a quality level based on visual review rather than a fixed maximum-quality export.
- Prioritize the likely LCP image; lazy-load images that begin below the fold.
When the finding appears across many URLs, fix the shared component or layout that produces it instead of patching generated HTML page by page. Recheck representative templates and responsive states after deployment so the correction does not create a regression elsewhere.
How to verify the fix
Compare intrinsic and rendered dimensions in DevTools, inspect transferred bytes at mobile breakpoints, and confirm that responsive candidates are selected as expected. Recheck visual quality on high-density displays.
Keep before-and-after evidence for the affected URL, original output, correction, and verification method. If markup changes after load, test consent states, localization, responsive variants, and client-side navigation because the initial HTML and rendered DOM can differ.