Imágenes

<img>, el componente por defecto, no aplica optimizaciones
Las imágenes deben estar dentro de src/, ej. src/assets/images porque los archivos que están en public no son optimizados por Astro
La imagen debe importarse como un componente

Tamaño estático

---
import { Image } from "astro:assets";
import post05img from "@images/post-05.png";
---

<Image src={post05img} width="250" height="250" alt="Imagen de prueba" />

<img
  loading="lazy"
  src="/assets/images/post-05.png"
  width="250"
  height="250"
/>

Picture

El componente <Picture> permite tener un listado de formatos, como webp, avif, etc. y el navegador elige el más optimo
widths crea imágenes con los tamaños definidos
sizes son los media queries, dependiendo el tamaño de ventana muestra un tamaño un otro de imagen

<Picture
  formats={["avif", "webp", "jpeg"]}
  widths={[240, 540, 720, post05img.width]}
  sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${post05img.width}px`}
  src={post05img}
  width="250"
  height="250"
  alt="Imagen de prueba"
/>

densities

No utilizar con widhts

---
import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
---

<Image
  src={myImage}
  width={myImage.width / 2}
  densities={[1.5, 2]}
  alt="A description of my image."
/>

Picture​

Picture