Image optimization with next/image in NextJS - Step-by-Step Execution

Concept Flow - Image optimization with next/image

Import next/image

↓

Use <Image> component

↓

Pass src, width, height

↓

Next.js optimizes image

↓

Browser receives optimized image

↓

Image displays faster and sharper

The flow shows how importing and using the next/image component leads to automatic image optimization and faster loading in the browser.

Execution Sample

NextJS

import Image from 'next/image';

export default function Avatar() {
  return <Image src="/me.png" width={200} height={200} alt="My avatar" />;
}

This code imports the Image component and uses it to display an optimized image with specified width and height.

Execution Table

Step	Action	Input/Props	Next.js Processing	Output/Result
1	Import Image component	import Image from 'next/image'	Ready to use optimized image	Image component available
2	Render <Image>	src='/me.png', width=200, height=200, alt='My avatar'	Analyze props, prepare optimization	Image placeholder created
3	Optimize image	Original /me.png	Resize, compress, format conversion	Optimized image URL generated
4	Send to browser	Optimized image URL	Serve optimized image with caching	Browser receives optimized image
5	Display image	Optimized image data	Browser renders image	Image shown at 200x200 pixels
6	Exit	No further steps	Process complete	Image optimization done

💡 Image is optimized and displayed; no further processing needed.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
src	undefined	"/me.png"	"/_next/image?url=%2Fme.png&w=200&q=75"	Optimized URL (e.g. /_next/image?url=%2Fme.png&w=200&q=75)	Optimized URL
width	undefined	200	200	200	200
height	undefined	200	200	200	200
alt	undefined	"My avatar"	"My avatar"	"My avatar"	"My avatar"

Key Moments - 3 Insights

Why do we need to specify width and height in the <Image> component?

Specifying width and height helps Next.js calculate the image size and reserve space on the page, preventing layout shifts as shown in execution_table step 2.

Does next/image automatically compress and resize images?

Yes, as seen in execution_table step 3, Next.js optimizes images by resizing and compressing them before sending to the browser.

What happens if we use a regular <img> tag instead of next/image?

Using <img> skips Next.js optimization steps, so images load slower and may cause layout shifts, unlike the optimized flow in execution_table.

Visual Quiz - 3 Questions

Look at the execution table, what is the 'src' variable value after step 3?

A Optimized URL like '/_next/image?url=/me.png&w=200&q=75'

B "/me.png"

C undefined

D "/avatar.png"

💡 Hint

Check variable_tracker column 'After Step 3' for 'src' value.

At which step does Next.js generate the optimized image URL?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

See execution_table 'Next.js Processing' column for image optimization.

If we omit width and height props, what likely changes in the execution flow?

A Image optimization is skipped

B Next.js cannot reserve space, causing layout shifts

C Image will not display at all

D Image will load faster

💡 Hint

Refer to key_moments about width and height importance.

Concept Snapshot

Use next/image to automatically optimize images.
Import Image from 'next/image'.
Use <Image src='' width={} height={} alt='' />.
Next.js resizes, compresses, and serves optimized images.
Specifying width and height prevents layout shifts.
Improves load speed and user experience.

Full Transcript

This lesson shows how to use the next/image component in Next.js to optimize images automatically. First, you import the Image component. Then you use it in your component, passing the image source, width, height, and alt text. Next.js processes these props to resize and compress the image, generating an optimized URL. The browser receives this optimized image and displays it at the specified size. Specifying width and height is important to avoid layout shifts. This process improves page speed and image quality without extra work from the developer.

Practice

1. What is the main benefit of using next/image in a Next.js project?

easy

A. It only works with SVG images.

B. It converts images to text for SEO purposes.

C. It disables image loading to save bandwidth.

D. It automatically optimizes images for faster loading and better quality.

Solution

1. Step 1: Understand the purpose of next/image

   The next/image component is designed to optimize images automatically, improving loading speed and quality.

2. Step 2: Compare options with the purpose

   Only It automatically optimizes images for faster loading and better quality. correctly describes this benefit. Other options describe unrelated or incorrect features.

3. Final Answer:

   It automatically optimizes images for faster loading and better quality. -> Option D

4. Quick Check:

   Image optimization = D [OK]

Hint: Remember next/image optimizes images automatically [OK]

Common Mistakes:

• Thinking next/image converts images to text
• Believing it disables image loading
• Assuming it only supports SVG

2. Which of the following is the correct way to import and use the Image component from Next.js for image optimization?

easy

A. import { Image } from 'react';

B. import Image from 'next/image';

C. import Img from 'next/image';

D. import Image from 'next/image';

Solution

1. Step 1: Check import syntax

   The correct import for Next.js image optimization is import Image from 'next/image';.

2. Step 2: Verify usage with required props

   The Image component requires src, alt, and explicit width and height for optimization. import Image from 'next/image';
   includes all correctly.

3. Final Answer:

   import Image from 'next/image'; with src, alt, width, and height props -> Option B

4. Quick Check:

   Correct import and props = B [OK]

Hint: Always import Image from 'next/image' with width and height [OK]

Common Mistakes:

• Importing Image from 'react' instead of 'next/image'
• Omitting width and height props
• Using wrong import names

3. What will be the rendered output behavior of this Next.js code snippet?

import Image from 'next/image';

export default function Logo() {
  return (
    <Image src='/logo.png' alt='Company Logo' width={200} height={100} priority />
  );
}

medium

A. The image loads immediately with 200x100 size due to priority prop.

B. The image will not render because priority is invalid.

C. The image loads lazily by default with 200x100 size.

D. The image loads with default size ignoring width and height.

Solution

1. Step 1: Understand the priority prop effect

   The priority prop forces the image to load immediately instead of lazy loading.

2. Step 2: Check width and height usage

   Width and height props set the image size to 200x100 pixels, which will be respected.

3. Final Answer:

   The image loads immediately with 200x100 size due to priority prop. -> Option A

4. Quick Check:

   priority = immediate load = C [OK]

Hint: priority prop disables lazy loading for faster display [OK]

Common Mistakes:

• Assuming priority disables image rendering
• Thinking width and height are ignored
• Confusing lazy loading default behavior

4. Identify the error in this Next.js image usage and how to fix it:

import Image from 'next/image';

export default function Profile() {
  return (
    <Image src='/profile.jpg' alt='User Profile' width='150' height='150' />
  );
}

medium

A. src path must be an external URL, not local path.

B. alt attribute is missing, causing accessibility issues.

C. width and height should be numbers, not strings.

D. Image component must be self-closing with a slash.

Solution

1. Step 1: Check width and height prop types

   Next.js Image requires width and height as numbers, not strings. Here they are strings ('150').

2. Step 2: Correct the prop types

   Remove quotes to pass numbers: width={150} and height={150}.

3. Final Answer:

   width and height should be numbers, not strings. -> Option C

4. Quick Check:

   width/height as numbers = A [OK]

Hint: Use curly braces for numeric width and height [OK]

Common Mistakes:

• Passing width and height as strings
• Ignoring alt attribute importance
• Thinking local src paths are invalid

5. You want to optimize multiple images with different sizes responsively using next/image. Which approach correctly uses the sizes attribute to serve appropriate image sizes on different screen widths?

hard

A. <Image src='/photo.jpg' alt='Photo' width={800} height={600} sizes='(max-width: 600px) 100vw, 50vw' />

B. <Image src='/photo.jpg' alt='Photo' width='800' height='600' sizes='100vw' />

C. <Image src='/photo.jpg' alt='Photo' width={800} height={600} sizes='(min-width: 600px) 100vw, 50vw' />

D. <Image src='/photo.jpg' alt='Photo' width={800} height={600} />

Solution

1. Step 1: Understand the sizes attribute usage

   The sizes attribute defines image display sizes for different viewport widths using media queries.

2. Step 2: Analyze the options

   <Image src='/photo.jpg' alt='Photo' width={800} height={600} sizes='(max-width: 600px) 100vw, 50vw' /> correctly uses (max-width: 600px) 100vw, 50vw meaning full viewport width on small screens, half on larger screens. This is a common responsive pattern.

3. Final Answer:

   Use sizes='(max-width: 600px) 100vw, 50vw' with numeric width and height. -> Option A

4. Quick Check:

   Responsive sizes attribute = A [OK]

Hint: Use sizes with max-width media query for responsive images [OK]

Common Mistakes:

• Passing width and height as strings
• Using min-width instead of max-width incorrectly
• Omitting sizes attribute for responsiveness