Next.js Image Optimization

Next.js Image Optimization: Fast WebP and AVIF Delivery

Next.js image optimization uses the built-in <Image> component from next/image to resize, compress, and serve images automatically. Instead of shipping oversized PNG or JPEG files, Next.js converts assets into lightweight WebP or AVIF formats per device.

A standard HTML image element often causes layout jumps while loading and downloads full desktop dimensions on mobile phones. The <Image> component reserves space ahead of time and serves responsive sizes for every screen.

Using <Image> for Local Assets

Import Image from next/image and provide src, alt, width, and height props. Add priority on hero banners so they load right away above the fold.

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

export default function ProfilePage() {
  return (
    <section className="p-6">
      <h2 className="text-2xl font-bold mb-4">Account Profile</h2>
      <Image
        src="/avatar-developer.jpg"
        alt="Profile photo of lead engineer"
        width={160}
        height={160}
        className="rounded-full shadow-md"
        priority
      />
    </section>
  );
}

Key Optimization Features Built In

• Modern Format Negotiation: Converts large PNG and JPEG assets to WebP or AVIF when supported by the visitor's browser.
• Zero Layout Shift (CLS): Reserves exact aspect ratio boxes before image bytes arrive, keeping text steady.
• Native Lazy Loading: Delays off-screen images until the user scrolls near them, saving initial bandwidth.
• Responsive srcset Sizing: Generates multiple width variants automatically for mobile, tablet, and desktop screens.

Allowing Remote Image Domains

For security, Next.js blocks external image URLs unless you register allowed hostnames inside next.config.ts.

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

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

export default nextConfig;

Common Mistakes

• Omitting width and height on string src paths: Remote or public/ path strings require width and height (or fill inside a relative container) to prevent layout shift.
• Adding priority to every image on the page: Reserve priority only for the main above-the-fold Largest Contentful Paint image.
• Forgetting remotePatterns in next.config.ts: External images throw a runtime error unless their host matches an entry in remotePatterns.

Frequently Asked Questions

When should I use the fill prop on <Image>?

Use fill when you do not know an image's exact pixel dimensions ahead of time, and give its parent container position: relative with an explicit height or aspect ratio.

Do static ES imports need width and height props?

No, when you write import heroPic from './hero.png' and pass src={heroPic}, Next.js reads the width and height automatically at build time.

Does next/image optimize SVG files?

By default Next.js skips resizing vector SVGs because they scale cleanly; leave SVG icons unoptimized or enable dangerouslyAllowSVG carefully.