next/image — Optimized Images

`next/image` serves the right format and size to each device and prevents layout shift by reserving space ahead of time.

4 min read Level 2/5 #nextjs#image#performance

What you'll learn

Use the `Image` component with `width` and `height`
Use `fill` inside a responsive container
Configure remote domains in `next.config`

next/image does four jobs at once: resizes for the device, converts to modern formats like AVIF, lazy-loads off-screen images, and prevents Cumulative Layout Shift.

Local Images

import Image from 'next/image'
import hero from './hero.jpg'

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

When you import a local image, Next reads its dimensions automatically and can even generate a blur placeholder from the file at build time.

Remote Images

For remote URLs, supply width, height, and alt:

<Image src="https://cdn.example.com/hero.jpg" width={1200} height={600} alt="Hero" />

Allow the host in next.config.ts:

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

const config: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.example.com', pathname: '/**' },
    ],
  },
}

export default config

Filling a Container

When the parent decides the size, use fill:

<div style={{ position: 'relative', aspectRatio: '16 / 9' }}>
  <Image
    src="/banner.jpg"
    alt=""
    fill
    sizes="(min-width: 768px) 800px, 100vw"
    style={{ objectFit: 'cover' }}
  />
</div>

sizes is the hint the browser uses to pick a resolution; always set it with fill.

next/font — Zero Layout Shift Fonts →