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 las imágenes estáticas y animaciones.
¿Cuáles son las novedades del ecosistema de AVIF?
Desde la presentación de AVIF en Chrome, Firefox y Safari, el uso de AVIF en la Web ha crecido de manera constante; casi todos los navegadores admiten AVIF en la actualidad.
Solo en Chrome, el uso de AVIF creció hasta un 1% aproximadamente en poco más de un año después de que Chrome agregara compatibilidad con AVIF en el nivel estable.
En la actualidad, varias CDN de imágenes, como Akamai, Cloudflare, Imgix y Cloudinary entregan imágenes AVIF. En una entrada de blog en la que se anunciaba la compatibilidad con AVIF, Imgix informó un ahorro de tamaño de archivo del 60% en comparación con JPEG, y del 35% en comparación con WebP. Este ahorro en el 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 Largest Contentful Paint (LCP). El LCP es una de las Métricas web esenciales y representa la rapidez con la que se carga 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 generaría con AVIF.
WordPress es la plataforma de sitios web más popular del mundo. Hay varios complementos disponibles para que los desarrolladores conviertan sus imágenes a AVIF, por ejemplo:
- AutoOptimize
- Convertido para contenido multimedia
- Optimizador de imágenes EWWW
- Optimole
- Optimizador de imágenes ShortPixel
Para los desarrolladores más activos, herramientas como ImageMagick y FFmpeg son un buen punto de partida.
Velocidad de codificación AVIF
La rápida velocidad de codificación y la alta calidad visual son aspectos fundamentales para implementar la compresión de imágenes a gran escala. La velocidad de codificación del software AVIF ha mejorado significativamente en los últimos dos años. En comparación con otros formatos de imagen estática modernos, AVIF produce archivos más pequeños con una calidad visual similar (mira el siguiente gráfico, es mejor, cuanto más bajo), pero también es más rápido de codificar.
En el siguiente gráfico (más alto es mejor), se ilustra cómo se compara la velocidad de codificación AVIF con la de otros formatos de imagen. Los códecs de generación anterior 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 casos de uso comunes a la vez que entrega ganancias de compresión significativas.
Para los desarrolladores interesados en comparaciones más detalladas de velocidad de codificación y calidad visual, el sitio Comparaciones de programación de imágenes contiene resultados de comparativas que se pueden reproducir.
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 escala puede ser costoso desde el punto de vista informático. 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 en la compresión similar.
- Conjunto de prueba: Kodak (24 imágenes de 768 x 512)
- Codificar 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 publicar páginas web más responsivas. En esta ocasión, analizaremos un poco los AVIF animados, que son 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 que tiene 35 años. Las mayores desventajas de los GIF animados son la compatibilidad con 256 colores únicamente y una compresión deficiente que genera archivos muy grandes, a la vez que limita la resolución o la velocidad de fotogramas para casos de uso prácticos. Por el contrario, la codificación AVIF animada es igual que el esquema de programación de video AV1, que permite reducir significativamente 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 para AVIF y JPEG XL. En el conjunto de prueba, el porcentaje de ahorro del tamaño de los archivos promedio fue de aproximadamente un 86% en comparación con los archivos GIF originales y alrededor del 73% en comparación con los archivos JPEG XL animados.*
Chrome, Firefox y Safari son compatibles con las reproducciones animadas de AVIF.
FFmpeg es una herramienta que puedes usar para crear archivos AVIF animados. Este es un ejemplo básico para convertir un GIF a AVIF usando 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 implican una mejor calidad y un mayor tamaño de archivo. 0 usa compresión sin pérdida. Comienza con un valor de 23 para pequeños archivos AVIF animados.
FFmpeg usa libaom de forma predeterminada para codificar imágenes AVIF, pero también puede usar rav1e o SVT-AV1 cuando estén disponibles. Puedes encontrar más información sobre las opciones de codificador y el ajuste de los parámetros de codificación para las compensaciones de velocidad y calidad en la guía de codificación de 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 significativamente más económico que decodificar o codificar el archivo AV1 original y permite que el video AV1 esté disponible para usar con el elemento <img>. Para ello, se pasa -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 ido en aumento desde su lanzamiento y es ampliamente compatible con navegadores, CDN de imágenes, complementos de WordPress y herramientas de codificación. En general, AVIF es una excelente opción para mostrar imágenes en la Web; AVIF se codifica y decodifica rápidamente, al tiempo que 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 publicar animaciones en la Web. Si tienes preguntas, comentarios o solicitudes de funciones, comunícate con nosotros en la lista de distribución de av1-discuss, la comunidad de GitHub de AOM y la wiki de AVIF.