Serve images in modern formats (WebP/AVIF), at appropriate dimensions, and with width/height attributes. Unoptimized images are typically the largest assets on a page — a single uncompressed hero image can be larger than all your JavaScript combined, destroying load times on mobile.
Images are typically the largest assets on any web page. A single unoptimized PNG hero image (2MB+) can be larger than all JavaScript, CSS, and HTML combined. Serving oversized images at incorrect dimensions wastes bandwidth, increases LCP, and causes layout shift (CLS) when dimensions are not specified.
BeforeMerge scans your pull requests against this rule and 4+ others. Get actionable feedback before code ships.
Images account for the majority of bytes downloaded on most web pages. The HTTP Archive reports that the median page serves over 1MB of images — often more than all other assets combined.
Three common image problems destroy performance:
Wrong format: Serving PNG or JPEG when WebP (26-34% smaller than JPEG) or AVIF (50% smaller than JPEG) would deliver identical quality. This wastes bandwidth on every page load.
Wrong dimensions: Serving a 4000x3000px image that displays at 400x300px. The browser downloads 10x more pixels than needed, wasting bandwidth and decoding time.
Missing dimensions: Images without width and height attributes cause layout shift (CLS) — the page jumps around as images load, frustrating users and hurting Core Web Vitals scores.
Serve images in WebP or AVIF format, at the dimensions they will be displayed, with explicit width and height attributes. Use responsive srcset for images that display at different sizes on different viewports.
// Unoptimized: wrong format, no dimensions, original size
<img src="/uploads/hero.png" />
// 4000x3000 image displayed at 400x300 — 10x wasted pixels
<img src="/uploads/photo-original.jpg" style={{ width: 400 }} />// Next.js Image component handles format, sizing, and dimensions
import Image from "next/image";
<Image
src="/uploads/hero.jpg"
alt="Hero banner"
width={1200}
height={600}
priority // Above-fold image — preload
/>
// Below-fold image with lazy loading (default behavior)
<Image
src="/uploads/photo.jpg"
alt="Product photo"
width={400}
height={300}
sizes="(max-width: 768px) 100vw, 400px"
/>Use Lighthouse to identify:
Search for raw <img> tags without Next.js Image:
grep -rn '<img ' --include="*.tsx" --include="*.jsx"<img> with Next.js <Image> component for automatic optimizationwidth and height attributes to all images to prevent layout shiftpriority prop on above-fold hero images for preloadingsizes attribute for responsive images so the browser downloads the correct size