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.
¿Qué novedades hay en el 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 creció a aproximadamente uno por ciento en poco más de un año después de que Chrome agregara compatibilidad con AVIF 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. 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.
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.
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.
- 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*.
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.