Optimizando imágenes con AVIF en Astro 5

Forzar el uso de AVIF en Astro 5 es el quick win definitivo para mejorar el LCP. Este formato ofrece una compresión superior a WebP manteniendo una calidad visual asombrosa, lo que se traduce en cargas casi instantáneas incluso en conexiones móviles inestables.

Configuración Global#

Astro usa Sharp por defecto. Podés configurar la prioridad de formatos en el archivo de configuración:

import { defineConfig } from "astro/config";

export default defineConfig({
  image: {
    // Sharp priorizará este formato sobre WebP
    formats: ["avif", "webp"],
  },
});

Uso Pro con <Image />#

En componentes críticos como el Hero, me gusta definir el formato manualmente para asegurar el máximo rendimiento. He notado que este formato mantiene una fidelidad asombrosa incluso en calidades mid. En mi experiencia, es la mejor decisión de arquitectura para sitios pesados.

---
import { Image } from 'astro:assets';
import heroImage from '../assets/images/hero.jpg';
---

<Image
  src={heroImage}
  alt="Dashboard de alto rendimiento"
  format="avif"
  quality="mid"
  width={1200}
  loading="eager"
/>

Referencias#

• Documentación oficial de Astro
• Benchmark de formatos