AVIF, ¿una alternativa a WebP para las imágenes web?

En SiloCreativo hemos hablado de la elección de un tipo u otro de formato de imágen para nuestra web según cada situación. Este debate parecía estar zanjado con WebP, pero somos aun muchos los que no nos atrevemos a dejar completamente de lado el veterano JPG por las incompatibilidades con algunos navegadores web. Ahora, cuando parece que Apple se lanza a la piscina con WebP gracias al próximo Safari 14, se presenta AVIF como un nuevo contrincante, con interesantes razones para conquistarnos.

A principios Agosto, Google anunció que Chrome sería compatible con AVIF desde su versión 85. Con Mozilla preparando el terreno para hacer lo mismo con Firefox, y Netflix usándolo de forma masiva desde Febrero para mostrar todas las portadas, fotografías y fondos de películas y series. Parece que está iniciándose de mejor forma de la que lo hizo WebP en su momento. Tal como pasó con WebP, quedaría por ver la asimilación por parte de Apple, pero es posible que no tarden tanto, ya que AVIF tiene ciertas características, que si pueden ser de su interés.

En este artículo nos queremos centrar en las características que nos ofrece AVIF y de donde ha surgido AVIF. Además de ver como podemos convertir imágenes y usarlas en nuestros diseños web.

¿Qué es AVIF?

AVIF (AV1 Image File Format) es una especificación para guardar imágenes en formato AV1, creado por Alliance for Open Media en colaboración con otras compañías, como Google o Cisco. O en otras palabras, AVIF es el codec de compresión de imagen del formato AV1. Al ser este un formato open-source, no hay que pagar ningún tipo de royalties a sus creadores. Pero no se queda aquí su lista de características interesantes:

  • Compatible con cualquier codec de imagen.
  • Compatible con HDR.
  • Puede almacenar secuencias de imágenes, como el formato GIF.
  • Soporta transparencias.

logotipo de av1

Pero centrémonos en lo que nos interesa a la mayoría: comparando con JPG y WebP, ¿que ventaja tiene con respecto al tamaño de los archivos?. Pues si WebP tiene de media el 50% del peso de un JPG con la misma calidad, AVIF nos da el 30% del peso de un JPG con la misma calidad. Es decir, con AVIF conseguimos reducir algo menos de la mitad el peso del WebP. No está nada mal. Si queréis ver un análisis más técnico, os recomiendo leer este completo artículo de Daniel Aleksandersen en Ctrl blog.

Compatibilidad de AVIF en la web

En estos momentos, es el mayor punto negativo de AVIF, y es que la compatibilidad de forma nativa por ahora solo la tiene con Google Chrome. En Firefox podemos activarlo en su configuración interna (ya que está por defecto desactivada), pero es probable que esté activa de forma general en alguna versión muy próxima. Si nos vamos a Can I Use?, podemos ver de un vistazo el panorama actual que tiene este formato.

tabla de compatibilidades de avif con los navegadores web más usados

Conociendo esto, y que WebP ha tomado casi una década en ser compatible con la amplia mayoría de navegadores (si no tenemos en cuenta al ya descontinuado Internet Explorer), ¿qué razones habría para empezar a considerar a AVIF como una opción a corto-medio plazo?. Como hemos dicho antes, AVIF cuenta con la ventaja de que ya hay grandes nombres detrás suyo que lo han adoptado, como Netflix, que lo lleva usando en su servicio desde principios de año. Y que tenga grandes nombres como Google detrás puede hacer que su adopción sea más rápida. La duda estaría con Apple, que tenemos la experiencia de que ha abrazado WebP casi con una década de retraso. Pero al tener AVIF soporte para HDR, es posible que se animen bastante antes a dar el salto.

Usando AVIF en la web

Hemos visto que no podemos dar un cambio por completo en nuestra forma de trabajo, y usar AVIF de forma masiva a la hora de trabajar con nuestra imágenes. Pero lo que si podemos hacer es utilizarla junto al resto de formatos de imagen para que, conforme se vayan actualizando los diferentes navegadores, hagan uso de AVIF. Esto lo conseguimos de forma sencilla con estas líneas de código al añadir una imagen a nuestro HTML gracias al elemento picture:

<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="descripción de la imagen">
</picture>

Con esto hacemos que, según sea el navegador que utilicen nuestros visitantes, escoja un tipo de imagen u otro. Si el navegador web es compatible con AVIF, cargará el archivo image.avif. Si no es compatible con AVIF, cargará el archivo image.webp. Y si no es compatible ni con AVIF ni WebP, cargará el archivo JPG. Con esto nos aseguramos dos cosas. La primera, es que siempre se va a cargar la imagen. Y la segunda, es que cargará el formato de imagen más óptimo según su compatibilidad.

Convirtiendo imágenes a AVIF

Por último, vamos a ver como podemos conseguir convertir un archivo de imagen a AVIF. Si no tienes ninguna imagen a mano, siempre puedes descargar alguna desde uno de los bancos de imágenes que os recomendamos desde Silo. Centrándonos en la imagen, ya existen diferentes conversores online disponibles que nos ayudarán con esta tarea. Personalmente me gusta Squoosh.app de Google, ya que es el que suelo usar normalmente para optimizar imágenes, y desde hace poco más de un mes también soporta AVIF.

comparacion entre jpg y avif en el conversor squoosh.app

Usar Squoosh es tan sencillo como arrastrar la imagen a la pantalla, y en el menú de la esquina inferior derecha elegir el formato de salida de la imagen. Elegimos AVIF en el menú desplegable, y directamente nos mostrará el tamaño de salida del archivo y el porcentaje que hemos logrado reducir. Donde se sitúa una imagen vemos que hay un deslizable, donde podemos comprobar la imagen antes y después de la conversión. Este deslizable es muy útil si vemos que con los ajustes por defecto que nos da Squoosh para AVIF no obtenemos la calidad que buscamos. Si esto es así, es cuestión de ir jugando con los números de Max quality y Min quality hasta obtener lo que queramos.

Y con esto terminamos nuestro artículo sobre AVIF. Como hemos podido ver, es un tipo de archivo que estamos seguro que dará mucho que hablar en el futuro, y que por el bien de la web, la adopción por parte de todos sea más pronto que tarde. Tendremos webs que cargarán de forma más rápida, pesarán menos, y consumirán menos datos. Con el beneficio que todo esto conlleva.

Y vosotros, ¿qué opinión os merece AVIF?. ¿Pensáis que tendrá éxito, o que se tardará en expandirse tal como le ocurrió a WebP?. Como siempre, tenéis abiertos los comentarios para que nos hagáis llegar vuestras opiniones, dudas y experiencias con AVIF.

Comentarios (2)

  1. Muy bien explicado gracias
    Una pregunta, en donde puedo subir las imágenes AVIF, actualmente uso imágenes webo y las subo a imagen.co pero no admite imágenes AVIF, sabes alguno que lo acepte, gracias de antemano

    1. Hola Jose!

      Por desgracia, al ser un formato que se está usando desde hace relativamente hace poco tiempo, está poco extendido más haya de varios CDNs. Si no me equivoco, el único host del estilo al que comentas es imagekit.io.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *