Responsive images in NextJS - Step-by-Step Execution

Concept Flow - Responsive images

Start: Define Image Component

↓

Set src, width, height, sizes

↓

Next.js Image optimizes image

↓

Browser loads image

↓

Browser checks viewport size

↓

Browser selects best image size

↓

Image displays responsively

↓

End

This flow shows how Next.js Image component uses provided sizes and dimensions to serve the best image size for the user's screen, making images responsive.

Execution Sample

NextJS

import Image from 'next/image'

export default function Example() {
  return <Image src="/photo.jpg" width={800} height={600} sizes="(max-width: 600px) 100vw, 800px" alt="Sample" />
}

This code renders a responsive image that adjusts size based on screen width using Next.js Image component.

Execution Table

Step	Action	Input/State	Result/Output
1	Component renders	src='/photo.jpg', width=800, height=600, sizes='(max-width: 600px) 100vw, 800px'	Next.js prepares image with multiple sizes
2	Browser loads page	Viewport width unknown yet	Image placeholder reserved with correct aspect ratio
3	Browser evaluates viewport width	Viewport width = 500px (example)	Matches '(max-width: 600px) 100vw' condition
4	Browser selects image size	sizes='100vw' means 100% viewport width	Loads image sized to 500px width
5	Image displays	Image loaded at 500px width	Image fits screen responsively
6	Resize browser to 700px	Viewport width = 700px	Matches fallback '800px' size
7	Browser selects image size	sizes='800px'	Loads image sized to 800px width
8	Image displays	Image loaded at 800px width	Image fits larger screen
9	End	All steps complete	Responsive image behavior achieved

💡 Execution stops after image loads and displays responsively for current viewport size.

Variable Tracker

Variable	Start	After Step 3	After Step 6	Final
viewportWidth	unknown	500	700	700
selectedImageWidth	none	500	800	800
imageDisplayed	no	yes (500px wide)	yes (800px wide)	yes (800px wide)

Key Moments - 3 Insights

Why does the image load at 500px width when the viewport is 500px?

Because the sizes attribute says for max-width 600px use 100vw (100% viewport width), so the browser picks an image sized to 500px to fit exactly.

What happens when the viewport width grows larger than 600px?

The browser uses the fallback size '800px' from sizes attribute and loads a larger image to fit the bigger screen.

Why do we provide width and height props if the image size changes?

Width and height define the original image's aspect ratio so Next.js can reserve space and avoid layout shifts while loading responsive sizes.

Visual Quiz - 3 Questions

Look at the execution table, what is the selectedImageWidth at step 4?

A 600

B 500

C 800

D 1000

💡 Hint

Check the 'selectedImageWidth' value after step 3 and step 4 in the execution_table.

At which step does the viewport width change to 700px?

A Step 6

B Step 3

C Step 2

D Step 8

💡 Hint

Look for the step where viewportWidth changes from 500 to 700 in variable_tracker and execution_table.

If the sizes attribute was '(max-width: 400px) 100vw, 600px', what image width would load at viewport 500px?

A 500px

B 400px

C 600px

D 800px

💡 Hint

Check how sizes fallback works when viewport is larger than max-width condition in execution_table.

Concept Snapshot

Next.js Responsive Images
- Use <Image> with src, width, height, sizes props
- sizes tells browser which image width to pick based on viewport
- Browser picks best image size for screen
- Width/height reserve space to prevent layout shift
- Responsive images improve load speed and look good on all devices

Full Transcript

This visual execution shows how Next.js Image component handles responsive images. The component is given a source image, fixed width and height, and a sizes attribute that tells the browser how wide the image should be at different screen widths. When the page loads, the browser checks the viewport width and uses the sizes attribute to pick the best image size to load. For example, if the viewport is 500 pixels wide and sizes says to use 100vw for max-width 600px, the browser loads a 500 pixel wide image. If the viewport grows to 700 pixels, the browser uses the fallback size of 800 pixels. The width and height props help Next.js reserve space to avoid layout shifts while the image loads. This process ensures images look sharp and load efficiently on all screen sizes.

Practice

1. What is the main benefit of using responsive images in a Next.js app?

easy

A. They load the right image size for different screen widths, improving speed.

B. They automatically add captions to images.

C. They convert images to black and white on small screens.

D. They disable images on mobile devices to save data.

Solution

1. Step 1: Understand responsive images purpose

   Responsive images adjust to screen size to load faster and look better.

2. Step 2: Identify Next.js Image component benefit

   Next.js Image component helps load the right image size automatically.

3. Final Answer:

   They load the right image size for different screen widths, improving speed. -> Option A

4. Quick Check:

   Responsive images = load right size fast [OK]

Hint: Responsive images adapt size to screen for speed [OK]

Common Mistakes:

• Thinking responsive images add captions automatically
• Believing images turn black and white on small screens
• Assuming images are disabled on mobile devices

2. Which is the correct way to import and use the Next.js Image component for responsive images?

easy

A. import Image from 'next/image';

B. import { Image } from 'react';

C. import Img from 'next/image';

D. import Image from 'next/image';

Solution

1. Step 1: Check import syntax

   Next.js Image is imported as default from 'next/image'. So, import Image from 'next/image' is correct.

2. Step 2: Check usage with required props

   Image requires src, width, height, and alt for accessibility and layout.

3. Final Answer:

   import Image from 'next/image'; <Image src='/pic.jpg' width={500} height={300} alt='pic' /> -> Option A

4. Quick Check:

   Correct import + width/height + alt = import Image from 'next/image'; [OK]

Hint: Next.js Image needs import, src, width, height, alt [OK]

Common Mistakes:

• Importing Image from 'react' instead of 'next/image'
• Omitting width and height props
• Using wrong component name like Img

3. What will be the behavior of this Next.js Image component?

import Image from 'next/image';
export default function Photo() {
  return (
    <Image
      src='/photo.jpg'
      alt='A photo'
      sizes='(max-width: 600px) 100vw, 50vw'
      width={800}
      height={600}
    />
  );
}

medium

A. Loads image only on screens wider than 600px.

B. Always loads image at 800x600 pixels regardless of screen size.

C. Throws an error because sizes prop is invalid.

D. Loads 100% viewport width image on screens 600px or smaller, else 50% viewport width.

Solution

1. Step 1: Understand sizes prop usage

   The sizes prop defines image display width based on screen width media queries.

2. Step 2: Interpret sizes value

   For screens max 600px wide, image uses 100vw (full viewport width). Otherwise, 50vw (half viewport width).

3. Final Answer:

   Loads 100% viewport width image on screens 600px or smaller, else 50% viewport width. -> Option D

4. Quick Check:

   Sizes prop controls image width by screen size [OK]

Hint: Sizes prop sets image width per screen size [OK]

Common Mistakes:

• Thinking sizes sets image pixel dimensions directly
• Assuming sizes prop causes error
• Believing image loads only on wide screens

4. Identify the error in this Next.js Image usage:

import Image from 'next/image';
export default function Banner() {
  return (
    <Image
      src='/banner.png'
      alt='Banner'
      width='100%'
      height='300'
    />
  );
}

medium

A. alt text is missing.

B. src path must be an external URL.

C. width should be a number, not a string with '%'.

D. height cannot be set with a number.

Solution

1. Step 1: Check width prop type

   Next.js Image expects width as a number (pixels), not a string with '%'.

2. Step 2: Verify other props

   alt is present, src can be local path, height as number is valid.

3. Final Answer:

   width should be a number, not a string with '%'. -> Option C

4. Quick Check:

   Width must be numeric pixels [OK]

Hint: Width and height props must be numbers, not strings [OK]

Common Mistakes:

• Using percentage strings for width or height
• Thinking alt text is optional
• Believing src must be external URL

5. You want to optimize images for a blog with different screen sizes. Which approach correctly uses Next.js Image to load responsive images with accessibility and performance in mind?

hard

A.

B.

C.

D.

Solution

1. Step 1: Check alt text for accessibility

   includes meaningful alt text 'Blog post', improving accessibility.

2. Step 2: Verify sizes and priority usage

   Sizes prop correctly sets image width for small and larger screens. Priority loads important images faster.

3. Step 3: Identify issues in other options

   A lacks alt text and reverses sizes logic, B has empty alt (bad for accessibility), D uses invalid string props for width/height.

4. Final Answer:

   <Image src='/post.jpg' alt='Blog post' width={1200} height={800} sizes='(max-width: 768px) 100vw, 50vw' priority /> -> Option B

5. Quick Check:

   Alt + sizes + priority = best practice [OK]

Hint: Use alt text, sizes, and priority for best responsive images [OK]

Common Mistakes:

• Leaving alt text empty
• Using invalid width/height values
• Incorrect sizes media query order