Responsive images in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js Image component?

Consider this Next.js Image component usage:

import Image from 'next/image';

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

What will the browser do regarding image loading and size?

A The image will load lazily and use 480px width on all screen sizes.

B The image will load eagerly with priority and use 480px width on screens up to 600px wide, otherwise 800px width.

C The image will load eagerly but ignore the sizes attribute and always use 600px width.

D The image will load lazily and always use 800px width regardless of screen size.

💡 Hint

Check the priority prop and the sizes attribute.

The priority prop makes the image load eagerly. The sizes attribute tells the browser to use 480px width for screens up to 600px wide, and 800px otherwise.

📝 Syntax

intermediate

Which option correctly uses Next.js Image component for responsive images?

Choose the correct syntax to make an image responsive using Next.js Image component with automatic layout adjustment.

A <Image src='/img.png' alt='desc' sizes='100vw' layout='fixed' />

B <Image src='/img.png' alt='desc' width='400' height='300' layout='responsive' />

C <Image src='/img.png' alt='desc' width={400} height={300} layout='responsive' />

D <Image src='/img.png' alt='desc' width={400} height={300} layout='fill' />

💡 Hint

Check the correct prop types and layout values.

The layout='responsive' prop requires numeric width and height props to calculate aspect ratio. Option C uses correct types and layout.

🔧 Debug

advanced

Why does this Next.js Image component cause a layout shift?

Given this code:

import Image from 'next/image';

export default function Demo() {
  return (
    <Image
      src='/landscape.jpg'
      alt='Landscape'
      width={0}
      height={0}
      style={{ width: '100%', height: 'auto' }}
    />
  );
}

Why does the page experience layout shift when the image loads?

A Because the src path is incorrect, so the image never loads.

B Because style uses percentages, which Next.js does not support for images.

C Because the alt attribute is missing, causing rendering issues.

D Because width and height are zero, Next.js cannot reserve space, causing layout shift.

💡 Hint

Think about how Next.js reserves space for images.

Next.js requires numeric width and height to reserve space and prevent layout shift. Zero values mean no space reserved, so the layout jumps when the image loads.

🧠 Conceptual

advanced

What is the main benefit of using Next.js Image component for responsive images?

Why should developers use Next.js Image component instead of a regular <img> tag for responsive images?

A It automatically optimizes images, serves correct sizes, and improves performance and SEO.

B It disables lazy loading by default to speed up page load.

C It requires no width or height props, making coding faster.

D It converts all images to SVG format for better scalability.

💡 Hint

Think about performance and image delivery.

Next.js Image component optimizes images on demand, serves appropriate sizes based on device, supports lazy loading, and improves SEO by providing alt text and proper markup.

❓ state_output

expert

What is the rendered output width of this Next.js Image on a 500px wide screen?

Given this component:

import Image from 'next/image';

export default function ResponsiveImg() {
  return (
    <Image
      src='/banner.jpg'
      alt='Banner'
      width={1200}
      height={400}
      sizes='(max-width: 600px) 100vw, 50vw'
      style={{ width: 'auto', height: 'auto' }}
    />
  );
}

On a screen 500px wide, what width will the image render?

A 500px, because sizes says 100vw for max-width 600px screens.

B 600px, because sizes uses 600px as max-width breakpoint.

C 600px, because width prop is 1200 but style overrides it.

D 1200px, because width prop sets fixed width regardless of screen.

💡 Hint

Check the sizes attribute and screen width.

The sizes attribute says for screens up to 600px wide, use 100vw (full viewport width). On a 500px screen, 100vw equals 500px, so the image renders at 500px wide.

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