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.