Image optimization with astro:assets - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the image component from astro:assets.

Astro

import { [1] } from 'astro:assets';

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

Aimg

BImage

CAsset

DPicture

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'img' instead of 'Image'.

Trying to import 'Asset' or 'Picture' which do not exist in astro:assets.

The Image component is imported from astro:assets to optimize images.

2fill in blank

medium

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

Astro

<Image src=[1] alt="Sample image" />

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

Aimage

BimageSrc

CimagePath

DimageFile

Attempts:

3 left

💡 Hint

Common Mistakes

Using undefined variables like 'imageFile' or 'imageSrc'.

Confusing the prop name with the variable name.

The variable holding the imported image file is commonly named image and passed as src.

3fill in blank

hard

Fix the error in the import statement for an image file.

Astro

import [1] from '../assets/photo.png';

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

A* as image

B{image}

Cimage

DImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces which are for named imports.

Using wildcard import syntax which is incorrect here.

When importing a file as a module, use a simple variable name without braces.

4fill in blank

hard

Fill both blanks to create an optimized image with width 400 and format 'webp'.

Astro

<Image src={image} width=[1] format=[2] alt="Optimized image" />

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

A400

B'jpeg'

C'webp'

D300

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong width values like 300.

Using unsupported formats like 'jpeg' when 'webp' is preferred.

Set width to 400 and format to 'webp' for optimized images.

5fill in blank

hard

Fill all three blanks to create a responsive image with sizes and placeholder.

Astro

<Image src={image} sizes=[1] placeholder=[2] alt=[3] />

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

A"(max-width: 600px) 100vw, 600px"

B"blur"

C"A beautiful scenery"

D"(max-width: 800px) 50vw, 800px"

Attempts:

3 left

💡 Hint

Common Mistakes

Using numeric values for sizes instead of strings.

Using incorrect placeholder values.

Leaving alt text empty or non-descriptive.

Use sizes for responsive widths, placeholder as 'blur', and a descriptive alt text.