How does next/image optimize images in Next.js? | Interview Question

Q: How does next/image optimize images in Next.js?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First Sending a 3 MB photo to a phone that shows it 400 pixels wide is like shipping a whole wardrobe when the customer asked for one shirt. next/image is a tailor at the warehouse: it cuts each image to the size and format the device asks for, keeps a copy of each cut, and only sends images that are actually about to be seen. ## 2. The Core Idea 📌 **Interview term: srcset** — an img attribute listing versions of an image

The problem

Question presented to candidate: "Explain what the Next.js Image component does for you compared with a plain img tag, and how you would make a hero image load fast."

What a strong answer should cover:

It resizes and converts images on demand through /_next/image, choosing WebP or AVIF from the browser Accept header, and caches the results.
It generates srcset and uses sizes so the browser downloads only the width it needs.
It lazy-loads by default and reserves space with width and height (or the imported file size), preventing layout shift.
For the LCP image use preload (Next.js 16 deprecates priority), loading="eager" or fetchPriority="high".
Remote images must be allowed in images.remotePatterns; qualities are limited to images.qualities (only 75 by default in 16).

Clarifying questions expected:

"Which image is the largest thing above the fold?" — that one gets preload.
"How wide is the image on each screen size?" — that determines sizes.

Code / implementation expected: Yes — a lazy responsive image and a preloaded hero.

nextjs
next-image
optimization
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

Sending a 3 MB photo to a phone that shows it 400 pixels wide is like shipping a whole wardrobe when the customer asked for one shirt. next/image is a tailor at the warehouse: it cuts each image to the size and format the device asks for, keeps a copy of each cut, and only sends images that are actually about to be seen.

The solution is hidden so you can try first

5 min read · 8 sections

Read the code

A responsive lazy image and a preloaded hero

// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [{ protocol: "https", hostname: "cdn.example.com", pathname: "/products/**" }],
    formats: ["image/avif", "image/webp"],
  },
};
export default nextConfig;

// app/page.tsx
import Image from "next/image";
import hero from "@/public/hero.jpg";

export default function Home() {
  return (
    <>
      <Image src={hero} alt="Summer collection" preload placeholder="blur" sizes="100vw" />
      <Image
        src="https://cdn.example.com/products/shoe.jpg"
        alt="Trail shoe"
        width={800}
        height={600}
        sizes="(max-width: 768px) 100vw, 33vw"
      />
    </>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.