Learn the concept
Image & Font Optimization
The `next/image` component automatically optimizes images with lazy loading, responsive sizing, modern formats (WebP/AVIF), and prevents Cumulative Layout Shift (CLS), improving both performance and Core Web Vitals.
Benefits of next/image:
Automatic Optimization
Lazy Loading
Prevents Layout Shift
Responsive Images
sizes prop for responsive behaviorBlur Placeholder
Required Props:
src - Image source (local or remote)alt - Accessibility textwidth & height - Required for remote images (or use fill)Next.js 16 Changes:
priority prop is deprecated — use preload instead to eagerly load above-the-fold imagesdomains config is deprecated since v14 — use remotePatterns for remote imagesqualities config is required in next.config.js (default [75])import Image from 'next/image';
// Local image (auto width/height detection)
import profilePic from '../public/profile.jpg';
export default function Profile() {
return (
<div>
{/* Local image - width/height inferred */}
<Image
src={profilePic}
alt="Profile picture"
placeholder="blur" // Built-in blur for local images
/>
{/* Remote image - must specify dimensions */}
<Image
src="https://example.com/photo.jpg"
alt="Remote photo"
width={500}
height={300}
/>
</div>
);
}Build a photo gallery with lazy-loaded thumbnails that only fetch full-resolution images when scrolled into view, using `sizes` for responsive grid layouts and `placeholder='blur'` for smooth loading.
Display product images with automatic WebP/AVIF conversion for faster loads, `fill` mode for consistent aspect ratios across product cards, and `preload` for hero product images.
Render user avatars across the app with consistent sizing, automatic optimization, and `remotePatterns` configured for your CDN or cloud storage provider.
Build a Masonry-style image gallery using next/image with blur placeholders, responsive sizes, fill mode, and lazy loading. Include a lightbox that uses `preload` for the selected image.
Create a page that displays the same images using regular `<img>` tags and `next/image` side by side, with a performance comparison showing load times, file sizes, and Core Web Vitals impact.
Unsplash serves millions of optimized images, using techniques similar to next/image — responsive srcsets, modern formats (WebP/AVIF), and blur-up placeholders for progressive loading.
Vercel's showcase and template gallery uses next/image with automatic optimization to serve project screenshots at optimal quality across devices.