Responsive Examples.

Image found in src/assets/nasa.jpg and sourced via Nasa @ unsplash.com

<Image>

<Code>

---
import { Image } from "astro:assets";
// example local image
import nasaImg from "../../assets/nasa.jpg";
---

<Image alt="The space station above the Earth" src={nasaImg} />

<style>
  /* Make images easier to work with */
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
</style>

<Code>

---
import { Picture } from "astro:assets";
// example local image
import nasaImg from "../../assets/nasa.jpg";
---

<Picture
  alt="The space station above the Earth"
  src={nasaImg}
  width={nasaImg.width / 2}
  densities={[1.5, 2]}
/>

<style>
  /* Make images easier to work with */
  img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
  }
</style>