Image component and optimization 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 Avatar() {
  return (
    <Image
      src="/avatar.png"
      alt="User Avatar"
      width={100}
      height={100}
      priority
    />
  );
}

What does the priority prop do here?

A It forces the image to load immediately during page load for better performance.

B It makes the image load lazily only when it enters the viewport.

C It disables image optimization and serves the raw image file.

D It automatically adds a blur placeholder before the image loads.

💡 Hint

Think about what helps important images load faster on the page.

The priority prop tells Next.js to preload the image, so it loads immediately during page load. This is useful for important images like avatars or logos.

📝 Syntax

intermediate

Which option correctly uses the Next.js Image component with a remote URL?

You want to display an image from https://example.com/photo.jpg using Next.js Image component. Which code snippet is correct?

A <Image src="https://example.com/photo.jpg" alt="Photo" sizes="300x200" />

B <Image src="https://example.com/photo.jpg" alt="Photo" width="300" height="200" />

C <Image src="https://example.com/photo.jpg" alt="Photo" width={300} height={200} />

D <Image src="https://example.com/photo.jpg" alt="Photo" layout="fixed" />

💡 Hint

Remember the width and height props must be numbers, not strings.

Next.js Image requires numeric width and height props for layout calculations. Option C uses numbers correctly.

🔧 Debug

advanced

Why does this Next.js Image component throw an error?

Look at this code snippet:

import Image from 'next/image';

export default function Logo() {
  return (
    <Image
      src="/logo.svg"
      alt="Company Logo"
      width={null}
      height={50}
    />
  );
}

What error will this cause and why?

A TypeError because width cannot be null; it must be a number.

B SyntaxError because JSX tags are not closed properly.

C Runtime error because SVG images are not supported by Next.js Image.

D No error; the image will render with width auto and height 50.

💡 Hint

Check the type requirements for width and height props.

The width prop must be a number. Passing null causes a TypeError because Next.js cannot calculate layout.

❓ state_output

advanced

What is the rendered output of this Next.js Image with layout='fill'?

Consider this component:

import Image from 'next/image';

export default function Background() {
  return (
    <div style={{ position: 'relative', width: '400px', height: '300px' }}>
      <Image
        src="/background.jpg"
        alt="Background"
        layout="fill"
        objectFit="cover"
      />
    </div>
  );
}

What will you see on the page?

A The image does not render because layout='fill' requires explicit width and height.

B The image displays at its original size inside the div, possibly overflowing.

C The image is stretched to 400x300 but may distort aspect ratio.

D The image fills the 400x300 div, cropping if needed, covering entire area.

💡 Hint

Think about how layout='fill' and objectFit='cover' work together.

With layout='fill', the image fills the parent container which must have position relative and set size. objectFit='cover' ensures the image covers the area without distortion, cropping if needed.

🧠 Conceptual

expert

Which statement about Next.js Image optimization is true?

Choose the correct statement about how Next.js optimizes images using the Image component.

A Next.js automatically converts all images to WebP format regardless of browser support.

B Next.js optimizes images by resizing, lazy loading, and serving modern formats based on browser support.

C Next.js serves optimized images only for local files, remote images are not optimized.

D Next.js requires manual configuration to enable any image optimization features.

💡 Hint

Think about what Next.js does automatically and what requires config.

Next.js Image component automatically optimizes images by resizing them to requested sizes, lazy loading by default, and serving modern formats like WebP when supported by the browser.