#next/image — Smart, Fast Images¶

next/image is one of Next.js's biggest wins. It automatically:

• Generates multiple sizes (responsive srcSet)
• Converts to modern formats (AVIF, WebP) on the fly
• Lazy-loads off-screen images
• Blocks layout shift (CLS) by reserving space

Local Images¶

1import Image from "next/image";
2import logo from "@/public/logo.png";
3
4<Image src={logo} alt="CoachNest" />

Local imports include width/height at build time — no dimensions needed.

Remote Images¶

Whitelist the domain in next.config.ts:

1images: {
2  remotePatterns: [
3    { protocol: "https", hostname: "images.unsplash.com" },
4    { protocol: "https", hostname: "cdn.coachnest.dev" },
5  ],
6},

Then provide width/height (or fill):

1<Image
2  src="https://images.unsplash.com/photo-...."
3  alt="Hero"
4  width={1200}
5  height={600}
6/>

The fill Prop¶

For containers where you don't know the dimensions ahead of time:

1<div className="relative aspect-video">
2  <Image
3    src={course.thumbnail}
4    alt={course.title}
5    fill
6    sizes="(max-width: 768px) 100vw, 50vw"
7    className="object-cover"
8  />
9</div>

Next.js 16 change: sizes is now required when using fill. The build will fail without it.

Priority for Above-the-Fold Images¶

1<Image
2  src={hero}
3  alt="…"
4  priority
5  sizes="100vw"
6  className="w-full"
7/>

priority opts out of lazy loading and adds the image to the preload list.

Placeholder & Blur¶

1<Image src={cover} alt="…" placeholder="blur" />

Local imports include a blurDataURL automatically. For remote images, generate one with the plaiceholder library or skip the placeholder.

Quality & Format¶

1<Image src={cover} alt="…" width={1200} height={600} quality={75} />

The default quality (75) is the sweet spot. Increase only if you've measured a visual issue.

Vercel vs Self-Hosted Image Optimization¶

• Vercel runs the optimizer at the edge — no setup.
• Self-hosted uses sharp (a native library). The Docker base image node:20-alpine works; you may need to add apk add vips for some image types.

If you don't want Next.js to optimize images at all (e.g., your CDN already does):

1images: { unoptimized: true }

Common Mistakes¶