How to force image pipeline to resize (and crop?) images at build time

[vadimkantorov]

E.g. I have high-res cover images in my Markdown frontmatter (so already imported via Astro image pipeline), now I'd like to display these images in a card grid as thumbnails (with fixed statically known resolution).

How do I ask Astro to generate low-res versions for thumbnails at build-time? (in my Cards Astro component)

Is it also possible to specify cropping / object-fit options?

Can I specify these as attrs of <Image> tag? Or must I do a getImage call? Can it process the images which are already imported via Astro pipeline?

[florian-lefebvre]

You can pass these options directly to the Image component (reference here: https://docs.astro.build/en/reference/modules/astro-assets/#image-). For example:

---
const data = [/*...*/]
---
{data.map(e => <Image src={e.image} alt="" quality="low" />)}

Does that answer your question?

[vadimkantorov]

Is it possible to specify only downsizing to width if image width is larger than this value?

The idea is to not upsize smaller-width images, as they can look bad, so could be better to keep them display as is

[delucis]

Astro does not upsize smaller images, so you don’t need to do anything to achieve this.