<Image> (Local)

Optimizing static images and preventing layout shift.

Next.js4 min readConcept 48 of 65

The <Image> Component

The Next.js <Image> component is an extension of the standard HTML <img> tag.

It automatically optimizes images by converting them to modern formats (like WebP or AVIF), resizing them for different devices, and preventing Cumulative Layout Shift (CLS).

Cumulative Layout Shift (CLS)

When a standard <img> loads, the browser doesn't know its dimensions until the file finishes downloading. This causes the text below the image to suddenly jump down the page.

This jump is called Cumulative Layout Shift, and it heavily penalizes your Google Lighthouse SEO score.

<Image> fixes this by reserving the exact layout space before the image even loads.

Local Imports

To use a local image, you statically import it: import profilePic from './me.png';

Then pass the imported object to the component: <Image src={profilePic} alt="Me" />.

Next.js automatically determines the width and height from the imported file, so you don't have to specify them manually.

The CLS Simulator

Compare a standard HTML <img> against a Next.js <Image>. Trigger a slow network load to see how the standard image causes text to jump, while Next.js reserves the space and provides a blur placeholder.

Standard <img>

Layout Shift (CLS)

Next.js <Image>

Zero Layout Shift

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Why don't you need to provide `width` and `height` props when using a statically imported local image?

Remember this

  • <Image> prevents Cumulative Layout Shift (CLS).
  • It automatically converts images to smaller formats like WebP.
  • Statically importing local images automatically sets width and height.
  • Use placeholder="blur" for automatic blurred loading states.

Done with this concept?

Mark it complete to track your progress. No login needed.