Entrega de imágenes: AVIF y WebP con alternativas, carga diferida y prioridad de descarga

Qué es

Tres decisiones a nivel de <img> que son independientes del dimensionado adaptable (responsive). Formato: la guía de formatos de MDN describe AVIF y WebP como formatos que comprimen mejor que JPEG y PNG, señala que su compatibilidad es más reciente (WebP amplia, pero no histórica; AVIF más limitada) e indica que se debe incluir una alternativa en JPEG o PNG mediante <picture>. Dentro de <picture>, cada <source type="image/avif"> se omite si el navegador no admite ese tipo MIME, y el <img> final cumple dos funciones: es la alternativa y es el elemento que lleva alt, el tamaño y los atributos de carga. Carga: loading="lazy" aplaza la descarga hasta que la imagen se encuentra a una distancia del viewport que decide el navegador; fetchpriority="high" o "low" sugiere qué posición ocupa la imagen frente a otras imágenes; decoding="async" permite que el siguiente repintado continúe antes de que termine la decodificación.

Por qué importa

Las imágenes suelen ser los bytes más pesados de una página y con frecuencia son el elemento que determina el Largest Contentful Paint. Las decisiones erróneas se reflejan directamente en las Web Vitals: un hero con carga diferida retrasa el LCP, la falta de dimensiones en imágenes con carga diferida provoca desplazamientos de diseño, y servir JPEG a un navegador que acepta AVIF desperdicia ancho de banda en cada visita.

Cómo aplicarlo

• Codifica cada imagen una sola vez por formato, durante la compilación o en un servicio de imágenes, y mantén el JPEG o PNG como <img src>, de modo que los rastreadores, los clientes antiguos y quien copie y pegue la imagen obtengan un archivo utilizable.
• Ordena los elementos <source> de mejor a peor compresión; gana el primer tipo compatible.
• En un servidor capaz de negociar, usa la cabecera de petición Accept y añade Vary: Accept, para que las cachés no entreguen AVIF a un navegador que no puede mostrarlo. Mantén <picture> para el alojamiento estático.
• No apliques nunca carga diferida a la imagen del LCP ni a nada que esté en el primer viewport; asigna a esa imagen fetchpriority="high". Aplica carga diferida a imágenes e iframes que queden fuera de la parte visible inicial.
• Define width y height (o aspect-ratio) en cada imagen con carga diferida. MDN advierte de que las imágenes sin cargar tienen tamaño 0 y puede que nunca se carguen si no intersectan con un área visible.
• Mantén alt en el <img>; los elementos <source> no aportan nombre accesible.

Trampas

Poner loading="lazy" en todas las imágenes, incluidas las del primer viewport, genera una cascada de peticiones tardías. La distancia de carga diferida la define el navegador y cambia entre versiones; no ajustes el diseño en función de ella. fetchpriority es una sugerencia, no una orden. Un <picture> cuyo <img> carece de srcset sigue sirviendo un único tamaño a todas las pantallas; combínalo con el artículo sobre imágenes adaptables (responsive images).