Formatos de imagen WebP y AVIF: ¿cuál deberías usar?

Escrito por Ramón Saquete

El formato para imágenes para la Web de Google (WebP) ofrece características y tasas de compresión mejores que las del resto de formatos clásicos (JPG, GIF y PNG) y ya está disponible para su uso en todos los navegadores principales. Sin embargo, el nuevo formato AVIF ofrece tasas de compresión hasta un 30% mejores que WebP y algunas características adicionales, con la pega de que, al contrario que WebP, el formato AVIF todavía no está disponible en la mayoría de los navegadores y sus imágenes requieren un poco más de esfuerzo de procesamiento para ser descodificadas.
Anteriormente ya vimos como incluir imágenes WebP en el HTML, pero no explicamos cómo convertir imágenes a WebP, ni las características que tiene este formato. En esta entrada veremos todo sobre WebP y el nuevo formato AVIF.

¿Qué son los formatos de imagen WebP y AVIF?

El formato de imagen WebP (Web Picture Format) tiene licencia Open Source e incorpora casi todas las funcionalidades del resto de formatos de imagen de la Web y, en igualdad de condiciones, ofrece mejores tasas de compresión.

El formato de imagen AVIF (AV1 Image File Format) es abierto al igual que Webp, ofrece las mismas características que WebP, mejor compresión a costa de mayor tiempo de procesamiento y alguna funcionalidad adicional, de la que hablaremos más adelante.

Por lo tanto, los dos formatos son adecuados casi para cualquier situación, facilitando la tarea a la hora de decidir cuál el formato más adecuado para cada imagen, siendo esta una de sus principales ventajas.

Historia de WebP

Se dice que el formato WebP fue inventado por Google, pero es una verdad a medias. En realidad, Google compró una empresa llamada On2 Technologies que había desarrollado un codificador de vídeo llamado VP8. Los ingenieros de Google analizaron las tasas de compresión de los algoritmos utilizados por el VP8 para comprimir individualmente cada fotograma y constataron que obtenían ratios de compresión muy buenos. Por ello, decidieron usar estos algoritmos para crear el formato para imágenes WebP.

Para el codificador de vídeo VP8 crearon un contenedor llamado WebM, uno de los formatos de vídeo con mejores tasas de compresión y mayor soporte en la web. Al igual que cualquier otro contenedor o tipo de archivo de vídeo como .MP4, .MOV, .AVI o .MKV, WebM puede utilizar internamente distintos codificadores para el vídeo y el audio, siendo los más avanzados actualmente el VP9 para vídeo y Opus para audio. En esta entrada analizaremos solo el formato de imagen WebP.

Historia de AVIF

El formato AVIF ha sido creado por la organización Alliance for Open Media (AOMedia), una empresa especializada en el desarrollo de tecnologías para el streaming de vídeo. La invención de AVIF ha seguido el mismo camino que WebP y, al igual que este, se basa en cómo codifica los fotogramas un codificador de vídeo, en este caso AV1. Esta es la razón por la que AVIF es el acrónimo de AV1 Image File Format.

Compatibilidad con los navegadores

Actualmente todos los navegadores soportan WebP. El único problema es que en la versión de escritorio de Safari solo se soporta el formato con la versión Big Sur o superior de Mac OS. En consecuencia, hasta que no pasen unos años en el desarrollo de webs será recomendable seguir dando soporte a estas versiones antiguas de Mac OS.  Para ello podemos indicar distintos formatos de imagen en el HTML o cambiar las imágenes por la versión en WebP cuando en el servidor se detecta el parámetro de la cabecera HTTP “Accept”, con el tipo “image/webp”, como hace esta web.

AVIF actualmente solo es compatible con Google Chrome para escritorio y Android, el navegador nativo de Android y Opera. Así que todavía quedan muchos navegadores que deben añadir compatibilidad con este formato. Sin embargo, ya es recomendable usarlo porque Google Chrome tiene la mayor cuota de usuarios y, por lo tanto, optimizando para este navegador, obtenemos un beneficio en el rendimiento que afectará a la mayoría de las visitas. El tipo MIME que usa este formato es «image/avif», pudiendo especificar este formato junto a WebP de la siguiente forma:

<picture>
    <source srcset="/img/imagen.avif" type="image/avif" />
    <source srcset="/img/imagen.webp" type="image/webp" />
    <img src="/imgs/imagen.jpg" alt="texto SEO" />
</picture>

Ventajas y características de WebP y AVIF frente a otros formatos

Los formatos de imagen WebP y AVIF hoy en día soportan todas las características que vamos a ver en los siguientes puntos. Estas imitan las de otros formatos a los que sustituyen y de los que hablaremos junto a cada característica.

• Compresión con pérdida de información y sin trasparencias, al igual que JPG, pero con mayor compresión, al utilizar modificaciones y pasos adicionales del algoritmo JPG original. En WebP, si aumentamos mucho la compresión, apreciaremos que el algoritmo divide la imagen en cuadrados de 16×16 píxeles. Este efecto se acentúa en JPEG pero con AVIF no se aprecian tanto los cuadrados. En este caso, veremos que los detalles se difuminan como si de un cuadro impresionista se tratase (ver imagen siguiente).

  

  Para el ejemplo de arriba se han comprimido las imágenes de la siguiente forma:

  JPEG: con el programa Gimp se ha bajado la calidad a 0 y se ha seleccionado el submuestreo 4:2:0 (grosso modo, el submuestreo indica la resolución que se usa para cada canal en el modo de color YUV). Se ha obtenido una imagen de 3KB.

  WebP: con la herramienta por línea de comandos cwebp, se ha utilizado el párametro -q 0 (indica mínima calidad). Aquí el submuestreo no se puede elegir y en la compresión con pérdida siempre es 4:2:0. Se ha obtenido una imagen de 2 KB.

  AVIF: con la herramienta por línea de comandos avifenc, se han utilizado los parámetros –min 63 –max 63 (indica mínima calidad), -y 420 (submuestreo 4:2:0), -s 0 (máximo coste de CPU). Se ha obtenido una imagen de 1KB.
  Evidentemente, nunca vamos a comprimir las imágenes al máximo, pero es una buena manera de demostrar que los formatos más modernos permiten bajar más la calidad y, por tanto, aumentar la compresión sin que se afecte a la imagen.
  

• Compresión sin pérdida de información y con transparencias, al igual que PNG, pero con una compresión más densa y más rápida en el caso de Webp y mucho más densa y algo más lenta en el caso de AVIF.
  En WebP, cuando se utiliza compresión sin pérdida, se aplica internamente un algoritmo o formato distinto que trabaja exclusivamente con color de 24 bits por píxel, en el modo de color RGB. Esto significa 8 bits para cada uno de los tres canales. Cuando hay transparencia, tendremos 8 bits más para el canal alpha, haciendo un total de 32 bits por píxel.
  AVIF, por su parte, añade funcionalidades adicionales bastante interesantes, aunque es raro que los navegadores lleguen a incorporarlas. Permite 8, 10 o 12 bits de profundidad de color para cada uno de los canales, con lo que tendremos imágenes con degradados que solo podremos apreciar en un monitor y tarjeta gráfica profesionales para fotografía. Además, permite tener imágenes en HDR, una característica relativamente más fácil de encontrar en un monitor de usuario.
• Compresión con pérdida de información y con transparencias. Tanto en WebP como en AVIF tenemos la opción de elegir el porcentaje de calidad para la información de color (canales RGB) y las transparencias (canal alpha) por separado. No existía ningún formato de imagen que hiciera esto y era una funcionalidad necesaria, ya que PNG-24 ocupa demasiado cuando son imágenes muy grandes. Se estima que en un WebP con pérdida y transparencia, el tamaño se reduce entre un 60% y 70% respecto a la versión en PNG sin pérdida.
  Cuando necesitemos usar imágenes con transparencias en WebP o AVIF, la mejor opción suele ser dejar el canal alpha al 100% de calidad o sin pérdida de información, ya que el algoritmo sin pérdida que se utiliza en ambos casos es muy bueno.
• Ambos formatos permiten animaciones, al igual que GIF, pero con mayor compresión y color de 24 bits, en lugar de 8 bits indexados como los GIF. Para AVIF, las animaciones todavía no están soportadas en los navegadores.

Desventajas de WebP y AVIF

A pesar de sus múltiples virtudes, WebP y AVIF no lo abarcan todo y hay situaciones donde es preferible usar otros formatos de imagen:

• El único formato clásico que en ocasiones aventaja al WebP es el PNG-8, cuando tenemos imágenes con muy pocos colores. El PNG-8 es un formato en el que usamos 8 bits por píxel de color indexado, esto quiere decir que tendremos una paleta de 256 colores escogidos entre los más de 16 millones disponibles para representar la imagen. Si a la hora de guardar el archivo recortamos aún más esta paleta, ya sea porque la imagen lo permite o aplicando un tramado a la imagen, mayor será el ahorro conseguido respecto a la versión en WebP, que siempre trabaja como mínimo con 24 bits.
  AVIF también trabaja como mínimo con 24bits, pero la compresión es tan buena que le gana por mucho a los PNG-8.
• Ni WebP ni AVIF son formatos para imágenes vectoriales, para eso está SVG. En estos casos, SVG normalmente ganará al resto, aunque al ser el único que se guarda en modo texto debemos tener en cuenta que también es el único formato de imagen al que se le debe aplicar la compresión Brotli q11 o Gzip a nivel de servidor.
• Con determinadas imágenes en WebP el ahorro no es excesivo respecto a la versión utilizada en el formato de imagen clásico. En estos casos, puede que no merezca la pena el esfuerzo de optimización requerido para tener la imagen en los dos formatos, dependiendo de si se ha automatizado esta tarea o no. Así, si analizamos una web con PageSpeed Insights o Lighthouse, nos recomendará usar Webp en una imagen solo si el ahorro es mayor de 8 KB.
• Hay que decir que el estándar APNG, el cual permite tener animaciones de 24bits con compresión sin pérdida en los PNG, gana en compresión a las animaciones hechas con Webp, incluso cuando este último usa compresión con pérdida. APNG no está disponible en todos los navegadores, pero sí en la mayoría, por lo que es una opción a tener en cuenta en estos casos.

Además de todo lo anterior, ni WebP ni AVIF permiten la visualización progresiva o entrelazada que usan los formatos JPEG y PNG respectivamente. La visualización progresiva consiste en mostrar la imagen completa y progresivamente menos pixelada mientras se va descargando. Según la documentación de WebP, este tipo de visualización introduciría un coste de CPU muy alto.

¿Cuál es la mejor forma de comprimir imágenes en WebP o AVIF?

El famoso programa de edición de imágenes Gimp permite abrir imágenes y exportarlas a WebP. Si no lo conoces, te invito a probar este fantástico software gratuito y Open Source. También se pueden abrir y guardar archivos en WebP desde Adobe Photoshop, pero aquí hay que instalar un plugin que está algo anticuado, por lo que no lo recomiendo. Sin embargo, con ninguna de las opciones anteriores vamos a obtener buenos resultados. La mejor opción y con la que obtendremos tamaños de archivos más pequeños es la herramienta oficial por línea de comandos cwebp, disponible en el siguiente enlace:
https://developers.google.com/speed/webp/docs/precompiled.

Elegiremos la versión más actualizada para nuestro Sistema operativo, descargaremos y descomprimiremos el zip, en el que encontraremos una carpeta /bin. Esta carpeta se debe incluir en la variable de entorno PATH de nuestro sistema operativo, porque así tendremos disponibles todas las herramientas de línea de comandos para comprimir y descomprimir WebP desde un terminal o consola de comandos. Hecho esto, usaremos cwebp para comprimir WebP, por ejemplo, de la siguiente forma:

cwebp entrada.png -q 80 -blend_alpha 0xffffff -o salida.webp

En este ejemplo comprimimos una imagen en PNG con una calidad del 80%, combinando las partes transparentes con blanco y sin guardar información de transparencia. Hay muchas más opciones: por ejemplo, en lugar de usar «–blend_alpha», podríamos indicar un nivel calidad de transparencia del 60% con «–alpha_q 60» o quitar el canal alpha con «-noalpha» y nos rellenará los píxeles trasparentes con colores parecidos a los que les rodean.

Las herramientas por línea de comandos pueden parecer engorrosas para los usuarios, pero son la interfaz ideal para los desarrolladores y administradores de sistemas que desean automatizar la conversión de un conjunto grande de imágenes.

También hay librerías de programación que permiten integrar la compresión WebP dentro de un CMS.

Para comprimir en AVIF tenemos la herramienta online https://squoosh.app/ y la herramienta oficial por línea de comandos que podemos descargar para Windows en el siguiente enlace, seleccionando la última «release»: https://github.com/AOMediaCodec/libavif/releases. También podemos compilarla para Linux, descargando el código fuente desde el mismo enlace, o instalarla en Mac OS con:

brew install joedrago/repo/avifenc

Para usar la herramienta de compresión escribiremos en el terminal:

avifenc entrada.jpg -o salida.avif

Por último, muchos CDNs ofrecen la posibilidad de comprimir las imágenes en WebP o AVIF sin que tengamos que hacer nada más que activar la opción en su panel.

Otros formatos: JPEG XR y JPEG 2000

Microsoft hizo un intento de lanzar su propio formato para la web, JPEG XR. Este mejora la compresión de JPEG a un coste de mayor uso de CPU para su escritura y lectura. Este formato, contrariamente a lo que cabría esperar por parte de Microsoft, tiene licencia abierta, pero a pesar de eso no tuvo éxito y en las últimas versiones de Edge ya no está disponible, por lo que no debería tenerse en cuenta como opción.

El formato de imagen JPEG 2000 o JP2, desarrollado por el Joint Photographic Experts Group como sustituto de JPEG, está disponible solo en Safari y no tiene nada que hacer como formato abierto de la web por el gran número de patentes que utiliza y porque no comprime tanto como WebP, y mucho menos como AVIF.

Ambos formatos permiten compresión con pérdida, sin pérdida y transparencias.

Conclusión

AVIF es el mejor formato para la web disponible actualmente, ya que el aumento de uso de CPU que produce respecto a WebP no es significativo y la compresión obtenida es mucho más elevada. Siendo este un formato libre de patentes, cumple todos los requisitos para sustituir al resto, algo que irá sucediendo poco a poco, lo que a la larga ahorrará trabajo a la hora de crear distintas versiones de formato de archivo para cada imagen. No obstante, pasará mucho tiempo hasta que todos los navegadores lo soporten, por lo que todavía debemos usar AVIF junto a WebP y los formatos clásicos para dar soporte a todos los navegadores y así ofrecer a los usuarios las imágenes en el menor tamaño posible.

En el ámbito de las aplicaciones de retoque fotográfico y de imagen, ni siquiera WebP, después de varios años, tiene todavía soporte nativo en la mayoría de ellas, por lo que la mejor opción y más actualizada para comprimir en los nuevos formatos van a seguir siendo por mucho tiempo las herramientas oficiales por línea de comandos.

Bibliografía

• Comparativa entre WebP y AVIF
• https://developers.google.com/speed/webp
• https://developers.google.com/speed/webp/docs/compression
• https://developers.google.com/speed/webp/docs/c_study
• https://web.dev/uses-webp-images/
• https://web.dev/codelab-serve-images-webp/
• http://blog.webmproject.org/2010/07/inside-webm-technology-vp8-intra-and.html
• https://aomediacodec.github.io/av1-avif/