Next.js Image Optimization: What You Need to Know

The Next.js Image component does a lot of work for you — automatic format selection (AVIF, WebP), responsive sizing, lazy loading by default, and CDN caching. Most projects get this right by default. The few cases worth knowing: priority, sizes, and remote loaders.

Use priority for above-the-fold images

Images on the initial viewport (hero, logo, primary product image) should set priority. This skips lazy loading and bumps the image's loading priority in the browser. Forgetting this is the most common Largest Contentful Paint regression I see in audits.

Sizes for responsive layouts

If your image fills 100% of the viewport on mobile but 50% on desktop, tell Next via the sizes prop: sizes="(min-width: 1024px) 50vw, 100vw". This tells the browser which size from the srcset to download. Skip it and the browser may pull a 4K image to display in 600px.

Remote images

If you serve images from a CDN or third-party host, configure the loader and the remotePatterns in next.config. Next will not optimize images from unconfigured hosts — by design, to avoid optimizing arbitrary URLs.

Local images vs imports

For images bundled with the app, import them directly: import logo from './logo.png' and pass to <Image src={logo}>. Next handles dimensions automatically — no width/height needed on the component. For URLs, you must provide width and height for layout stability.