Lazy Load Images in Next.js: The LCP Guide

2026-08-29

Next.js's <Image> component enables lazy loading by default — images outside the viewport won't download until needed. This is good, but there's one critical exception: LCP (Largest Contentful Paint) images must NOT be lazy-loaded. The LCP image is the first thing users see, and delaying it directly hurts performance scores and user experience.

When to lazy load, when not to

• LCP image (hero image, main first-screen image): must load immediately — use fetchpriority='high'
• Other images above the fold: should load immediately, no lazy loading needed
• Images below the fold: lazy loading is perfectly fine — Next.js Image does this by default
• Very low priority images (footer thumbnails): use placeholder='empty' + loading='lazy' to defer until browser is idle

Lazy loading config for Next.js Image

Default behavior: Next.js Image automatically applies loading='lazy' to all out-of-viewport images. You don't need to add it manually. But LCP images need special treatment — set the fetchpriority='high' and priority props explicitly.

Correct写法 for LCP images

• Add the priority prop: Next.js will pre-fetch this image with higher priority than other page resources
• Add fetchpriority='high': tells the browser this image is critical for LCP
• Ensure correct image dimensions to avoid CLS layout shifts

FAQ

Optimize your image loading now

Audit your Next.js project for LCP candidates — add priority and fetchpriority='high' to those images, leave the rest on default lazy loading.