Introduction 👋

Images and fonts are often the heaviest assets on any web page, making them a critical target for optimization. Next.js ships with built-in Image and next/font primitives that handle resizing, lazy loading, format conversion, and font loading automatically. This tutorial covers both in depth.

Image Optimization 🎯

Unoptimized images are one of the most common causes of slow page loads. Next.js automatically resizes, compresses, and serves images in modern formats like WebP, tailored to each user's device.

The Image Component 🧩

The <Image> component from next/image extends the HTML <img> element with automatic optimization. It requires a width and height (or fill) to prevent layout shift.

import Image from "next/image";

export default function Hero() {
  return <Image src="/hero.jpg" alt="Team collaborating" width={1200} height={600} />;
}

Local Images 📁

Local images imported directly from your project automatically receive their width and height from the file itself, so you don't need to specify them manually.

import Image from "next/image";
import logo from "@/public/logo.png";

export default function Logo() {
  return <Image src={logo} alt="Company logo" />;
}

Remote Images 🌐

For remote images — those hosted on an external domain — you must explicitly provide width and height, and allowlist the domain in your Next.js config.

import Image from "next/image";

export default function Avatar({ url }: { url: string }) {
  return <Image src={url} alt="User avatar" width={64} height={64} />;
}

const nextConfig = {
  images: {
    remotePatterns: [{ protocol: "https", hostname: "images.example.com" }],
  },
};

export default nextConfig;

Responsive Images 📐

The sizes prop tells the browser how much screen space an image will occupy at different viewport widths, letting Next.js serve an appropriately sized version instead of a one-size-fits-all image.

import Image from "next/image";

export default function Banner() {
  return (
    <Image
      src="/banner.jpg"
      alt="Promotional banner"
      fill
      sizes="(max-width: 768px) 100vw, 50vw"
    />
  );
}

Image Sizing 📏

Explicit width and height values define the image's aspect ratio, which the browser uses to reserve layout space before the image finishes loading — preventing content from jumping around.

<Image src="/product.jpg" alt="Product photo" width={400} height={400} />

Image Quality 🎚️

The quality prop (1–100) controls the compression level of the optimized image, trading off visual fidelity against file size. The default is 75, which works well for most photos.

<Image src="/hero.jpg" alt="Hero" width={1200} height={600} quality={90} />

Image Formats 🗂️

Next.js automatically negotiates the best supported format per browser — serving AVIF or WebP to modern browsers while falling back to the original format for older ones.

Blur Placeholders 🌫️

Setting placeholder="blur" shows a low-resolution, blurred version of the image while the full image loads, providing a smoother visual transition instead of a blank space.

import Image from "next/image";
import photo from "@/public/photo.jpg";

export default function ArticleImage() {
  return <Image src={photo} alt="Article header" placeholder="blur" />;
}

Lazy Loading Images 💤

By default, every <Image> is lazy loaded — it only starts fetching once it's about to enter the viewport, saving bandwidth on images the user may never scroll to.

<Image src="/gallery-1.jpg" alt="Gallery photo" width={300} height={300} />

Priority Images 🚀

For an image visible above the fold on initial load — like a hero banner — set the priority prop to disable lazy loading and preload it, improving Largest Contentful Paint.

<Image src="/hero.jpg" alt="Hero banner" width={1200} height={600} priority />

Fill Images 🖼️

The fill prop makes an image expand to fill its parent container, which must be positioned relatively — useful for responsive layouts where exact pixel dimensions aren't known ahead of time.

<div style={{ position: "relative", width: "100%", height: 300 }}>
  <Image src="/card.jpg" alt="Card image" fill style={{ objectFit: "cover" }} />
</div>

Image Styling 🎨

Images accept normal className and style props, with objectFit and objectPosition being especially common for controlling how an image crops within its box.

<Image
  src="/thumb.jpg"
  alt="Thumbnail"
  fill
  style={{ objectFit: "cover", borderRadius: 8 }}
/>

Image Security 🔒

Because remote images must be explicitly allowlisted via remotePatterns, Next.js prevents your app from being used as an open image proxy for arbitrary, untrusted URLs.

Image Configuration ⚙️

The images key in next.config.ts controls global image behavior — allowed domains, supported formats, device sizes, and cache duration for optimized images.

const nextConfig = {
  images: {
    formats: ["image/avif", "image/webp"],
    deviceSizes: [640, 750, 828, 1080, 1200],
    minimumCacheTTL: 60,
  },
};

export default nextConfig;

Common Image Patterns 🗺️

<Image src="/hero.jpg" alt="Hero" fill priority style={{ objectFit: "cover" }} />

<Image src={user.avatarUrl} alt={user.name} width={40} height={40} style={{ borderRadius: "50%" }} />

{photos.map((photo) => (
  <Image key={photo.id} src={photo.url} alt={photo.alt} width={200} height={200} />
))}

Font Optimization 🔤

Fonts can significantly impact loading performance and cause visible layout shift if not handled carefully. The next/font package self-hosts fonts and eliminates extra network requests to third-party font services.

The next/font Package 📦

next/font automatically downloads and self-hosts font files at build time — including Google Fonts — so no requests are sent to external servers at runtime, improving both privacy and performance.

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Google Fonts 🔡

Importing any font from next/font/google automatically downloads it at build time and serves it from your own domain — no <link> tag or external stylesheet needed.

import { Roboto } from "next/font/google";

const roboto = Roboto({
  weight: ["400", "700"],
  subsets: ["latin"],
});

Local Fonts 💾

For custom or licensed fonts, next/font/local optimizes and self-hosts font files that already live in your project, applying the same layout-shift prevention as Google Fonts.

import localFont from "next/font/local";

const myFont = localFont({
  src: "./fonts/CustomFont.woff2",
  display: "swap",
});

Variable Fonts 🎛️

Variable fonts pack multiple weights and styles into a single file, and next/font automatically uses the variable version of a Google Font when one is available, reducing the number of downloaded files.

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

Font Display 👁️

The display option controls how a font renders while it's still loading — "swap" shows fallback text immediately and swaps in the custom font once ready, avoiding invisible text.

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"], display: "swap" });

Font Subsetting ✂️

The subsets option tells next/font to include only the character sets your app actually needs — like "latin" — dramatically reducing font file size.

import { Noto_Sans } from "next/font/google";

const notoSans = Noto_Sans({ subsets: ["latin", "cyrillic"] });

Multiple Fonts 🔠

You can load multiple fonts side by side — for example, a heading font and a body font — each assigned to its own CSS variable for use throughout your stylesheets.

import { Inter, Playfair_Display } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-body" });
const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-heading" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Font Performance 🚀

Font Best Practices ✅

Accessibility Considerations ♿

Every <Image> requires meaningful alt text describing its content for assistive technology users; decorative images should use an empty alt="" instead.

<Image src="/decoration.svg" alt="" width={24} height={24} />

Performance Optimization 🚀

Common Mistakes ⚠️

Frequently Asked Questions 💬

Summary 📌