Font size
Worksheets[WEB3] 6b. Astro Images
Total questions: 24
Worksheet time: 12mins
What are the built-in Astro components mentioned for handling images?
<Img /> and <Pic />
<Image /> and <Picture />
<Photo /> and <Gallery />
Is Markdown image syntax supported in Astro?
Yes
No
Only for remote images
How can SVGs be used in Astro as per the document?
Only as background images
As components
Not supported at all
What feature does Astro provide for responsive images?
Manual coding of all resizes
Automatically resizing responsive images
No image resizing support
Where should local images be placed to benefit from all Astro image features?
In /src
In /public
In /assets
For remote images in Astro, what is required?
Convert them to local files
Authorize domains
No special requirements
What does Astro automatically generate when responsive properties are applied to <Image /> or <Picture />?
Only alt text and styles
Required srcset and sizes values
Manual overrides only
What should be filled in the blue box?
automatically generate the required srcset and sizes values for your images, and apply the necessary styles
require you to manually specify widths, densities, and custom CSS for every breakpoint
only optimize image formats (like AVIF/WebP) but leave resizing and srcset handling to custom code
When might you need to adjust the sizes attribute manually for best results?
For all image layouts
Only for full-width images
If in a multi-column layout on small screens
Which layout options are available for responsive images in Astro, as detailed in the referenced docs?
Fixed and fluid
Constrained and full-width
Cover and contain
Responsive and adaptive
None, layouts are manual
What is the requirement for the alt attribute in Astro's <Image /> and <Picture /> components?
Optional for local images
Mandatory for accessibility
Only needed for remote images
Deprecated in recent versions
Automatically generated
How can you override Astro's automatically generated widths and sizes in a practical code example?
Through global CSS only
By providing widths and sizes props directly
In the Astro config file
Using Markdown syntax
Can't be overridden
What happens to images placed in the /public folder in Astro regarding optimization and responsive behavior?
They are fully optimized and responsive
They are never optimized and lack responsive behavior
Optimized but not responsive
Responsive but not optimized
Depends on file type
Use the HTML <img> element when you cannot use the <Image /> component, for example:
for unsupported image formats
when you do not want your image optimized by Astro
to access and change the src attribute dynamically client-side
when the image is an SVG file
when using the image inside a client-side interactive UI framework component like React or Vue without passing it as a prop
What sizes attribute does Astro typically generate for this constrained image?
100vw
(min-width: 800px) 800px, 100vw
(max-width: 800px) 800px
No sizes attribute
Which statement is true about the generated HTML for this fixed-layout image?
It includes a srcset with multiple widths
No srcset or sizes is generated
It automatically gets sizes="100vw"
It applies width: 100% style
What is the typical sizes attribute generated for a fullWidth layout image?
100vw
(min-width: 1200px) 1200px, 100vw
No sizes (only srcset)
Fixed pixel value like 1920px
What does this code primarily achieve?
Forces a fixed size image
Provides multiple format sources (AVIF first, then WebP, with fallback)
Generates only a srcset for widths
Disables image optimization
You place an image file at /public/images/photo.jpg and reference it as <img src="/images/photo.jpg" />.
Compared to placing it in /src/assets/ and using <Image />, what happens?
It gets full optimization and responsive srcset
It is served as-is without optimization or responsive features
It automatically converts to AVIF
It requires domain authorization
For this remote image to be optimized by Astro, what must you do?
Nothing, all remote images are optimized
Authorize the domain (e.g., example.com) in astro.config.mjs
Add layout="constrained"
Use <Picture /> instead
Your layout places a constrained image in a two-column grid on mobile (expected ~50vw width on small screens).
Astro generates sizes="(min-width: 800px) 800px, 100vw".
What should you do for optimal performance?
Leave it as-is
Manually override with a custom sizes prop (e.g., sizes="(min-width: 800px) 800px, 50vw")
Change to layout="fixed"
Remove the width prop
How does Astro apply the fit and position props?
Directly as HTML attributes
Via CSS variables (--fit: contain; --pos: top) on the img element
Only if responsiveStyles is disabled
They are ignored in constrained layout
What is the default responsive behavior for an inline layout image?
Full srcset and sizes like constrained
No automatic srcset/sizes or special responsive styles
Always 100vw sizes
Forces object-fit: cover
The code is in astro.config.mjs. What effect does this global config have?
All images become fixed size
Responsive behavior (srcset, sizes, styles) applies by default to all <Image /> and <Picture />
Only remote images get srcset
Disables AVIF/WebP formats
