Image component and optimization in NextJS

Introduction

The Next.js Image component helps you show pictures on your website faster and clearer. It automatically makes images smaller and loads them smartly so your site feels quick and smooth.

When you want to add pictures to your website that load quickly on all devices.

When you want to save visitors' data by loading smaller images on phones.

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

When you want to improve your website speed without extra work.

When you want to automatically handle different image sizes for different screen widths.

Syntax

NextJS

import Image from 'next/image';

<Image
  src="/path/to/image.jpg"
  alt="Description of image"
  width={widthInPixels}
  height={heightInPixels}
  priority={trueOrFalse}
  placeholder="blur"
  blurDataURL="data:image..."
/>

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

You must provide width and height to help Next.js optimize the image size.

Examples

Basic usage with a local image and fixed size.

NextJS

import Image from 'next/image';

<Image src="/logo.png" alt="Company Logo" width={200} height={100} />

Using an external image URL (make sure to allow the domain in next.config.js).

NextJS

import Image from 'next/image';

<Image src="https://example.com/photo.jpg" alt="Sample Photo" width={600} height={400} />

Shows a blurred placeholder while the full image loads for a smooth effect.

NextJS

import Image from 'next/image';

<Image src="/portrait.jpg" alt="Portrait" width={300} height={400} placeholder="blur" blurDataURL="data:image/jpeg;base64,..." />

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

NextJS

import Image from 'next/image';

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

Sample Program

This component shows a heading and an optimized image with a blur placeholder. The image is sized to 600x400 pixels and loads smoothly.

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="Beautiful nature scene"
        width={600}
        height={400}
        placeholder="blur"
        blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..."
      />
      <p>This image loads with a nice blur effect and is optimized for fast loading.</p>
    </main>
  );
}

Important Notes

Always add meaningful alt text for accessibility so screen readers can describe the image.

Next.js automatically serves images in modern formats like WebP when supported by the browser.

Use the priority prop sparingly for images that must load immediately, like logos or hero images.

Summary

The Next.js Image component makes images load faster and look better automatically.

Provide src, alt, width, and height for best results.

Use features like blur placeholders and priority loading to improve user experience.