Use the framework Image component with srcset and AVIF/WebP so each device downloads an appropriately sized, well-compressed image.
Images are typically the heaviest bytes on a page; oversized formats directly inflate LCP and bandwidth.
BeforeMerge scans your pull requests against this rule and dozens more. Get actionable feedback before code ships.
Unoptimized images dominate page weight. Modern formats (AVIF, WebP) are 25-50% smaller than JPEG/PNG, and srcset avoids shipping desktop-sized images to phones.
<!-- bad: one large JPEG for every device -->
<img src="/banner-2000w.jpg" />
<!-- good: responsive sources + modern format -->
<img src="/banner-800.webp" srcset="/banner-400.webp 400w, /banner-800.webp 800w"
sizes="(max-width: 600px) 100vw, 800px" width="800" height="450" />Prefer the framework's optimizer (Next.js <Image>) which emits AVIF/WebP and correct srcset automatically.