Why Image Optimization Matters
Images account for 50%+ of page weight on most websites. Proper optimization directly impacts Largest Contentful Paint (LCP).
The Next.js Image Component
import Image from "next/image";<Image src="/hero.jpg" width={1200} height={600} alt="Hero image" priority /><Image src="/photo.jpg" width={800} height={600} sizes="(max-width: 768px) 100vw, 50vw" placeholder="blur" blurDataURL="data:image/jpeg;base64,..." alt="Photo"/>Best Practices
Use priority for LCP images
Set explicit width and height
Use sizes attribute for responsive images
Prefer AVIF format (30% smaller than WebP)
Use blur placeholders below the fold
Lazy load images not immediately visible
Measuring Impact
LCP < 2.5 seconds
CLS < 0.1
FID < 100ms