Image optimization with astro:assets - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of the astro:assets package in Astro?

The astro:assets package helps automatically optimize images by resizing, compressing, and converting them to modern formats for faster loading and better performance.

beginner

How do you import an image using <code>astro:assets</code> in an Astro component?

You import images like JavaScript modules using <code>import myImage from 'astro:assets';</code> or by importing the image file directly like <code>import myImage from './my-image.jpg';</code> and then use the returned object to get optimized image URLs and metadata.

intermediate

What are some benefits of using astro:assets for images compared to using plain <img> tags?

It automatically creates multiple sizes, converts to modern formats like WebP, adds lazy loading, and generates responsive srcset attributes to improve loading speed and user experience.

intermediate

Which image formats does astro:assets support for optimization?

It supports common formats like JPEG, PNG, GIF, SVG, and can convert images to WebP and AVIF for better compression and quality.

advanced

How can you customize the sizes or formats generated by astro:assets?

You can pass options like widths, formats, and quality when using the image to control output sizes and formats.

What does astro:assets primarily help with?

A Creating image galleries automatically

B Optimizing images for faster loading

C Adding animations to images

D Uploading images to a server

astro:assets focuses on image optimization like resizing and format conversion to improve performance.

How do you use an image imported using astro:assets in your component?

A Use the image file path as a string directly

B Call a function to display the image

C Use the imported object’s <code>src</code> property in an <code>&lt;img&gt;</code> tag

D Embed the image as base64 manually

The imported image object provides a src URL for optimized images to use in <img>.

Which of these is NOT a feature of astro:assets image optimization?

A Adding watermarks to images

B Generating responsive <code>srcset</code>

C Converting images to WebP format

D Automatic lazy loading

astro:assets does not add watermarks; it focuses on optimization features.

Which image format is commonly generated by astro:assets for better compression?

A RAW

B BMP

C TIFF

D WebP

WebP is a modern format that astro:assets uses for better compression and quality.

How can you control the widths of images generated by astro:assets?

A By setting the <code>widths</code> option when importing or using the image

B By editing the image file manually

C By changing the CSS width only

D By renaming the image file

The widths option lets you specify which sizes astro:assets should generate.

Explain how astro:assets improves image loading performance in a website.

Think about what makes images load faster and look good on different devices.

Describe the steps to import and use an optimized image with astro:assets in an Astro component.

Focus on how you bring the image into your code and display it.