AVIF, el formato de archivo basado en el códec de video 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 el soporte del navegador es bueno, AVIF todavía está en el filo sangriento en cuanto a la codificación y decodificación. La codificación, decodificación, configuraciones y parámetros se han discutido bien en otra parte.
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 o antes de que se sumerja en AVIF.
1. WebP es mejor para miniaturas
Una observación interesante es que para imágenes de dimensiones pequeñas, WebP producirá imágenes de carga útil más livianas que AVIF.
Probablemente sea posible explicar por qué y ajustar el codificador para abordar 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 en un CDN de imágenes como ImageEngine. La siguiente comparación utiliza exactamente estas dos alternativas para la conversión de 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, a la 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 efectiva 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 | JPEG original (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, una página de producto consta de imágenes del producto, y cuando el mouse de un usuario pasa sobre la imagen del producto o hace clic en ella, se acerca para ofrecer una vista 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 amplíe. 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 regularmente optimizada y una imagen AVIF optimizada por squoosh.app.
El AVIF es mucho más ligero que el JPEG, pero en este caso el compromiso entre la calidad visual y el menor tamaño del 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 los problemas de forma proactiva en un proceso de creació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ípica, el renderizado progresivo puede proporcionar una característica excelente para mejorar las métricas clave como la pintura más grande con contenido y otras métricas de Core Web Vitals. Incluso si un archivo JPEG tarda un poco más en descargarse debido a su tamaño de archivo más grande en comparación con AVIF, es probable que comience a procesarse antes que un AVIF gracias a su mecanismo de procesamiento progresivo. Este caso está bien ilustrado por este video de Jake Acibald.
3. JPEG 2000 le está dando una dura competencia a AVIF
El punto de venta clave 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) en algunos casos puede 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 es compatible con JPEG2000.
Para ilustrar, echemos un vistazo a este adorable cachorro. El tamaño del archivo AVIF optimizado por squoosh.app es de 27,9 KB con la configuración predeterminada. Convirtiendo la imagen a JPEG2000, nuevamente utilizando ImageEngine, el tamaño del archivo es de 26,7 KB. No hay mucha diferencia, pero suficiente para ilustrar el caso.
¿Qué pasa con la calidad visual? DSSIM es una forma popular de comparar la similitud visual de una imagen con la imagen original. La métrica DSSIM compara la imagen original con un archivo convertido, donde un valor más bajo indica una mejor calidad. Al convertir sin pérdidas la versión AVIF y JPEG2000 a PNG, la puntuación DSSIM es así:
| DSSIM (0 = igual al original) | bytes | |
|---|---|---|
| JPEG2000 | 0.019 | 26.7KB |
| AVIF | 0.012 | 27,9 KB |
AVIF tiene un 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 “bala de plata” o el formato de imagen único para gobernarlos a todos. En primer lugar, todavía es muy temprano en el desarrollo de codificadores y decodificadores. Además, AVIF es otro formato más para administrar. Como Jake Archibald también concluye en su artículo, ofrecer más de 3 versiones de cada imagen en su página web es un poco molesto 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 sea compatible con AVIF no significa que sea la mejor opción para sus usuarios.
Usar imágenes receptivas 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 elegirá AVIF si es compatible, independientemente de si AVIF es la herramienta adecuada o no.
Sin embargo, el uso de una CDN de imágenes como ImageEngine permitirá en mayor medida elegir dinámicamente entre los formatos admitidos y adivinar cualificadamente 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.