Challenge - 5 Problems
Next.js Image Optimization Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
What is the rendered output of this Next.js Image component?
Consider this Next.js component using
What will the browser display when this component is rendered?
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 /> ); }
Attempts:
2 left
💡 Hint
Remember that the
priority prop disables lazy loading and improves loading speed for important images.✗ Incorrect
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
intermediate2:00remaining
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?Attempts:
2 left
💡 Hint
Check the latest Next.js syntax for filling containers with images.
✗ Incorrect
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
advanced2:00remaining
Why does this
next/image component cause a build error?Examine this code:
Why might this cause a build error in Next.js?
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} /> ); }
Attempts:
2 left
💡 Hint
Think about Next.js security and optimization rules for external images.
✗ Incorrect
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
advanced2:00remaining
What happens to the image size when using
next/image with sizes prop?Given this component:
What effect does the
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" /> ); }
Attempts:
2 left
💡 Hint
The sizes prop helps the browser pick the best image size based on viewport width.
✗ Incorrect
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
expert2:00remaining
Which statement best explains how
next/image optimizes images?Select the most accurate explanation of how Next.js
next/image optimizes images automatically.Attempts:
2 left
💡 Hint
Think about what benefits image optimization provides for user experience.
✗ Incorrect
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.