Image optimization with next/image in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js Image component correctly.

NextJS

import [1] from 'next/image';

Drag options to blanks, or click blank then click option'

APicture

BImage

Cimg

DNextImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'img' instead of 'Image'

Using incorrect component names like 'NextImage'

The Next.js Image component is imported as Image from 'next/image'.

2fill in blank

medium

Complete the code to use the Image component with a source URL.

NextJS

<Image src=[1] alt="A scenic view" width={600} height={400} />

Drag options to blanks, or click blank then click option'

A"/scenic.jpg"

Bscenic.jpg

C'scenic.jpg'

D{scenic.jpg}

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the URL

Passing a variable without braces

The src prop requires a string URL wrapped in quotes, like "/scenic.jpg".

3fill in blank

hard

Fix the error in the Image component by completing the missing prop for accessibility.

NextJS

<Image src="/logo.png" [1] width={100} height={100} />

Drag options to blanks, or click blank then click option'

Aalt="Company logo"

Btitle="Logo"

Caria-label="Logo image"

Dcaption="Logo"

Attempts:

3 left

💡 Hint

Common Mistakes

Using title instead of alt

Omitting the alt attribute entirely

The alt attribute is required for accessibility to describe the image content.

4fill in blank

hard

Fill both blanks to optimize the image loading behavior.

NextJS

<Image src="/photo.jpg" width={800} height={600} [1]=[2] />

Drag options to blanks, or click blank then click option'

Aloading

B"lazy"

C"eager"

Dpriority

Attempts:

3 left

💡 Hint

Common Mistakes

Using priority instead of loading

Using loading="eager" which loads immediately

Setting loading="lazy" defers loading the image until it is near the viewport, improving performance.

5fill in blank

hard

Fill all three blanks to create a responsive Image component with a fixed layout and custom sizes.

NextJS

<Image src="/banner.png" layout=[1] width=[2] height=[3] alt="Banner image" />

Drag options to blanks, or click blank then click option'

A"fixed"

B1200

C400

D"responsive"

Attempts:

3 left

💡 Hint

Common Mistakes

Using layout="responsive" with fixed width and height

Passing width and height as strings

Using layout="fixed" with explicit width and height sets a fixed size for the image.