Images: the biggest LCP win

Why images dominate LCP

The largest paint is almost always a hero image. Optimizing it gives you the biggest single LCP improvement.

Five-minute checklist

1. Serve modern formats: AVIF first, WebP fallback, JPEG last.
2. Use srcset + sizes so mobile gets a small file.
3. Set explicit width and height — prevents CLS.
4. loading="lazy" for below-the-fold, loading="eager" for hero.
5. fetchpriority="high" on the LCP image.

Next.js shortcut

<Image> component handles formats, srcset, lazy loading and dimensions automatically.