Image optimization with astro:assets - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Astro optimize images using astro:assets?

Consider an Astro component importing an image with import img from 'astro:assets'. What happens when this image is used in the component?

Astro

import img from '../assets/photo.jpg';

---

<img src={img} alt="Sample photo" />

A The image is converted to a base64 string and embedded directly in the HTML.

B The image is loaded as-is without any optimization or resizing.

C The image is automatically resized and optimized for the device's screen size and format.

D The image is replaced with a placeholder and loaded lazily only on scroll.

💡 Hint

Think about what astro:assets does to images during build time.

Astro's astro:assets automatically optimizes images by resizing and converting them to modern formats based on device needs, improving performance.

📝 Syntax

intermediate

Which import syntax correctly uses astro:assets for image optimization?

Choose the correct way to import an image for optimization in an Astro component.

A import photo from '../assets/photo.jpg';

B import photo from 'astro:assets/photo.jpg'; // with curly braces

C import photo from 'astro:assets';

D import photo from 'astro:assets/photo.jpg';

💡 Hint

Remember how relative paths and astro:assets work together.

You import images from your local assets folder using a relative path, and Astro processes them via the astro:assets integration automatically.

🔧 Debug

advanced

Why does this Astro image import cause a build error?

Given this code snippet, why does the build fail?

Astro

import img from 'astro:assets/photo.png';

---

<img src={img} alt="Example" />

A The path 'astro:assets/photo.png' is invalid; images must be imported using relative paths.

B The image file format PNG is not supported by Astro's image optimizer.

C The <code>img</code> variable is not used correctly in the JSX syntax.

D Astro requires images to be imported with curly braces around the path.

💡 Hint

Check how image paths are resolved in Astro imports.

Astro expects image imports to use relative paths to local files. Using 'astro:assets/photo.png' as a path is invalid and causes a build error.

❓ state_output

advanced

What is the output HTML of this Astro image component using astro:assets?

Given this Astro component code, what does the rendered HTML look like?

Astro

---
import photo from '../assets/photo.jpg';
---

<img src={photo.src} alt="Photo" width={photo.width} height={photo.height} loading="lazy" />

A <img src="../assets/photo.jpg" alt="Photo" loading="lazy">

B <img src="/assets/photo.abc123.jpg" alt="Photo" width="800" height="600" loading="lazy">

C <img src="data:image/jpeg;base64,..." alt="Photo" width="800" height="600">

D <img alt="Photo" width="800" height="600" loading="lazy">

💡 Hint

Astro generates optimized image URLs with hashes and includes dimensions.

Astro's astro:assets provides an object with src, width, and height. The src is a hashed URL for caching and optimization.

🧠 Conceptual

expert

Why is using astro:assets better than manually optimizing images for a website?

Choose the best reason why astro:assets image optimization is preferred over manual image resizing and format conversion.

A It requires manual configuration for each image size and format to optimize properly.

B It converts all images to PNG format to ensure maximum quality regardless of file size.

C It disables image caching to always load the latest image version from the server.

D It automatically generates multiple optimized versions and serves the best one based on device and browser, reducing manual work and improving performance.

💡 Hint

Think about automation and performance benefits.

astro:assets automates creating multiple image sizes and formats, then serves the best one for the user's device, saving time and improving load speed.