images | Astro Lounge | Page 1

Hi @cinder sentinel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Astro's built-in <Image /> component is designed to optimize images that are used in your project. It automatically optimizes local images and configured remote images when they are referenced in your Astro files. However, the information provided does not specify a way to force Astro to generate optimized images that are not used or referenced in your project.

Here's how you can use the <Image /> component to optimize an image:

---
// Import the <Image /> component
import { Image } from "astro:assets"
// Import a reference to the image itself
import myImage from "../assets/my_image.png"
---

<Image src={myImage} alt="A description of my image." />

This will result in an optimized image with proper attributes enforced:

<img src="/_astro/my_image.hash.webp" width="1600" height="900" decoding="async" loading="lazy" alt="A description of my image."/>

#images

For more information on how Astro handles image optimization, you can refer to the Astro Images Guide (https://docs.astro.build/en/guides/images/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: