En la web típica, las imágenes son el peso mayoritario de una página. Y casi siempre están sin optimizar: tamaños descomunales, formatos antiguos (JPG/PNG cuando podrían ser WebP/AVIF), sin atributos width y height (lo que provoca CLS).
Astro tiene un componente nativo para resolver esto: <Image /> desde astro:assets.
Lo que hace por ti:
widths o densities.width y height automáticamente desde los metadatos del archivo, evitando CLS.loading="lazy").La forma recomendada: importar la imagen desde src/. Astro la procesa y la mueve al directorio público con un hash.
widths genera múltiples versiones; sizes le dice al navegador cuál usar.
Para remotas:
width y height (Astro no puede inferirlos).astro.config.mjs con image.domains o image.remotePatterns.format, quality, width/height (si los pasas, recorta), densities...
<picture> con getImagePara casos avanzados (art direction, distintos crops por breakpoint), el helper getImage() te da control total:
Dentro de un .md o .mdx, las imágenes con sintaxis  se procesan automáticamente, igual que <Image />.
Abre src/pages/index.astro. Tu trabajo:
Image desde "astro:assets".import logo from "../assets/logo.png" aunque no exista realmente).<Image src={logo} alt="..." /> con un alt descriptivo.Aunque la imagen no exista, el código tiene que estar correctamente escrito: Image importado desde el módulo correcto, y el componente con su alt. En un proyecto real, basta con poner el archivo en src/assets/ y Astro hace el resto.