¿Qué es AVIF o AV1? ¿Cómo habilitar su soporte en Chrome y Firefox?

Cuando se trata de cargar sitios web, las imágenes toman mucho tiempo debido al tamaño. En los últimos años, se han realizado muchos esfuerzos y WebP se ha vuelto popular. En comparación con JPEG, el formato WebP es un 30% más pequeño, lo cual es enorme, especialmente ahora que el factor vital web de Google es parte del algoritmo de búsqueda. Pero esto no termina aquí.

Alliance for Open Media ha desarrollado un nuevo formato de imagen:AV1 (.avif), que es un 50% más pequeño que JPEG. En esta publicación, hablaremos sobre esto y cómo puede habilitar su soporte en Chrome, Firefox y Edge.

AVIF o AV1

¿Qué es el formato de imagen AVIF o AV1?

Alliance for Open Media, en colaboración con Google, Cisco y Xiph.org, ha creado el formato AVIF. Es un formato de código abierto que no requiere regalías (JPEG requiere licencias costosas para implementar). Es una imagen supercomprimida que ofrece una mejor calidad para comprimir la relación de tamaño de archivo. Aquí está la lista de características:

  • Admite cualquier códec de imagen
  • Puede tener pérdidas o no tener pérdidas.
  • Puede almacenar una serie de fotogramas, es decir, soporte GIF.
  • Admite soporte de color HDR con mejor brillo, profundidad de color y gamas de colores

Habilite la compatibilidad con AVIF o AV1 en Chrome, Edge y Firefox

Ya que el formato es nuevo, y llevará tiempo convertirse en la corriente principal. La buena noticia es que los navegadores ya los admiten, pero aún no se han habilitado de forma predeterminada. Eventualmente sucederá por el carril.

Chrome versión 85 ya lo ha habilitado, mientras que Firefox (versión 80) necesita una bandera para estar habilitado. Siga el método mencionado a continuación para Firefox:

  • En una nueva pestaña, escriba about: config y presione la tecla Enter.
  • Busque image.avif.enabled
  • Haga doble clic para cambiar el valor a verdadero.

Dado que Microsoft Edge usa el mismo motor Chromium, la compatibilidad con Edge debería implementarse pronto.

¿Cómo pueden implementarlo los sitios web?

Los propietarios de sitios web pueden usar el elemento PICTURE del HTML nativo para incluir respaldo, es decir, si el navegador no lo admite, puede solicitar al navegador que use algún otro formato de imagen.

<picture>
	<source  type="image/avif">
	<source  type="image/webp">
	<img src="https://www.thewindowsclub.com/img/photo.jpg" alt="Description of Photo">
</picture>

Cómo crear un archivo AVIF

Conversión Sqoosh AVIF

Puedes usar el Squoosh aplicación web para convertir cualquier imagen a AVIF. Con la tecnología del equipo de Google Chrome Labs, obtiene acceso a las opciones avanzadas para todos los compresores de imágenes. Si solo tiene un par de imágenes, puede usar esta.

Para sitios web o conversión masiva de imágenes, puede usar la biblioteca AOMedia, libavif, para codificar / decodificar archivos AVIF. Aquellos que son usuarios de macOS con Cerveza casera, puede instalar una versión prediseñada con el siguiente comando

brew install joedrago/repo/avifenc

El formato de imagen AVIF suena prometedor. Dado que ayuda a mejorar la carga de sitios web mucho más rápido, debería adoptarse más rápidamente que el formato WebP. Este último tomó mucho tiempo, principalmente porque la velocidad no era una preocupación principal entonces, pero ahora lo es.

Conversión Sqoosh AVIF

Otros artículos relacionados

Deja un comentario