Frontend Beauty
ESC

Type to search the knowledge base.

Image Component Optimization

next/image optimizes responsive images: sizing, remote patterns, priority LCP, and common layout shift fixes.

intermediate3 min read
  • nextjs
  • image-component

next/image extends <img> with resizing, modern formats, lazy loading, and layout shift prevention when you give it dimensions or fill + positioned parent.

Docs: Image Optimization.

Basic usage

import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Team at work"
      width={1200}
      height={600}
      priority
    />
  );
}

priority for LCP candidates disables lazy loading and elevates fetch priority.

fill layout

<div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 9' }}>
  <Image src={url} alt="" fill sizes="(max-width: 768px) 100vw, 50vw" />
</div>

sizes tells the browser which width to pick from srcset — without it, mobile may download desktop-sized images.

Remote images

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.example.com' },
    ],
  },
};

Unlisted hosts are rejected — intentional safety.

Footguns

Issue Fix
CLS width/height or reserved aspect-ratio box
Huge mobile download correct sizes
Broken remote remotePatterns
SVG quirks check unoptimized / config

Interview out-loud

“next/image generates responsive srcset, lazy-loads by default, and prevents CLS with dimensions. I set priority on LCP images, sizes for responsive selection, and remotePatterns for external hosts.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Quick self-test

Explain the concept in 60 seconds, write a minimal code sample from memory, name one footgun, and point to the primary docs. If any of those fail, reread the worked example and rebuild it in a scratch file until the model sticks under interview pressure.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides