Next.js Image Optimization

Next.js Image Optimization: Serving Fast Next-Gen WebP and AVIF Images

Next.js Image Optimization outlines how the built-in <Image> component automatically resizes, converts, and delivers images efficiently to improve web performance.

Standard HTML <img> tags often lead to layout shifts and load unoptimized file formats. The Next.js next/image component solves these issues automatically.

Basic Next.js Image Usage

Import Image from next/image and supply width, height, and alt properties:

// app/profile/page.tsx
import Image from 'next/image';

export default function ProfilePage() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">User Profile</h1>
      <Image
        src="/profile-user.jpg"
        alt="User Profile Photo"
        width={150}
        height={150}
        className="rounded-full shadow-md"
        priority
      />
    </div>
  );
}

Automatic Image Features

• Next-Gen Formatting: Converts PNG and JPEG files to compressed WebP or AVIF formats automatically.
• Zero Cumulative Layout Shift (CLS): Reserves exact space beforehand to prevent page layout jumps.
• Lazy Loading: Delivers images only as they scroll into the user's viewport.
• Responsive Resizing: Generates multiple image sizes for mobile, tablet, and desktop screens.

Configuring Remote Image Domains

To load external images from external URLs, configure allowed remote domain patterns inside next.config.ts:

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
    ],
  },
};

export default nextConfig;

Best Practices

• Add priority to Above-the-Fold Images: Pass the priority prop to hero graphics and banner images to disable lazy loading and boost LCP.
• Always Include Descriptive alt Text: Ensure all images include accessible alternative text strings for screen readers.

Summary

The Next.js <Image> component handles image compression, modern format conversion, and responsive delivery automatically to optimize performance.