Next.js Course
Next.js
/
Beginner

Image Component

Definition

The `<Image>` component (`next/image`) is a massive upgrade over the standard HTML `<img>` tag, automatically preventing layout shifts and optimizing file sizes.

Explain Like I'm New

If you use a standard `<img>` tag for a 5MB 4K photo, the user's phone downloads 5MB and lags. If you use Next.js `<Image>`, the Next.js server automatically intercepts the photo, shrinks it to the exact size of the user's phone screen, converts it to WebP format, and sends a 30kb file instead.

Real World Example

Replacing all `<img>` tags on an e-commerce site with `<Image>` tags and instantly increasing the Google Lighthouse performance score by 30 points.

Common Use Cases

  • •Core Web Vitals optimization
  • •Responsive design
  • •Bandwidth saving

Interactive Example

import Image from 'next/image';
import profilePic from '@/public/me.png'; // Local image import

export default function Page() {
  return (
    <div>
      {/* 1. Local Image (Next.js automatically reads the width/height from the file!) */}
      <Image 
        src={profilePic} 
        alt="My Profile" 
        placeholder="blur" // Shows a blurry tiny preview while loading
      />

      {/* 2. Remote Image (You MUST provide width/height manually) */}
      <Image
        src="https://s3.amazonaws.com/my-bucket/hero.jpg"
        alt="Hero Graphic"
        width={1200}
        height={600}
      />
    </div>
  );
}

Interview Questions

basic

  • Why does Next.js force you to provide `width` and `height` properties when using the `<Image>` component?

intermediate

  • What happens if you try to load an image from an external website (like `https://unsplash.com/photo.jpg`) using `<Image>` without configuring it first?

Flash Cards

Question

Why width and height?

Click to reveal answer
Answer

To prevent Cumulative Layout Shift (CLS). By knowing the dimensions beforehand, the browser can reserve the exact physical space on the screen *before* the image loads, preventing the page from violently 'jumping' downwards when the image finally appears.

Question

External domains?

Click to reveal answer
Answer

It will throw an error. For security reasons (and to prevent your server from being used to maliciously optimize infinite random images), you must explicitly 'whitelist' external domains in your `next.config.js` file.