Implementa AVIF para sitios web más responsivos

Una actualización sobre cómo se adoptó AVIF en el ecosistema.

Jani Huoponen
Jani Huoponen
Vignesh Venkatasubramanian
Vignesh Venkatasubramanian

AVIF es un nuevo formato de imagen que está ganando popularidad rápidamente en la Web debido a sus altas tasas de compresión, su rendimiento eficiente y su amplia adopción. AVIF es un formato de imagen abierto y libre de regalías que se basa en el códec de video AV1 estandarizado por la Alliance for Open Media. En esta entrada de blog, se proporcionará una descripción general de cómo se adopta AVIF en el ecosistema y qué tipo de beneficios de rendimiento y calidad pueden esperar los desarrolladores de AVIF para imágenes fijas y animaciones.

Desde que se introdujo AVIF en Chrome, Firefox y Safari, el uso de AVIF en la Web ha crecido de forma constante. Actualmente, casi todos los navegadores son compatibles con AVIF.

Solo en Chrome, el uso de AVIF creció a aproximadamente uno por ciento en poco más de un año después de que Chrome agregara compatibilidad con AVIF estable.

Gráfico de líneas del uso de AVIF en Chrome desde mayo de 2021 hasta marzo de 2023. La asistencia aumentó de forma constante del 0% a poco menos del 1.4%.

Actualmente, varias CDN de imágenes, como Akamai, Cloudflare, Cloudinary y Imgix, publican imágenes AVIF. En una entrada de blog en la que se anunciaba la compatibilidad con AVIF, Imgix informó un ahorro del 60% en el tamaño de los archivos en comparación con JPEG y un ahorro del 35% en comparación con WebP. Estos ahorros de tamaño de archivo generan ahorros significativos en el almacenamiento, pero también ayudan a que las páginas se carguen más rápido, lo que genera tiempos de Largest Contentful Paint (LCP) más rápidos. El LCP es una de las Métricas web esenciales y representa la rapidez con la que se cargó el bloque de contenido más grande de la página. El uso de códecs modernos para comprimir imágenes es una de las técnicas clave para reducir el LCP. Lighthouse es una excelente herramienta para desarrolladores de Chrome que permite probar tu sitio web y ver cuántos ahorros podría generar AVIF.

WordPress es la plataforma de sitios web más popular del mundo y hay varios complementos disponibles para que los desarrolladores conviertan sus imágenes a AVIF, como los siguientes:

Para los desarrolladores más prácticos, herramientas como ImageMagick y FFmpeg son un buen punto de partida.

Velocidad de codificación de AVIF

La velocidad de codificación rápida y la alta calidad visual son fundamentales para implementar la compresión de imágenes a gran escala. La velocidad de codificación del software AVIF mejoró significativamente en los últimos dos años. En comparación con otros formatos de imágenes fijas modernos, AVIF produce archivos más pequeños con una calidad visual similar (consulta el siguiente gráfico, cuanto más bajo sea el valor, mejor) y también es más rápido de codificar.

Un gráfico de barras que compara varios tamaños de archivos de códec de imagen como un porcentaje del resultado de TurboJPEG. El valor de AVIF es el más bajo, después JPEG XL, después WebP y, por último, MozJPEG.

En el siguiente gráfico (cuanto más alto, mejor), se ilustra cómo se compara la velocidad de codificación de AVIF con otros formatos de imagen. Los códecs de generaciones anteriores, como WebP, se benefician de los algoritmos de compresión menos complejos (pero también menos eficientes). Con un esquema de codificación multiproceso, AVIF logra un rendimiento similar para los casos de uso comunes y, al mismo tiempo, ofrece importantes ganancias de compresión.

Una comparación de la velocidad de codificación del códec de imagen Los codificadores comparados son AVIF promedio, JPEG XL promedio, WebP promedio (un subproceso) y MozJPEG promedio (un subproceso). Por lo general, AVIF es uno de los codificadores de imágenes más rápidos en términos de mejor calidad y esfuerzo predeterminado, pero es el más lento de todos los codificadores para el rendimiento sobre la marcha.

Para los desarrolladores interesados en comparaciones más detalladas de velocidad de codificación y calidad visual, el sitio Image Coding Comparisons contiene resultados de comparativas reproducibles.

Si bien las implementaciones de software para códecs de imágenes modernos, como AVIF y WebP, están optimizadas para arquitecturas de procesadores x86 y ARM, comprimir grandes cantidades de imágenes a gran escala puede ser costoso en términos de procesamiento. Una alternativa para reducir los costos de compresión es explorar la aceleración de hardware. Bluedot desarrolló un codificador Pulsar-AVIF acelerado por hardware que se ejecuta en FPGA programables, como Alveo U250 de AMD. En comparación con avifenc basado en software, Pulsar-AVIF ofrece una mejora de velocidad de 7 a 23 veces con una eficiencia de compresión similar.

Codificador Tiempo de codificación (ms) Fotogramas por segundo Uso de CPU Especificaciones de hardware
Pulsar-AVIF
(FPGA)
60 409.85 Un 305% AMD Alveo U250 1ea + Intel(R) Xeon(R)
Platinum 8171 CPU a 2.6 GHz, 10 núcleos
avifenc
(libaom)
405 59.26 3,200% CPU Intel(R) Xeon(R) Platinum 8370C a
2.8 GHz, 32 núcleos
avifenc
(SVT-AV1)
1325 18.11 3,200% CPU Intel(R) Xeon(R) Platinum 8370C a
2.8 GHz, 32 núcleos
Comparación de velocidad de codificación de AVIF
  • Conjunto de pruebas: Kodak (24 imágenes de 768 x 512)
  • Codificación de 24 imágenes de forma simultánea (24 procesos)
  • Cada proceso de codificación de software se ejecuta con 4 subprocesos. (-j 4)


Los desarrolladores pueden implementar el codificador Pulsar-AVIF con máquinas virtuales en la nube, como Azure NP-Series.

Funciones de AVIF para páginas web responsivas

AVIF tiene algunas funciones interesantes que te ayudarán a ofrecer páginas web más responsivas. Esta vez, analizaremos un poco los AVIF animados, que son, de lejos, la forma más eficiente de ofrecer animaciones geniales en la Web.

AVIF animado

El GIF animado sigue siendo un formato popular para las imágenes animadas, a pesar de tener 35 años. Las mayores desventajas de los GIF animados son la compatibilidad con solo 256 colores y la mala compresión, lo que genera tamaños de archivo muy grandes y, al mismo tiempo, limita la resolución o la velocidad de fotogramas para casos de uso prácticos. Por el contrario, la codificación de AVIF animada es en realidad la misma que el esquema de codificación de video AV1, que proporciona ahorros significativos en el tamaño de los archivos en comparación con los GIF animados.

Ejecutamos una comparativa simple en la que codificamos un conjunto de GIF animados tanto en AVIF como en JPEG XL. En el conjunto de pruebas, el porcentaje promedio de ahorro de tamaño de archivo fue de aproximadamente el 86% en comparación con los archivos GIF originales y de alrededor del 73% en comparación con los archivos JPEG XL animados*.

Una comparación del rendimiento del códec de imágenes animadas. AVIF supera a GIF y JPEG XL en términos de tamaño promedio y mediano de los archivos.
* Versiones de libavif y libjxl: libavif versión 4cff6a3 (libaom versión v3.5.0), libjxl versión 176b1c03. Conjunto de prueba: 15 GIF de muestra de Wikipedia.

Chrome, Firefox y Safari admiten reproducciones animadas de AVIF.

FFmpeg es una herramienta que se puede usar para crear archivos AVIF animados. Este es un ejemplo básico de cómo convertir un GIF a AVIF con FFmpeg:

ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"

$CRF es la calidad de salida deseada en una escala de 0 a 63. Los valores más bajos significan una mejor calidad y un mayor tamaño de archivo. 0 usa compresión sin pérdida. Comienza con un valor de 23 para archivos AVIF animados pequeños.

FFmpeg usa libaom de forma predeterminada para codificar imágenes AVIF, pero también puede usar rav1e o SVT-AV1 cuando esté disponible. Puedes encontrar más información sobre las opciones del codificador y el ajuste de los parámetros de codificación para compensaciones entre velocidad y calidad en la guía de codificación AV1 de FFmpeg.

Otro caso de uso es volver a empaquetar un video AV1 en AVIF sin volver a codificar el archivo original. Esto es mucho más económico que decodificar o codificar el archivo AV1 original y hace que el video AV1 esté disponible para usarse con el elemento <img>. Puedes hacerlo con solo pasar -c:v copy a FFmpeg.

ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"

Conclusiones

El uso de AVIF en la Web ha aumentado de forma constante desde el lanzamiento y es ampliamente compatible con navegadores, CDN de imágenes, complementos de WordPress y herramientas de codificación. En resumen, AVIF es una excelente opción para publicar imágenes en la Web. Es rápido de codificar y decodificar, y proporciona la mejor calidad o el tamaño de archivo más pequeño, lo que prefieras para tu sitio web. AVIF es la forma más eficiente de entregar animaciones en la Web. Si tienes preguntas, comentarios o solicitudes de funciones, comunícate con nosotros a través de la lista de distribución av1-discuss, la comunidad de GitHub de AOM y la wiki de AVIF.

Imagen hero de Unsplash, por Amal S.