The next/image component is a built-in image optimizer: it serves WebP/AVIF, resizes on demand, lazy-loads below-the-fold images, and eliminates layout shift when you set dimensions.
Images are usually the largest contentful paint element, so how you configure them often decides your Lighthouse score.
The settings that matter
A few props control the performance behavior.
- width and height (or fill): reserve space, prevent CLS.
- sizes: tells the optimizer which size to serve per breakpoint.
- priority: preloads the LCP image and disables lazy-loading.
- placeholder: blur-up while loading.
Set priority only on the hero or LCP image. Marking every image priority defeats the purpose of lazy-loading.
Remote images and security
Remote images need remotePatterns in next.config. Local images served by the app use localPatterns and need no config.
Measure the result
After optimizing, verify in DevTools that the hero image loads as a compressed modern format with the right intrinsic size. If the LCP image is still slow, preload it explicitly.
import Image from 'next/image'
<Image
src="/articles/hero.jpg"
alt="Article hero illustration"
width={1600}
height={900}
sizes="(min-width: 1280px) 1200px, 100vw"
priority
/>next/image FAQ
Is the next/image optimizer required?
No, but it is strongly recommended. It handles resizing, format conversion and lazy-loading that you would otherwise implement manually.
Do images count against my hosting bandwidth?
Only the transformed sizes are served, and they are cached, so bandwidth is lower than serving originals.
