Generar imágenes adaptativas con Astro

Usa el componente Picture de Astro para mostrar imágenes con varios formatos y/o tamaños.

astro-responsive-images

Astro es un framework de JavaScript que lleva en su ADN ofrecer el mejor rendimiento posible a las páginas web. Una parte esencial de este objetivo es la optimización de las imágenes que mostramos en nuestras páginas. Los formatos clásicos de imagen, como GIF, PNG o JPEG, pueden ser superados en ciertos casos por formatos más modernos, como WEBP o AVIF, ya que ofrecen una gran calidad además de comprimir los archivos de forma notable.

Además, en muchas ocasiones nos puede interesar mostrar imágenes en distintos tamaños. Por ejemplo, podemos mostrar la misma imagen en un gran tamaño para la versión de escritorio y en un tamaño reducido para la versión móvil. Esto no solo nos permitirá ahorrar datos, sino que, al optimizar al máximo el rendimiento, obtendremos mejores puntuaciones en las métricas de Core Web Vitals, que son los estándares de la industria.

Instalar Sharp

Astro funciona muy bien con Sharp, una biblioteca rápida y potente para procesar imágenes. Con Sharp, podrás generar versiones optimizadas en formatos modernos como WEBP o AVIF.

Puedes instalar Sharp ejecutando el siguiente comando en tu terminal:

Terminal
npm install sharp

Configurar Astro JS

Para utilizar Sharp como servicio de procesamiento, puedes configurarlo en el archivo astro.config.mjs:

export default defineConfig({
// ...,
image: {
service: {
entrypoint: 'astro/assets/services/sharp',
config: {
defaultFormat: 'webp'
}
}
}

Por defecto, si no añadimos el defaultFormat Astro generará también la versión PNG.

Usar el componente <Picture />

Finalmente usaremos el componente Picture que viene incluido en astro

. Este componente genera HTML para renderizar el componente nativo <picture> que contiene zero o más elementos <source> y un elemento <img> para ofrecer al navegador la posibilidad de escojer versiones alternativas según el escenario.

---
import { Picture } from 'astro:assets'
import myImage from '../assets/my_image.png'
---
<Picture
src={myImage}
widths={[300, 637, 1168]}
sizes={300}
fallbackFormat="webp"
alt='Descripción imagen'
formats={['avif', 'webp']}
/>

En este ejemplo generamos 2 tipos de archivo de imagen (avif y webp) y para cada uno 3 versiones con distinto tamañao de ancho (300px, 637px y 1168px). Al configurar estos tamaños en el attributo widths, Astro añadirá lo añadirá como atributo srcset en los elementos source y img.

El atributo sizes también soporta media-queries, por ejemplo

sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${myImage.width}px`}

que sirve para mostrar distintos tamaños según el ancho del viewport, ideal si queremos mostrar distintos tamaños en diseños adaptativos de móvil o escritorio.