Mejores Imágenes en Astro en Español

El año pasado, publicamos la primera integración de imágenes de Astro (@astrojs/image) junto con Astro 1.0. El objetivo era simple: Hacer que la optimización de imágenes sea sin esfuerzo en Astro.

Ahora, 1 año y 2.5 millones de descargas después, estamos listos para compartir nuestra nueva visión para trabajar con imágenes en Astro: completamente rediseñada con nuevas características, rendimiento más rápido, y una mejor experiencia para el usuario final con:

Prevención automática de layout shift (CLS).
Soporte de primera clase para Markdown, Markdoc y MDX.
Integración con servicios de terceros.

Esta nueva actualización estará disponible para todos los usuarios a partir de Astro 3.0, pero puedes optar por ella hoy configurando el flag experimental.assets en tu archivo de configuración. También puedes habilitarla pasando el flag --experimental-assets a la CLI de Astro.

import { defineConfig } from "astro/config"

export default defineConfig({
  experimental: { assets: true },
})

En esta publicación, revisaremos algunas de las nuevas características y mejoras que harán que trabajar con imágenes en Astro sea aún más fácil. Si prefieres saltar directamente a la documentación, lee nuestra guía de Assets para todos los detalles.

Cómo funciona

Desde el principio, supimos que queríamos una API de imágenes que se sintiera lo más minimalista posible. Comenzamos con la API original del componente <Image /> de la integración @astrojs/image, y luego construimos sobre ella con algunos nuevos ajustes y cambios.

---
// Import the <Image /> component
import { Image } from "astro:assets"
// Import a reference to the image itself
import myImage from "../assets/penguin.png"
---

<Image src={myImage} alt="A very cool penguin!" />

<!-- Result: -->
<img
  src="/_astro/penguin.XXXXXX.webp"
  width="300"
  height="300"
  loading="lazy"
  decoding="async"
  alt="A very cool penguin!"
/>

Pero no dejes que la API minimalista te engañe:

Astro optimiza tu imagen usando el moderno formato de archivo WebP (por defecto).
Para accesibilidad, la prop alt requerida ayuda a mejorar tu sitio para lectores de pantalla y otras herramientas.
Para un rendimiento de carga de página aún más rápido, los atributos loading y decoding se agregan por defecto.
Para la experiencia del usuario, los atributos width y height siempre se incluyen para prevenir el layout shift (más sobre esto después).

La flexibilidad era otro objetivo. Agregamos la función getImage() para optimizar una imagen en tu proyecto, bajo demanda, sin usar el componente <Image />. Usa esta función para construir tu propio componente Image personalizado para cualquier caso de uso que tengas en mente.

---
// Example: Instead of creating an `img` tag,
// apply an optimized image to a div using CSS.
import { getImage } from "astro:assets"
import myImage from "../assets/penguin.png"
const optimizedBackgroundImage = await getImage({ src: myImage })
---

<div style={`background-image: url('${optimizedBackgroundImage.src}')`}></div>

<!-- Result: -->
<div style="background-image: url('/_astro/penguin.XXXXXX.webp')"></div>

Prevención automática de layout shift

El Cumulative Layout Shift (CLS) es una métrica esencial para optimizar el rendimiento de un sitio web. Se rastrea como uno de los 3 Core Web Vitals de Google y tiene un peso importante en la puntuación de rendimiento de Lighthouse.

El nuevo componente <Image /> de Astro protege automáticamente tu sitio del layout shift. Funciona infiriendo una altura y anchura explícitas para cada imagen e incluyéndolas en la etiqueta <img> generada. Con dimensiones explícitas, la imagen no puede desplazar el diseño de la página mientras se carga.

El HTML de salida siempre es un simple elemento <img>, por lo que también puedes aplicar estilos CSS adicionales para diseños responsive más avanzados como fill y cover sin arriesgar el layout shift.

<Image
  src={myImage}
  alt="A very cool penguin!"
  style="height: 100%; width: 100%; object-fit: cover;"
/>

Soporte automático para Markdown y MDX

Una de las mayores mejoras sobre la integración original @astrojs/image es el soporte completo para Markdown, Markdoc y MDX. Ahora puedes referenciar imágenes usando una ruta de imagen relativa en tu contenido Markdown o frontmatter, y Astro las optimizará automáticamente.

![A starry night sky](../../assets/stars.png)

<!-- Result: -->
<img
  src="/_astro/stars.XXXXXX.webp"
  width="300"
  height="300"
  loading="lazy"
  decoding="async"
  alt="A starry night sky"
/>

¡Eso es todo! Tu imagen stars.png será optimizada automáticamente en el HTML final. También puedes usar el componente <Image /> directamente en MDX si prefieres un control más fino sobre los atributos de la imagen, pero en la mayoría de los casos la configuración por defecto será suficiente para producir un tamaño de archivo optimizado con una gran calidad de imagen.

Integración con servicios de imágenes de terceros

Algunos usuarios inevitablemente querrán usar Astro con un servicio de imágenes externo, como Cloudinary o Vercel. Con la extensibilidad en mente, construimos la Astro Image Services API para conectar Astro con el servicio de imágenes de terceros de tu elección.

Esta API contiene una pequeña colección de hooks que pueden controlar el manejo de imágenes dentro de Astro. La mayoría de los usuarios de Astro nunca necesitarán tocar esta API directamente, pero los autores de integraciones pueden usarla para extender el comportamiento por defecto de Astro con su propia lógica de manejo de imágenes.

Un servicio de imágenes simple exporta una función getURL() para crear la URL src para cada imagen que apunta al dominio del servicio de imágenes o ruta URL personalizada:

// Example: A basic image service that generates custom URLs
export const service = {
  getURL({ src, width, height }) {
    return `https://mywebsitethatgeneratesimages.com/${src}?width=${width}&height=${height}`
  },
}

Servicios de imágenes más complejos pueden usar hooks como transform() para generar y devolver directamente una imagen para servirse, en el momento del build. Para un walkthrough de la API completa, revisa nuestra documentación de Image Services.

Los usuarios de Vercel pueden probar esto hoy con el adaptador de Vercel oficial para Astro. Cualquiera que use este adaptador verá que sus imágenes usan el endpoint de URL específico de Vercel que permite a Vercel manejar la optimización de imágenes por ti.

¡Estamos ansiosos por ver a nuestra comunidad usar esta característica para integrar Astro con sus servicios favoritos, y añadir a la creciente lista de integraciones de Astro!

¿Qué sigue?

Continuaremos recopilando tus comentarios mientras nos acercamos a un lanzamiento oficial en Astro 3.0 más tarde este año. Si encuentras algún problema, no dudes en hacérnoslo saber, ya sea creando un issue, o en nuestro Discord.

Hay mucho que no llegamos a cubrir aquí, como el cacheo entre builds, controlar el formato de archivo, y el soporte de MDX. Para más información sobre cómo usar esta característica, por favor visita nuestra documentación de assets.