Key Features of Next.js Image Component

The Next.js Image component extends the HTML <img> element with automatic optimization:

• Size Optimization: Automatically serves correctly sized images for each device using modern formats like WebP

• Visual Stability: Prevents layout shift when images load

• Faster Page Loads: Images only load when they enter the viewport (lazy loading)

• Asset Flexibility: On-demand resizing works with remote images too

Using the Image Component

Basic Usage

import Image from "next/image";

Local Images

For local images, import the image file directly:

import Image from "next/image";
import profilePic from "./me.png";

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width and height are automatically provided
      // blurDataURL is automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  );
}

Next.js automatically determines the width and height from the imported file, which helps prevent layout shift.

Remote Images

For remote images, provide the URL as a string and manually specify width and height:

import Image from "next/image";

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
}

For security, you must define allowed remote image sources in your Next.js config:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "s3.amazonaws.com",
        pathname: "/my-bucket/**",
      },
    ],
  },
};

The Priority Property for LCP Images

This is important: You should add the priority property to the image that will be the Largest Contentful Paint (LCP) element on each page.

<Image src={heroImage} alt="Hero image" priority />

The priority property does two important things:

1. Disables lazy loading for the image

2. Preloads the image

Many developers overlook this and let their LCP image load lazily by default, which reduces performance. When you run next dev, you'll get a console warning if your LCP image lacks the priority attribute.

Without priority, the LCP image only begins loading when it appears on the screen, delaying this important performance metric. With priority, the image loads right away when the page loads.

Image Sizing

To prevent layout shift, images must be sized in one of three ways:

1. Automatically: Using a static import

2. Manually: Specifying width and height

3. Fill: Using the fill property to expand to parent element

If you don't know your image sizes:

• Use fill and style the parent container

• Normalize your images to standard sizes

• Modify your API calls to return image dimensions

Styling the Image Component

Style the Image component using:

• className prop (recommended for most cases)

• style prop for inline styles

When using fill:

• Parent element must have position: relative

• Parent element must have display: block

Common Usage Patterns

Responsive Images

<Image
  src={mountains}
  alt="Mountains"
  sizes="100vw"
  style={{ width: "100%", height: "auto" }}
/>

Fill Container (like a grid of images)

<div style={{ position: "relative", height: "400px" }}>
  <Image
    src={mountains}
    alt="Mountains"
    fill
    sizes="(min-width: 808px) 50vw, 100vw"
    style={{ objectFit: "cover" }}
  />
</div>

Background Image

<Image
  src={mountains}
  alt="Mountains"
  placeholder="blur"
  quality={100}
  fill
  sizes="100vw"
  style={{ objectFit: "cover" }}
/>

Configuration

You can configure the Image component and optimization API in your next.config.js file to:

• Enable remote images

• Define custom breakpoints

• Change caching behavior

• And more