Image optimization in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Remix Image component correctly.

Remix

import { [1] } from "@remix-run/react";

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

AImage

Bimg

CPicture

DPhoto

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'img' instead of 'Image'.

Importing from the wrong package.

The Remix framework provides an Image component for optimized image loading. You import it from @remix-run/react.

2fill in blank

medium

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

Remix

<[1] src="/images/photo.jpg" alt="A photo" />

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

APhoto

BImage

Cpicture

Dimg

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase img tag instead of Image component.

Forgetting to add the alt attribute.

Use the Image component from Remix to enable automatic image optimization.

3fill in blank

hard

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

Remix

<Image src="/images/pic.png" [1]="A descriptive text" />

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

Adescription

Btitle

Calt

Dcaption

Attempts:

3 left

💡 Hint

Common Mistakes

Using title or caption instead of alt.

Omitting the alt attribute entirely.

The alt attribute is required for accessibility and SEO. It describes the image content.

4fill in blank

hard

Fill both blanks to set width and height props for the Image component.

Remix

<Image src="/images/logo.png" width=[1] height=[2] alt="Logo" />

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

A200

B300

C400

D500

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units like '200px' instead of numbers.

Omitting width or height props.

Setting width and height helps Remix optimize image loading and layout.

5fill in blank

hard

Fill all three blanks to create an Image component with src, alt, and priority props.

Remix

<Image src=[1] alt=[2] priority=[3] />

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

A"/images/banner.jpg"

B"Main banner image"

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the src or alt strings.

Using string 'true' instead of boolean true for priority.

The priority prop tells Remix to load this image eagerly for better performance on important images.