Why it matters
Downloading a 2400px image to display at 300px wastes bytes, memory and decode time.
How to fix it
Serve responsive sizes with srcset + an accurate sizes attribute, or let your image CDN / next/image resize.
Example
<img src="/p-800.avif" srcset="/p-400.avif 400w, /p-800.avif 800w" sizes="(min-width: 768px) 50vw, 100vw" alt="…">References
More performance rules
void perf reports 25 rules in this category. Core Web Vitals and bytes: LCP, CLS, TBT, TTFB, JavaScript, CSS, fonts, images, caching and compression, measured as the median of several runs on a throttled mobile and a desktop profile.
too-many-requestsPage makes many requestslcp-image-lazyLCP image is lazy-loadedlcp-image-no-priorityLCP image has no fetchpriority="high"lcp-background-imageLCP element is a CSS background imageimage-legacy-formatImage served in a legacy formatimages-missing-dimensionsImages without width/height or aspect-ratiorender-blockingRender-blocking resources delay first paintno-text-compressionText resources are served uncompressed