Hint
Modern format (WebP/AVIF), correct sizing, lazy loading, blur placeholder, priority flag for LCP images
Images are the largest contributor to page weight in most apps. Key optimization techniques:
1. Modern formats — WebP is 25–35% smaller than JPEG; AVIF is 50% smaller. Next.js <Image> automatically serves WebP/AVIF via the /api/_next/image optimizer.
2. Correct sizing (srcset) — serve a 300px image on mobile, not a 2000px image scaled down in CSS. Wastes bandwidth otherwise. Next.js generates srcset automatically from the sizes prop.
3. Lazy loading — images below the fold get loading="lazy" — browser only fetches when they enter the viewport.
4. Blur placeholder — while the image loads, a tiny blurred version (base64 inline) fills the space, preventing layout shift and improving perceived performance.
5. Priority / preload for LCP image — the hero image that will be the Largest Contentful Paint element should be preloaded.
// Next.js — LCP hero image
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority // adds <link rel="preload"> in <head>
sizes="100vw"
/>