Image Optimization

The Next.js <Image> component automatically optimizes images for size, format, and loading.
Images are lazy loaded by default - only loading when they enter the viewport.
Automatic WebP/AVIF conversion reduces file sizes by 30-50%.
Built-in blur placeholders improve perceived loading performance.
Use priority for above-the-fold images to optimize Largest Contentful Paint (LCP).
The fill prop allows images to fill their parent container for responsive layouts.
Properly sized images prevent Cumulative Layout Shift (CLS).

app/page.tsx

1import Image from 'next/image';
2
3export default function Hero() {
4  return (
5    <Image
6      src="/hero.jpg"
7      alt="Hero image"
8      width={1200}
9      height={600}
10      priority // Preload for LCP
11      placeholder="blur" // Show blur while loading
12      quality={85} // Compression (1-100)
13      sizes="(max-width: 768px) 100vw, 50vw"
14    />
15  );
16}
17
18// Fill mode for unknown dimensions
19<div className="relative h-64">
20  // !mark
21  <Image src="/bg.jpg" alt="" fill className="object-cover" />
22</div>;

Demo

Priority Loading: Compare preloaded vs lazy-loaded images.
Basic Images: Fixed dimensions prevent layout shift.
Placeholders: Blur, empty, and color placeholder strategies.
Responsive: Using sizes for optimal image selection.
Fill Mode: Different object-fit behaviors.
Comparison: Next.js Image vs native img benefits.

Key Props

Prop	Purpose
`priority`	Preload image, disable lazy loading
`placeholder`	`"blur"` or `"empty"`
`sizes`	Responsive image sizing hints
`fill`	Fill parent container
`quality`	Compression level (1-100, default 75)