Image component and optimization 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'

ANextImage

Bimg

CImage

DPicture

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'img' instead of 'Image' for import.

Trying to import from 'next/img' or other incorrect paths.

The Next.js Image component is imported as Image from 'next/image'. This enables automatic image optimization.

2fill in blank

medium

Complete the code to use the Image component with a required width of 300 pixels.

NextJS

<Image src="/logo.png" alt="Logo" [1]={300} height={200} />

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

Awidth

Blength

Csize

Dw

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'size' or 'length' instead of 'width'.

Using lowercase 'w' which is not a valid prop.

The Image component requires the width prop to set the image's width in pixels.

3fill in blank

hard

Fix the error in the Image component usage by completing the missing required prop.

NextJS

<Image src="/banner.jpg" alt=[1] width={600} height={400} />

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

A600

Btrue

C"banner.jpg"

D"Banner image"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the image filename as alt text without quotes.

Using a number or boolean instead of a string.

The alt attribute is required for accessibility and must be a descriptive string.

4fill in blank

hard

Fill both blanks to create an Image component that loads lazily and uses a blur placeholder.

NextJS

<Image src="/photo.jpg" alt="Photo" width={500} height={300} [1]=[2] />

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

Aplaceholder

B"blur"

Cloading

D"lazy"

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'loading' with 'placeholder'.

Using 'lazy' as a placeholder value instead of 'blur'.

The placeholder prop set to "blur" shows a blurred preview while loading.

5fill in blank

hard

Fill all three blanks to create an Image component that loads lazily and sets priority loading.

NextJS

<Image src="/hero.png" alt="Hero" width={800} height={600} [1]=[2] [3] />

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

Aloading

B"lazy"

Cpriority

Dplaceholder

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'placeholder' instead of 'loading' for lazy loading.

Forgetting to add the 'priority' prop for important images.

The loading="lazy" defers loading offscreen images, and priority makes this image load quickly as important content.