WebP y AVIF: entrega de buenas imágenes sin dañar los navegadores antiguos

El rediseño cambia todos los carteles a AVIF: espectacular ganancia de Lighthouse. Excepto que el CRM interno del cliente todavía apunta a Safari 14 en macOS empresarial: un simple <img src="hero.avif"> muestra un cuadrado gris. El soporte habla de un “sitio roto”; El marketing habla de “modernización”. Ambos están justo en su perímetro.

WebP y AVIF reducen el peso sin sacrificar la calidad percibida, si la entrega sigue siendo progresiva: mejor formato para navegadores capaces, alternativa universal para otros. Modernizar la relación de aspecto no es una casilla que deba marcar; es un contrato de entrega con tu audiencia real.

Soporte del navegador y estrategia de imágenes.

El elemento <picture> sigue siendo el enfoque más predecible en el lado del origen:

<imagen>

  <fuente srcset="hero.avif" tipo="imagen/avif">

  <fuente srcset="hero.webp" tipo="imagen/webp">

  <img src="hero.jpg" alt="Descripción" ancho="1200" alto="630">

</imagen>

Complete siempre ancho y alto en la etiqueta img; esto evita el cambio de diseño (CLS). El atributo "alt" debe permanecer en la imagen alternativa; esto es lo que utilizan los rastreadores y lectores de pantalla como último recurso.

Ofrecer solo AVIF significa optimizar para Lighthouse y olvidarse del conjunto de navegadores real, que a menudo son clientes B2B con una cesta promedio alta.

CDN, negociación de aceptar y variar

Una CDN que negocia el formato a través del encabezado Aceptar: imagen/avif,image/webp,/ simplifica el HTML, pero impone Variar: Aceptar y una clave de caché correcta. Sin Vary, la CDN puede enviar un AVIF a un navegador incompatible.

En un origen sin CDN, <imagen> sigue siendo más predecible que una reescritura opaca del lado del servidor. En WordPress, los complementos ShortPixel o Imagify generan las variaciones; verifique que el respaldo se muestre en la vista previa del administrador y en un Safari antiguo.

Alinee esta política con sus encabezados de caché: Las imágenes negociadas por Aceptar requieren una política de variación coherente entre el origen y el borde.

Calidad, dimensiones y srcset

Sirve múltiples resoluciones a través de srcset y sizes para dispositivos móviles. La calidad AVIF a 50 suele ser visualmente equivalente a JPEG a 80: ajuste por recurso, no con una configuración global.

Evite la ampliación: cambie el tamaño de la fuente, no comprima un archivo de 4000 px que se muestra en 400 px a través de CSS. Los logotipos permanecen en SVG, no en AVIF.

Para banners con diferentes recortes para dispositivos móviles/escritorio, el atributo media en <source> permite la dirección de arte sin duplicar toda la página.

Canal de conversión: compilado o sobre la marcha

Static Build (Sharp, Squoosh, ImageMagick en CI) es adecuado para activos conocidos: héroes, íconos y elementos visuales de marketing. Genere AVIF, WebP y JPEG a partir de un archivo maestro PNG o TIFF. Nombre con hash + Cache-Control long.

Conversión sobre la marcha (imgproxy, Cloudflare Polish, servicio de imágenes dedicado) se adapta a las cargas de usuarios en comercio electrónico o CMS. Codifique de forma asincrónica: una carga no tiene que esperar treinta segundos para la conversión AVIF. Caché agresivo del resultado.

Accesibilidad e imágenes SEO

El atributo descriptivo "alt" permanece en la etiqueta alternativa "img". Para imágenes decorativas, alt="" explícito. Las URL estables y un mapa del sitio con imágenes ayudan a la indexación: Google lee WebP y AVIF, pero el respaldo JPEG tranquiliza a los rastreadores conservadores.

No elimine el JPEG "porque nadie lo usa" sin medirlo: los análisis y los registros del servidor a menudo muestran una cola heredada subestimada.

La cumbre: formato moderno, público excluido

Esto es lo que la puntuación Lighthouse no mide.

Buenas imágenes = negociación de formato más respaldo más dimensiones: no se impone un solo tipo MIME a todos.

Decide y avanza sin puntos ciegos

Antes de la próxima revisión visual:

1. Implementar <imagen> con respaldo AVIF, WebP y JPEG en imágenes de héroes.
2. Configure srcset y sizes para capacidad de respuesta: ancho/alto en cada img.
3. Elija compilación estática o conversión sobre la marcha según la fuente de las imágenes (cargas de marketing versus CMS).
4. Marcar Variar: aceptar si la CDN negocia el formato: referencia cruzada con la política de caché.
5. Prueba en Safari 14, Edge heredado y con JavaScript deshabilitado: ¿las imágenes principales permanecen visibles?
6. Comparar Imagen CDN y hosting a través del directorio y el comparador.

Para recursos estáticos, vaya a HTTP/2: un menor peso por imagen multiplica el efecto de la multiplexación.

Preguntas frecuentes

¿AVIF o WebP como prioridad?

AVIF comprime mejor (a menudo entre un 20% y un 50% menos que WebP) pero codifica más lentamente y tiene un soporte ligeramente más nuevo. WebP sigue siendo un excelente compromiso. Sirve AVIF como primera fuente, WebP como segunda, JPEG como respaldo a través de <imagen>.

¿Cómo servir el formato correcto?

A través de <picture> con etiquetas <source type="image/avif"> y <source type="image/webp">, más un respaldo <img src="...jpg">. Alternativa: CDN negociando el encabezado Aceptar, con Vary: Aceptar y una clave de caché adaptada.

¿Y SEO de imágenes?

Mantenga una "alt" descriptiva en la imagen alternativa, las URL estables y un mapa del sitio de imágenes. Google indexa WebP y AVIF; El respaldo JPEG tranquiliza a los rastreadores más conservadores.

¿Conversión en el lado de la construcción o sobre la marcha?

Construya para activos de marketing conocidos (CI + Sharp). Conversión asincrónica sobre la marcha para cargas de CMS, con almacenamiento en caché agresivo en el resultado. Nunca bloquee una solicitud de usuario con codificación AVIF lenta.

Modernizar el formato sin alternativas significa aceptar casillas grises donde los negocios todavía importan.