image/4/io
Framework Guides· Framework Guide

Next.js image optimization guide

How to ship responsive images in Next.js with sane remote patterns, right-sized assets, and predictable LCP behavior.

Next.js solves a lot for you, but it still lets teams ship oversized source files, broad remote allowlists, and layout-shifting hero images. The right setup is mostly about guardrails.

Best for

Teams already using next/image

Default goal

Stable layout plus responsive delivery

Watch closely

Remote host patterns and LCP hero images

Recommended setup

Use `next/image` for all editorial and product imagery that ships in the main UI. Reserve raw `<img>` tags for edge cases where you fully control the markup and already know the cost.

Keep remote host configuration narrow. The real risk is not performance alone, but letting arbitrary hosts use your optimization endpoint and cache.

  • Import local assets when possible so width and height are inferred automatically.
  • For remote images, define exact `remotePatterns` and supply explicit dimensions or `fill` with a stable parent ratio.
  • Use `priority` only for the real LCP image, not for every above-the-fold asset.

Baseline product hero in Next.js

import Image from 'next/image'

export function ProductHero() {
  return (
    <Image
      src="https://cdn.example.com/products/camera-hero.jpg"
      alt="Front view of the camera body"
      width={1440}
      height={960}
      sizes="(min-width: 1280px) 1200px, 100vw"
      priority
    />
  )
}

What to measure

  • Largest Contentful Paint on article and landing templates.
  • Bytes transferred for hero, card, and gallery images.
  • Number of unique remote origins routed through image optimization.

When this page should win the SERP

The differentiator is implementation clarity: exact component usage, sizing strategy, and remote-image policy. That is the layer generic “image optimization” posts usually skip.

Checklist

  • Use `next/image` for the main UI, not a mix of component and raw tags without a reason.
  • Set exact `sizes` values for responsive layouts.
  • Limit `priority` to the real LCP candidate.
  • Keep remote host patterns narrow and explicit.

Common mistakes

  • Treating `next/image` as a performance guarantee while still serving oversized source files.
  • Using `fill` without a predictable aspect ratio on the container.
  • Adding too many remote sources and turning the optimizer into a broad proxy.

Quick answers

Should every Next.js image use next/image?

Most UI images should. The exceptions are deliberate: emails, third-party embed markup, or cases where the optimization layer adds no value.

What usually breaks Next.js image performance?

Oversized source assets, bad `sizes` attributes, and broad remote allowlists are more damaging than the component choice itself.