Optimización de Imágenes en Astro 6
Cómo sacar el máximo partido al componente Image de Astro para tener una web rapidísima con imágenes perfectas.
Astro es conocido por enviar cero JavaScript al navegador por defecto, pero la velocidad real de una web no depende solo del código, sino también de los recursos. Y las imágenes suelen ser el recurso más pesado.
En esta entrada vamos a ver cómo maquetar imágenes de forma eficiente.
El componente ![]()
Astro proporciona un componente nativo para optimizar imágenes automáticamente. No solo cambia el formato a WebP o AVIF, sino que también redimensiona la imagen para que el usuario no descargue más píxeles de los necesarios.
Imagen de ejemplo traída directamente de Unsplash.
¿Por qué optimizar?
- Menos peso: Una imagen de 5MB puede pasar a ocupar 150KB sin pérdida apreciable de calidad.
- LCP mejorado: El “Largest Contentful Paint” es clave para Google.
- Ahorro de datos: Tus usuarios con móviles te lo agradecerán.
Maquetación con clases de Tailwind
Podemos aplicar estilos directamente para que las imágenes luzcan profesionales:
“Una web rápida es una web que convierte mejor.”
Ejemplo de Galería
Incluso podemos maquetar pequeñas cuadrículas dentro de nuestro Markdown si el layout lo permite:
Esperamos que este ejemplo de maquetación te sirva para ver cómo manejamos las imágenes en este proyecto.
Post maquetado automáticamente por Jules.