How to Use Image Component in Next.js for Optimized Images

In Next.js, use the Image component from next/image to automatically optimize images with features like lazy loading and resizing. Import it and use it like a regular img tag but with added props such as src, width, and height for best performance.

Syntax

The Image component requires importing from next/image. You use it by providing src (image path or URL), width, and height to define the image size. Optional props include alt for accessibility and layout for responsive behavior.

• src: Path or URL of the image.
• width: Width of the image in pixels.
• height: Height of the image in pixels.
• alt: Text description for screen readers.
• layout: Controls image sizing behavior (e.g., fixed, responsive, fill).

jsx

import Image from 'next/image';

export default function MyImage() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Description of image"
      width={500}
      height={300}
      layout="fixed" // optional
    />
  );
}

Example

This example shows a simple Next.js component using the Image component to display a local image with specified width and height. It demonstrates automatic optimization and lazy loading.

jsx

import Image from 'next/image';

export default function Example() {
  return (
    <main style={{ maxWidth: '600px', margin: 'auto' }}>
      <h1>Next.js Image Component Example</h1>
      <Image
        src="/vercel.png"
        alt="Vercel Logo"
        width={400}
        height={200}
      />
      <p>This image is optimized and lazy loaded automatically.</p>
    </main>
  );
}

Output

<main style="max-width: 600px; margin: auto;">
  <h1>Next.js Image Component Example</h1>
  <img src="/_next/image?url=%2Fvercel.png&w=400&q=75" alt="Vercel Logo" width="400" height="200" loading="lazy" />
  <p>This image is optimized and lazy loaded automatically.</p>
</main>

Common Pitfalls

Common mistakes when using the Next.js Image component include:

• Not specifying width and height, which can cause layout shifts.
• Using external image URLs without configuring next.config.js to allow those domains.
• Forgetting the alt attribute, which hurts accessibility.
• Trying to use the component like a normal img without importing it from next/image.

jsx

/* Wrong: Missing width and height */
import Image from 'next/image';

export default function Wrong() {
  return <Image src="/vercel.png" alt="Vercel Logo" />; // Causes layout shift warning
}

/* Right: Specify width and height */
export default function Right() {
  return <Image src="/vercel.png" alt="Vercel Logo" width={400} height={200} />;
}

Quick Reference

Prop	Description	Required	Example
src	Image source path or URL	Yes	"/image.png" or "https://example.com/image.jpg"
width	Width of the image in pixels	Yes (unless layout="fill")	400
height	Height of the image in pixels	Yes (unless layout="fill")	300
alt	Alternative text for accessibility	Yes	"A descriptive text"
layout	Controls sizing: fixed, responsive, fill	No	"responsive"
priority	Loads image eagerly for above-the-fold	No	true
placeholder	Shows a placeholder while loading	No	"blur"

Key Takeaways

Always import Image from 'next/image' to use Next.js optimized images.

Specify width and height props to prevent layout shifts and improve performance.

Use the alt attribute for accessibility and SEO benefits.

Configure next.config.js for external image domains if needed.

The Image component automatically lazy loads and optimizes images for you.