Intermediate12 min read

Images And Fonts Optimization

Deliver optimized images and stable typography with next/image and next/font.

next/image

The Image component optimizes on demand — serves WebP/AVIF, resizes to requested dimensions, and lazy loads by default. Requires width/height or fill prop to prevent layout shift.

Configure remotePatterns in next.config for external image domains. priority prop on above-fold hero images disables lazy loading for LCP optimization.

Automatic format and size optimization
width/height prevent CLS
remotePatterns for external domains

import Image from 'next/image';
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

Responsive Images

sizes prop tells browser which viewport widths image serves — enables appropriate srcset selection. fill with object-fit covers container responsive layouts.

For art direction, use picture element or separate mobile/desktop Image components with media queries in CSS hiding/showing appropriately.

sizes prop for srcset selection
fill + object-fit for containers
Art direction with picture element

next/font

Import fonts from next/font/google or next/font/local — fonts self-host at build time, eliminating external Google Fonts requests and layout shift from font swap. CSS variable integration enables font families in Tailwind config.

Subset fonts to used character ranges when possible. Limit font weight variants loaded — each weight adds bundle size.

Self-hosted fonts at build
No external font requests
CSS variables for Tailwind integration

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });

Layout Shift Prevention

Reserve space for images with explicit dimensions or aspect-ratio CSS. Font display swap with size-adjust fallback reduces FOIT/FOUT. Measure CLS in Lighthouse — target under 0.1.

Skeleton placeholders matching final content dimensions prevent jarring layout jumps during image load.

Explicit dimensions or aspect-ratio
CLS target under 0.1
Skeleton placeholders match final size

CDN and Static Export

Static export (`output: 'export'`) serves images without optimization server — use pre-optimized assets or external image CDN. Standard Next.js deployment on Vercel uses Image Optimization API automatically.

Configure loader prop for Cloudinary, Imgix, or custom CDN integration when self-hosting optimization infrastructure.