Image Optimization in Next.js – Local and Remote Images with the <Image> Component

Why Use the <Image> Component?

The next/image component enhances the standard <img> tag with built-in optimizations:

• Size optimization: Automatically serves the best image size and format (e.g., WebP) for each device.
• Visual stability: Prevents layout shifts by reserving space before the image loads.
• Lazy loading: Loads images only when they enter the viewport, improving performance.
• Blur placeholders: Optionally show a low-quality preview while the full image loads.
• Remote support: Resize and optimize images hosted on external servers.

Getting Started

Import the component from next/image and use it in your component:

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

Using Local Images

Place your images inside the /public directory. Then reference them using a relative path from the root:

<Image
  src="/profile.png"
  alt="Picture of the author"
  width={500}
  height={500}
/>

Static Imports

When importing images statically, Next.js automatically infers width, height, and blur placeholder:

import ProfileImage from './profile.png'

<Image
  src={ProfileImage}
  alt="Picture of the author"
  placeholder="blur"
/>

Using Remote Images

You can also use external image URLs:

<Image
  src="https://s3.amazonaws.com/my-bucket/profile.png"
  alt="Picture of the author"
  width={500}
  height={500}
/>

Since remote images aren’t available at build time, you must manually provide width and height to avoid layout shifts. You can also use fill to make the image fill its parent container.

Allowing Remote Domains

To safely use remote images, define allowed domains in next.config.ts:

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

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

export default config

Tip: Be specific with remote patterns to avoid security risks.

Conclusion

The <Image> component in Next.js offers a modern, performance-first approach to image handling. Whether you're working with local assets or remote URLs, it ensures fast loading, visual stability, and responsive behavior across devices.