Image optimization with next/image in NextJS

Introduction

Using next/image helps your website load images faster and look better on all devices. It automatically adjusts image size and quality to save data and improve speed.

When you want your website images to load quickly on phones and computers.

When you want to save visitors' data by sending smaller images.

When you want images to look sharp on high-resolution screens.

When you want to easily add lazy loading so images load only when visible.

When you want to support modern image formats without extra work.

Syntax

NextJS

import Image from 'next/image'

export default function Example() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Description of image"
      width={500}
      height={300}
      quality={75}
      priority={true}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  )
}

The src can be a local file path or an external URL if configured.

Always provide alt text for accessibility.

Examples

Basic usage with local image and fixed size.

NextJS

import Image from 'next/image'

export default function Logo() {
  return <Image src="/logo.png" alt="Company logo" width={100} height={100} />
}

Using an external image URL with custom quality.

NextJS

import Image from 'next/image'

export default function ExternalPhoto() {
  return <Image src="https://example.com/photo.jpg" alt="Sample photo" width={800} height={600} quality={80} />
}

Shows a blurred placeholder while the image loads.

NextJS

import Image from 'next/image'

export default function BlurredImage() {
  return <Image src="/landscape.jpg" alt="Beautiful landscape" width={700} height={400} placeholder="blur" blurDataURL="data:image/jpeg;base64,..." />
}

Marks image as high priority to load faster on page load.

NextJS

import Image from 'next/image'

export default function HeroImage() {
  return <Image src="/hero.jpg" alt="Hero image" width={1200} height={800} priority />
}

Sample Program

This component shows a main page with a heading, an optimized image using next/image, and a paragraph. The image uses a blurred placeholder and is marked as priority to load fast.

NextJS

import Image from 'next/image'

export default function HomePage() {
  return (
    <main style={{ maxWidth: '600px', margin: 'auto', padding: '1rem' }}>
      <h1>Welcome to Our Site</h1>
      <Image
        src="/nature.jpg"
        alt="A scenic view of mountains and lake"
        width={600}
        height={400}
        placeholder="blur"
        blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..."
        priority
      />
      <p>This image loads quickly and looks great on all devices.</p>
    </main>
  )
}

Important Notes

Always specify width and height to prevent layout shifts.

Use priority only for important images to avoid slowing down other content.

Configure next.config.js to allow external image domains if needed.

Summary

next/image automatically optimizes images for faster loading and better quality.

Use it to improve user experience on all devices and save bandwidth.

Remember to provide alt text and set image dimensions for best results.