Stop 11 · Next.jsTopics · 11/16

Image Optimization

In short

Images are usually the heaviest thing on a page. The next/image component resizes, compresses and lazy-loads them for you, so pages load fast even on patchy mobile data.

The built-in `next/image` component that automatically resizes, lazy-loads, and serves images in modern formats for better performance.

The jaadu, a tailor with a measuring tape, holds up small, medium and large shirts for two customers.

Think of it like this

The tailor who fits each customer

A good tailor doesn't hand everyone XXL. He takes your size and stitches to fit. next/image does that for photos: a small phone gets a small file, a big laptop gets a bigger one, never more than needed.

Watch it happen

A phone asks for a photo

Phone

/_next/image

Original

pick from srcset

1/5The browser reads sizes, sees a narrow screen, and picks a 640 pixel version.

The big ideas

What you need to know

Width and height, or fill

Give the real size so the browser saves space and the layout doesn't jump. Or use fill inside a sized parent.

sizes for responsive images

The sizes prop tells the browser how wide the image will be on screen, so it picks the right file.

Lazy by default

Images below the fold load only as the user scrolls near them. Use loading="eager" for your main hero image.

Remote images need permission

Images from other domains must be allowed in next.config with images.remotePatterns.

See it in code

Walk through the code

tsx

1import Image from "next/image";2import hero from "./campus.jpg"; // local import: size is known3 4export default function Hero() {5  return (6    <>7      <Image src={hero} alt="Students walking across the campus lawn" loading="eager" />8 9      <div style={{ position: "relative", aspectRatio: "16 / 9" }}>10        <Image src="https://images.example.com/library.jpg" alt="College library"11          fill sizes="(max-width: 768px) 100vw, 50vw" style={{ objectFit: "cover" }} />12      </div>13    </>14  );15}

1/3A local import tells Next.js the width and height automatically.

Local imports give width and height automatically. Remote images use fill plus sizes, and their domain must be in remotePatterns.

Save yourself the pain

Common mistakes

Oops

Using fill without giving the parent a position and size.

Do this instead

The parent needs position: relative and a height or aspect-ratio, or the image collapses.

Oops

Writing alt="image" or leaving alt empty on meaningful pictures.

Do this instead

Describe what's in the image. Screen readers and search engines both use it.

Your mission

Shrink a heavy page

~25 min

Quick check

Your remote image fails with an error about an unconfigured host. What fixes it?

Go deeper

1Replace a plain `<img>` tag with `next/image` and compare the network payload.
2Learn the `priority` prop for above-the-fold images — it skips lazy loading.
3Configure `remotePatterns` in `next.config` to allow external image domains.