Why should I use the Next.js Image component?

It resizes images for each screen, serves modern formats like WebP, and lazy loads images below the fold. It also reserves space, so the layout does not jump as images load.

How do I use external images in Next.js?

Add the host to images.remotePatterns in next.config.ts . Then pass the full URL to src along with width and height .

What replaced the priority prop in Next.js 16?

The preload prop. It inserts a preload link for the image. For most cases, loading="eager" or fetchPriority="high" is enough.

Why is my Next.js image blurry?

Check the sizes prop first, because a wrong value makes the browser pick a small file. In Next.js 16 only quality 75 is allowed by default. Add other values to images.qualities to use them.

Build / Code / Next.js

Next.js Image Optimization

Optimize images in Next.js with the Image component for faster pages and stable layouts.

TL;DR

Import Image from next/image instead of using an img tag.
Set width and height, or use fill with a sized parent.
Allow external image hosts with remotePatterns in next.config.ts.

Jump to section

Basic Usage
Responsive Images
Loading Behavior
Configuration
Tips
Warnings
In Practice
FAQ

Basic Usage

<Image>

Render an optimized image by giving it a source, alt text, and dimensions.

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Mountain lake at sunrise"
  width={1200}
  height={600}
/>

Static Import

Import a local file so width, height, and blur data are filled in for you.

import hero from './hero.jpg';

<Image
  src={hero}
  alt="Mountain lake"
  placeholder="blur"
/>

alt

Describe the image, or pass an empty string when it is purely decorative.

<Image
  src="/divider.png"
  alt=""
  width={600}
  height={8}
/>

Responsive Images

fill

Stretch the image to cover a parent that has a position and a size.

<div className="relative h-64">
  <Image
    src="/cover.jpg"
    alt="Cover"
    fill
    className="object-cover"
  />
</div>

sizes

Tell the browser how wide the image is at each screen size.

<Image
  src="/card.jpg"
  alt="Card"
  fill
  sizes="(max-width: 768px) 100vw, 33vw"
/>

Fluid Width

Scale an image with CSS while its width and height keep the ratio.

<Image
  src="/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  style={{ width: '100%', height: 'auto' }}
/>

Loading Behavior

preload

Fetch the main image at the top of the page before anything else.

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

loading

Load a small image above the fold right away instead of lazily.

<Image
  src="/logo.png"
  alt="Acme"
  width={120}
  height={40}
  loading="eager"
/>

placeholder

Show a blurred preview while a remote image is still downloading.

<Image
  src="https://images.example.com/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/png;base64,iVBORw0KGgo="
/>

Configuration

remotePatterns

Allow images from an external host by listing it in the config.

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

qualities

List the quality values your app may request; the default allows only 75.

const nextConfig = {
  images: {
    qualities: [50, 75, 90],
  },
};

unoptimized

Serve a file as it is, which suits SVG icons and animated images.

<Image
  src="/icon.svg"
  alt="Settings"
  width={24}
  height={24}
  unoptimized
/>

Tips

Add preload to the one large image at the top of the page, so the browser fetches it before anything else.
Always pass sizes with fill or responsive images, so the browser downloads a file that matches the layout width.

Warnings

The priority prop is deprecated in Next.js 16, so use preload or loading="eager" for images at the top of the page.
An external image fails to load until its host is listed under images.remotePatterns in your config.

In Practice

Build a product card whose image fills its box and loads the right size on every screen.

The wrapper sets the shape with an aspect ratio, so the layout never shifts.
fill makes the image cover the wrapper instead of needing fixed pixels.
sizes matches the grid, so phones do not download a desktop-sized file.
object-cover crops the photo neatly when its ratio differs from the box.

import Image from 'next/image';

type Product = { name: string; image: string; price: number };

type Props = { product: Product };

export function ProductCard({ product }: Props) {
  return (
    <article>
      <div className="relative aspect-square">
        <Image
          src={product.image}
          alt={product.name}
          fill
          sizes="(max-width: 768px) 50vw, 25vw"
          className="object-cover"
        />
      </div>
      <h3>{product.name}</h3>
      <p>${product.price}</p>
    </article>
  );
}