Usa el componente Picture de Astro para mostrar imágenes con varios formatos y/o tamaños.
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.
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:
npm install sharp
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.
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.