Image optimization with next/image in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

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

Consider this Next.js component using next/image:

import Image from 'next/image';

export default function Avatar() {
  return (
    <Image
      src="/avatar.png"
      alt="User Avatar"
      width={100}
      height={100}
      priority
    />
  );
}

What will the browser display when this component is rendered?

NextJS

import Image from 'next/image';

export default function Avatar() {
  return (
    <Image
      src="/avatar.png"
      alt="User Avatar"
      width={100}
      height={100}
      priority
    />
  );
}

A An optimized 100x100 pixel image with lazy loading disabled and alt text 'User Avatar'.

B A 100x100 pixel image that loads lazily with no alt text.

C A broken image icon because the src path is invalid.

D An unoptimized image with width and height ignored.

💡 Hint

Remember that the priority prop disables lazy loading and improves loading speed for important images.

The next/image component optimizes images automatically. The priority prop disables lazy loading, so the image loads immediately. Width and height define the image size, and alt text is used for accessibility.

📝 Syntax

intermediate

Which option correctly uses the next/image component to fill its parent container?

You want an image to fill its parent container responsively using next/image. Which code snippet is correct?

A <Image src="/photo.jpg" alt="Photo" fill />

B <Image src="/photo.jpg" alt="Photo" layout="fill" />

C <Image src="/photo.jpg" alt="Photo" width="100%" height="100%" />

D <Image src="/photo.jpg" alt="Photo" style={{width: '100%', height: '100%'}} />

💡 Hint

Check the latest Next.js syntax for filling containers with images.

In Next.js 13+, the fill prop is a boolean that makes the image fill its parent. The older layout="fill" is deprecated. Setting width and height to percentages is invalid for next/image.

🔧 Debug

advanced

Why does this next/image component cause a build error?

Examine this code:

import Image from 'next/image';

export default function Logo() {
  return (
    <Image
      src="https://example.com/logo.png"
      alt="Company Logo"
      width={200}
      height={100}
    />
  );
}

Why might this cause a build error in Next.js?

NextJS

import Image from 'next/image';

export default function Logo() {
  return (
    <Image
      src="https://example.com/logo.png"
      alt="Company Logo"
      width={200}
      height={100}
    />
  );
}

A The alt prop is missing and required.

B The width and height props must be strings, not numbers.

C The src prop cannot use https URLs, only local paths.

D External image domains must be added to next.config.js under images.domains.

💡 Hint

Think about Next.js security and optimization rules for external images.

Next.js requires external image domains to be whitelisted in next.config.js under the images.domains array. Without this, the build fails when using external URLs in next/image.

❓ state_output

advanced

What happens to the image size when using next/image with sizes prop?

Given this component:

import Image from 'next/image';

export default function Banner() {
  return (
    <Image
      src="/banner.jpg"
      alt="Banner"
      width={1200}
      height={400}
      sizes="(max-width: 600px) 480px, 800px"
    />
  );
}

What effect does the sizes prop have on the rendered image?

NextJS

import Image from 'next/image';

export default function Banner() {
  return (
    <Image
      src="/banner.jpg"
      alt="Banner"
      width={1200}
      height={400}
      sizes="(max-width: 600px) 480px, 800px"
    />
  );
}

A The image height changes dynamically but width stays fixed.

B The browser loads a 480px wide image on screens 600px or smaller, otherwise 800px wide image.

C The sizes prop causes a syntax error and image won't load.

D The image always loads at 1200px width ignoring sizes.

💡 Hint

The sizes prop helps the browser pick the best image size based on viewport width.

The sizes attribute tells the browser to use a 480px wide image if the viewport is 600px or less, otherwise use an 800px wide image. This helps optimize loading for different screen sizes.

🧠 Conceptual

expert

Which statement best explains how next/image optimizes images?

Select the most accurate explanation of how Next.js next/image optimizes images automatically.

A It requires manual image resizing and format conversion before use.

B It only lazy loads images but does not change image size or format.

C It automatically resizes, compresses, and serves images in modern formats based on device and network conditions.

D It disables caching to always fetch fresh images from the server.

💡 Hint

Think about what benefits image optimization provides for user experience.

Next.js next/image automatically resizes images to fit device screen sizes, compresses them to reduce file size, and serves modern formats like WebP when supported. It also lazy loads images by default to improve performance.