Imágenes rápidas

Durante décadas, la web ha usado JPEG para las fotos, con pérdida de calidad, y PNG para gráficos con transparencia, sin pérdida. WebP, de Google, y AVIF, basado en el códec de vídeo AV1, comprimen bastante mejor: con la misma calidad aparente, el archivo pesa menos. Los dos admiten transparencia y animación, y los soportan los navegadores modernos.

AVIF suele conseguir los archivos más pequeños, pero tarda más en codificarse. Para todo lo que se puede dibujar con formas, como iconos, logotipos o ilustraciones planas, el formato es SVG, que viste en el módulo de fundamentos: vectorial, nítido a cualquier tamaño y casi siempre más ligero.

En srcset enumeras las versiones de la imagen con su anchura real usando el descriptor w: zapatillas-400.jpg 400w, zapatillas-800.jpg 800w…. En sizes le dices al navegador qué ancho tendrá la imagen en el diseño según el tamaño de la ventana, porque necesita saberlo antes de haber descargado el CSS.

Con esos dos datos y la densidad de la pantalla, el navegador calcula cuántos píxeles necesita y elige la versión más pequeña que se verá nítida. Un móvil de 400 píxeles con pantalla de doble densidad, con una imagen a todo lo ancho, necesita unos 800 píxeles: elegirá la de 800w, no la de 1600w.

<picture> contiene varios <source> y un <img> final. El navegador recorre los <source> en orden y usa el primero que encaja. Tiene dos usos. Formatos: un <source type="image/avif">, luego otro con WebP y el <img> con JPEG como respaldo; cada navegador toma el primero que sabe mostrar.

Dirección de arte: recortes distintos según la pantalla, con el atributo media. En móvil, un primer plano vertical del producto; en escritorio, la foto panorámica con el escenario. El <img> sigue siendo obligatorio: lleva el alt, las dimensiones y los estilos, y es el elemento que realmente se muestra.

Generar cada imagen en cinco anchuras y tres formatos a mano es tedioso, y con miles de productos, imposible. Una Image CDN, como Cloudinary, imgix, Cloudflare Images o la optimización de imágenes de Vercel, lo hace al vuelo: subes el original y pides las variantes con parámetros en la URL, como el ancho, la calidad o el recorte.

Con la opción de formato automático, la CDN mira la cabecera Accept que envía el navegador (por ejemplo, image/avif,image/webp,*/*) y devuelve el mejor formato que admite. Cada variante se genera la primera vez que alguien la pide y después se sirve desde la caché del borde.

La imagen principal suele ser el elemento LCP, así que todo lo que la retrase empeora la métrica. Por defecto, los navegadores piden las imágenes con prioridad baja hasta saber que son visibles; con fetchpriority="high" le dices que esta va primero. Y nunca lleva loading="lazy".

Si la imagen no está en el HTML inicial, porque es un fondo de CSS o la inserta JavaScript, el navegador no la descubre hasta muy tarde. En ese caso, adelántala con <link rel="preload" as="image"> en el <head>. Y ponle siempre width y height, o un aspect-ratio en CSS, para que el hueco esté reservado desde el principio y nada salte al cargarla.