Next/Image Deep Dive: Real-World Optimization Strategies

next/image handles resizing, modern formats, and lazy loading. Using it well means giving it enough information (sizes, dimensions where possible) and aligning with your layout so you don’t overfetch or layout shift.

Sizing and layout

Use the sizes prop so the browser can pick the right source. Without it, the default can be conservative and request larger images than needed. Match sizes to how the image actually displays at different breakpoints (e.g. full width on mobile, half on desktop).

<Image
  src={post.cover}
  alt={post.title}
  width={800}
  height={450}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
  priority={false}
/>

Use fill when the image is in a container that defines size (e.g. a card or hero); then the parent must have position: relative and a defined size. For fixed layouts, explicit width and height avoid layout shift and help the optimizer.

Priority and LCP

Above-the-fold images that are part of LCP should use priority so they don’t wait for lazy loading. Use it sparingly (hero, first product image). For below-the-fold images, leave priority off so they lazy load.

Placeholders and blur

Use placeholder="blur" with blurDataURL for a quick visual while the image loads. You can generate a tiny base64 blur at build time or use a fixed gray/data URL. That reduces perceived jank. For remote images, you may need to supply blurDataURL yourself or use a placeholder service.

<Image
  src={src}
  alt={alt}
  width={800}
  height={450}
  placeholder="blur"
  blurDataURL={post.blurDataURL}
/>

Remote domains and formats

Configure remotePatterns in next.config.js for external image domains. Rely on the optimizer for format (AVIF/WebP when supported); only disable if you have a specific reason. In production, the optimizer runs automatically when you use next/image with allowed domains.

Summary

Set sizes to match your layout, use priority only for LCP images, and add blur placeholders where it helps. Use fill when the container defines size; use width/height when the layout is fixed. With that, next/image delivers real-world optimization without guesswork.