Next.js Image Optimization: Improve LCP Without Sacrificing Quality

Reserve space before the image arrives

Give every image an intrinsic width and height, or place it in a stable container when using layout="fill". The browser can then calculate the aspect ratio before the asset downloads, which prevents surrounding content from jumping and protects Cumulative Layout Shift.

Optimization cannot rescue a poor source. Crop to the composition used by the page, remove unnecessary metadata, and avoid shipping a huge photograph into a small card.

Make the sizes attribute match the layout

Responsive image generation is most useful when the browser knows how wide an image will render. Without an accurate sizes value, it may select a candidate much larger than the actual slot.

<Image
  src={article.cover}
  alt={article.coverAlt}
  width={1600}
  height={900}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 66vw, 800px"
/>

Inspect the component at real breakpoints and write the smallest honest description of its width. For a fixed editorial column, cap the final size in pixels instead of claiming it fills the viewport forever.

Prioritize the likely LCP image—and only that image

The main hero or product image may deserve priority loading because it is visible immediately and likely to become Largest Contentful Paint. Below-the-fold media should stay lazy. Marking every card as priority competes for bandwidth and can delay the resource that matters.

Use a restrained blur or color placeholder when it improves perceived continuity, but keep its payload tiny. A placeholder is not a reason to delay the final image or create a distracting transition.

Control remote sources and cache behavior

Allow only the image hosts your product needs. Remote URLs are user input when they come from a CMS or account profile, so validate them before rendering. Confirm your loader, deployment platform, and upstream source agree on redirects, content types, maximum file size, and cache lifetime.

• Serve modern formats where client support and transformation cost make sense.
• Keep stable URLs for immutable assets so browser and CDN caches remain effective.
• Prevent SVG or active content from entering a pipeline designed for photographs.
• Use a dedicated loader only when it preserves width, quality, and format semantics.

Pair image-cache choices with the freshness policy in our Next.js cache revalidation guide.

Measure real pages, not isolated image files

Track LCP, CLS, transfer size, selected candidate width, cache status, and decode time on representative devices. Segment by route template and connection quality. Lighthouse is useful during development, but field data reveals the viewport sizes and network conditions your visitors actually use.

When LCP regresses, verify the candidate element, its request start time, server response, selected dimensions, and competition from fonts or scripts. The request-level signals in our Next.js observability guide help connect a slow page with its delivery path.

Next.js image optimization checklist