Tres cosas que no sabías sobre AVIF

AVIF, el formato de archivo basado en el código de vídeo AV1, es la última incorporación a los formatos de imagen de próxima generación. Los primeros informes y comparaciones muestran buenos resultados en comparación con JPEG y WebP. Sin embargo, incluso si la compatibilidad con el navegador es buena, AVIF todavía está a la vanguardia en lo que respecta a codificación y decodificación. La codificación, decodificación, configuraciones y parámetros se han discutido bien en otros lugares.

Sin duda, las imágenes AVIF generan una carga útil más pequeña y tienen un aspecto agradable. En esta publicación, analizaremos más de cerca los problemas que debe tener en cuenta antes de comenzar con AVIF.

1. WebP es mejor para miniaturas

Una observación interesante es que para imágenes de pequeñas dimensiones, WebP producirá imágenes de carga útiles más ligeras que AVIF.

Probablemente sea posible explicar por qué y ajustar el codificador para solucionar este caso. Sin embargo, esa no es una opción para la mayoría de las personas. La mayoría de la gente probablemente confiaría en un optimizador de imágenes como squoosh.app o un CDN de imágenes como ImageEngine. La siguiente comparación utiliza exactamente estas dos alternativas para la conversión AVIF.

Vemos que WebP generalmente producirá imágenes con un tamaño de archivo mayor que AVIF. En imágenes de dimensiones más grandes, ImageEngine funciona significativamente mejor que squoosh.app.

Ahora, una observación interesante. En imágenes de alrededor de 100 px × 100 px, squoosh.app supera a ImageEngine en efectividad, pero luego también WebP se pone al día y para una imagen de 80 px x 80 px. WebP es en realidad la imagen más eficaz medida en tamaño de archivo.

La prueba se realiza de manera relativamente consistente en diferentes tipos de imágenes. Para esta ilustración se utiliza esta imagen de Picsum.

Píxeles	Original JPEG (bytes)	WebP optimizado (bytes)	ImageEngine AVIF (bytes)	squoosh.app AVIF (bytes)
50	1.475	598	888	687
80	2.090	1.076	1.234	1.070
110	3.022	1.716	1.592	1.580
150	4.457	2.808	2,153	2,275
170	5.300	3,224	2.450	2.670
230	7.792	4.886	3.189	3.900
290	10.895	6.774	4.056	5.130

2. AVIF podría no ser el mejor para imágenes de productos con alta entropía

Por lo general, la página de un producto consta de imágenes del producto y, cuando el mouse de un usuario pasa el mouse sobre la imagen del producto o hace clic en ella, se acerca para ofrecer una visión más cercana de los detalles.

Vale la pena señalar que, en ciertos casos, AVIF reducirá el nivel de detalle o la nitidez percibida de la imagen cuando se hace zoom. Especialmente en una imagen de producto típica donde el fondo está borroso o tiene baja entropía mientras que el primer plano y el producto tienen más detalle y posiblemente mayor entropía.

A continuación se muestra una parte ampliada de una imagen de producto más grande ( JPEG , AVIF ) que ilustra claramente la diferencia entre una imagen JPEG optimizada regularmente y una imagen AVIF optimizada por squoosh.app.

De hecho, AVIF es mucho más liviano que JPEG, pero en este caso la compensación entre calidad visual y menor tamaño de archivo ha ido demasiado lejos. Este efecto no será tan perceptible para todos los tipos de imágenes y, por lo tanto, será difícil solucionar problemas de manera proactiva en un proceso de compilación automatizado que se basa en la sintaxis de imágenes receptivas para la selección de formato.

Además, a diferencia de JPEG, AVIF no admite renderizado progresivo. Para una página de detalles de producto típico, el renderizado progresivo puede proporcionar una característica excelente para mejorar métricas clave como Largest Contentful Paint y otras métricas de Core Web Vitals. Incluso si un JPEG tarda un poco más en descargarse debido a su mayor tamaño de archivo en comparación con AVIF, es probable que comience a renderizarse antes que un AVIF gracias a su mecanismo de renderizado progresivo. Este caso está bien ilustrado por este vídeo de Jake Achibald.

3. JPEG 2000 está dando a AVIF una dura competencia

El punto clave de venta de AVIF es su tamaño de archivo extremadamente bajo en relación con una calidad de imagen visual aceptable. Los primeros blogs e informes se han centrado en esto. Sin embargo, JPEG2000 (o JP2) puede en algunos casos ser una mejor herramienta para el trabajo. JPEG2000 es un formato de archivo relativamente antiguo y no recibe el mismo nivel de atención que AVIF, incluso si el lado del universo de Apple ya admite JPEG2000.

Para ilustrar, miremos a este adorable cachorro. El tamaño del archivo AVIF optimizado por squoosh.app es 27,9 KB con la configuración predeterminada. Al convertir la imagen a JPEG2000, usando nuevamente ImageEngine, el tamaño del archivo es 26,7 KB. No hay mucha diferencia, pero sí suficiente para ilustrar el caso.

¿Qué pasa con la calidad visual? DSSIM es una forma popular de comparar qué tan visualmente similar es una imagen a la imagen original. La métrica DSSIM compara la imagen original con un archivo convertido; un valor más bajo indica una mejor calidad. Al convertir sin pérdidas las versiones AVIF y JPEG2000 a PNG, la puntuación DSSIM es la siguiente:

	DSSIM (0 = igual al original)	bytes
JPEG2000	0.019	26,7KB
AVIF	0.012	27,9KB

AVIF tiene DSSIM ligeramente mejor pero apenas visible para el ojo humano.

Herramienta adecuada para el trabajo.

La conclusión clave de este artículo es que AVIF no es la “solución milagrosa” o el único formato de imagen que los domina a todos. En primer lugar, todavía es muy temprano en el desarrollo de codificadores y decodificadores. Además, AVIF es un formato más para gestionar. Como también concluye Jake Archibald en su artículo, ofrecer más de 3 versiones de cada imagen en su página web es un poco complicado a menos que todo el flujo de trabajo (cambiar el tamaño, comprimir, convertir, seleccionar, entregar) esté completamente automatizado.

Además, como hemos visto, el hecho de que un navegador admita AVIF no significa que sea la mejor opción para sus usuarios.

Usar imágenes responsables y agregar AVIF a la lista de formatos de imagen para crear previamente es mejor que no considerar AVIF en absoluto. Un desafío potencial es que el navegador seleccionará AVIF si es compatible, independientemente de si AVIF es la herramienta adecuada o no.

Sin embargo, al utilizar un CDN de imágenes como ImageEngine, podrá elegir dinámicamente entre formatos compatibles y hacer una suposición calificada sobre si WEBP, JPEG2000 o AVIF brindarán la mejor experiencia de usuario. El uso de una CDN de imágenes para automatizar el proceso de optimización de imágenes tendrá en cuenta la compatibilidad del navegador, el tamaño de la carga útil de la imagen y la calidad visual.