next/image automatically converts images to modern formats (WebP/AVIF), lazy-loads by default, prevents layout shift with required dimensions, and serves responsive sizes — next/font loads Google and local fonts with zero layout shift by hosting font files at build time.
Automatic WebP/AVIF conversion, lazy loading by default, required dimensions prevent layout shift, responsive srcset via sizes prop.
Disables lazy loading and preloads the image — use for above-the-fold hero images and LCP elements to improve Largest Contentful Paint.
next/font downloads Google Fonts at build time, self-hosts them, and uses size-adjust for zero layout shift — no external requests at runtime.
Image optimization improves LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift). Font optimization eliminates FOUT and CLS.
Next.js provides built-in optimization for images and fonts — the two assets that most impact page load performance and user experience.
The <Image> component extends the HTML <img> tag with automatic optimization:
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={800}
height={600}
priority
/>Automatic Format Conversion: Serves WebP or AVIF (smaller file sizes) to browsers that support them, falling back to the original format for older browsers. A 500KB JPEG might become a 100KB WebP — massive savings.
Lazy Loading: Images below the fold are loaded only when they enter the viewport (using Intersection Observer). Add priority for above-the-fold images (hero images, LCP elements) to disable lazy loading and preload them.
Layout Shift Prevention: width and height are required (or use fill for responsive containers). Next.js uses these to reserve space in the layout before the image loads — eliminating Cumulative Layout Shift (CLS), a Core Web Vital.
Responsive Images: The sizes prop generates responsive srcset values so the browser downloads the appropriate image size for the device:
<Image
src="/hero.jpg"
alt="Hero"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>Blur Placeholder: For local images, placeholder="blur" shows a blurred low-resolution version while the full image loads. For remote images, provide blurDataURL with a base64-encoded tiny image.
Image Loader: By default, Next.js optimizes images through its built-in image optimization server. For CDN-hosted images, configure remotePatterns in next.config.js and optionally use a custom loader for providers like Cloudinary, Imgix, or Akamai.
Font loading typically causes layout shift (FOUT — Flash of Unstyled Text) when the font file downloads and text reflows. next/font eliminates this:
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function Layout({ children }) {
return <body className={inter.className}>{children}</body>;
}How it works:
size-adjust to match the fallback font's metrics to the custom font — text doesn't reflow when the font loadsnext/font/local loads custom font files from your project with the same optimizationFor third-party scripts (analytics, chat widgets, ads), <Script> controls loading strategy:
strategy="afterInteractive" (default) — loads after the page is interactivestrategy="lazyOnload" — loads during idle time (lowest priority)strategy="beforeInteractive" — loads before hydration (use sparingly)strategy="worker" — offloads to a web worker (experimental)next/image automatically converts to modern formats, lazy-loads below-the-fold images, prevents layout shift with required dimensions, and serves responsive sizes. Use priority for LCP images. next/font downloads fonts at build time and self-hosts them — zero external requests, zero layout shift. Both solve Core Web Vital issues (LCP, CLS) automatically.
Fun Fact
Next.js image optimization was inspired by a study showing that images account for 50% of total page weight on average across the web. The automatic WebP/AVIF conversion alone can reduce image sizes by 25-50%. Google's own performance studies showed that sites using next/image had 57% better LCP scores on average compared to raw <img> tags.