Una actualización sobre cómo se adoptó AVIF en el ecosistema.
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.
¿Cuáles son las novedades del ecosistema de AVIF?
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 aumentó a aproximadamente un uno por ciento en poco más de un año después de que Chrome agregó compatibilidad con AVIF en la versión estable.
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. Esta reducción del tamaño de los archivos permite ahorrar mucho almacenamiento, pero también ayuda a que las páginas se carguen más rápido, lo que genera tiempos de procesamiento de imagen con contenido más grande (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 una cantidad de complementos disponibles para que los desarrolladores conviertan sus imágenes a AVIF, por ejemplo:
Para los desarrolladores más prácticos, herramientas como ImageMagick y FFmpeg son un buen punto de partida.
Velocidad de codificación 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 de software de AVIF mejoró significativamente en los últimos dos años. En comparación con otros formatos modernos de imágenes estáticas, AVIF produce archivos más pequeños con una calidad visual similar (consulta el siguiente gráfico; cuanto más bajo, mejor), pero también es más rápido de codificar.
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 de varios subprocesos, AVIF logra un rendimiento similar para casos de uso comunes y, al mismo tiempo, ofrece ganancias de compresión significativas.
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 basada en software, Pulsar-AVIF mejora la velocidad de 7 a 23 veces con una eficiencia de compresión similar.
- Conjunto de prueba: 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 ayudarán a entregar 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. En cambio, la codificación AVIF animada es en realidad la misma que el esquema de codificación de video AV1, que permite reducir de manera significativa el tamaño de los archivos en comparación con los GIF animados.
Ejecutamos una comparativa simple en la que codificamos un conjunto de GIFs animados a AVIF y JPEG XL. En el conjunto de prueba, el porcentaje de ahorro en el tamaño medio de los archivos fue de aproximadamente un 86% en comparación con los archivos GIF originales y de alrededor de un 73% en comparación con los archivos JPEG XL animados.*
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.