Entrega imágenes AVIF

1. Introducción

Las imágenes representan más del 60% de los bytes que se necesitan, en promedio, para cargar una página web. Con AVIF puedes reducir el tamaño de tus imágenes y hacer que tu sitio web se cargue más rápido.

¿Qué es AVIF?

AVIF es un nuevo formato de imagen derivado del bitream de video AV1. AVIF está diseñado para lograr eficiencia en la compresión.

¿Por qué elegir AVIF?

Las imágenes AVIF son mucho más pequeñas que las imágenes JPEG, PNG, GIF o WebP con una calidad igual o mejor.

Qué aprenderás

• Cómo crear imágenes AVIF a partir de tus imágenes
• Cómo renderizar imágenes AVIF en una página web

Requisitos

• Chrome versión 85 o posterior
• Un editor de texto
• cmake
• git
• ninja
• Una imagen. Proporcioné uno aquí.
• FFmpeg

2. Crear imágenes AVIF con Squoosh

Squoosh es una app web de compresión de imágenes. Con squoosh, puedes comprimir fácilmente imágenes en imágenes AVIF.

1. Abre https://squoosh.app.
2. Suelta una imagen local en Squoosh.

3. Selecciona AVIF en el cuadro desplegable Comprimir.

A continuación, Squoosh comprimirá la imagen en una imagen AVIF. Una vez que Squoosh esté listo, aparecerá un botón de descarga con algunas estadísticas en la imagen de AVIF en la esquina inferior derecha.

La imagen de muestra original era de 3340 kB y la imagen comprimida es de 378 kB. La imagen de muestra se comprimió casi 10 veces más pequeña que la imagen original.

4. Descarga la imagen de AVIF

Haz clic en el botón de descarga y la imagen AVIF se guardará en tu unidad local.

Para ver una imagen AVIF, arrástrala a Chrome.

Ahora tienes tu propia imagen de AVIF.

3. Cómo compilar el codificador de línea de comandos Avifenc

avifenc es una aplicación de línea de comandos que puede convertir imágenes PNG y JPEG en imágenes AVIF. avifenc usa libavif, una biblioteca que puede decodificar y codificar imágenes AVIF. Si tienes muchas imágenes que quieres convertir a AVIF, es probable que usar el codificador de línea de comandos, avifenc, sea una buena opción.

Chrome usa libavif para renderizar imágenes AVIF.

1. Obtén el código.

git clone https://github.com/AOMediaCodec/libavif.git

2. Cambia el directorio a libavif.

cd libavif/

Existen muchas formas diferentes de configurar avifenc y libavif para compilar. Puedes encontrar más información en libavif. Vamos a compilar avifenc para que esté vinculado estáticamente a la biblioteca de codificador y decodificador av1, libaom.

3. Obtén y crea Libaom.

Cambia al directorio de extensiones de libavif.

cd ext

El siguiente comando extraerá el código fuente de libaom y lo compilará de forma estática.

./aom.cmd

Cambia el directorio a libavif.

cd ../

4. Compila la herramienta de codificación de línea de comandos avifenc.

Se recomienda crear un directorio de compilación para avifenc.

mkdir build

Cambia al directorio de compilación.

cd build

Crea los archivos de compilación para avifenc.

cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

Compila avifenc.

make

Creaste avifenc correctamente.

4. Cómo crear imágenes AVIF con avifenc

1. Crea una imagen AVIF con configuración predeterminada.

Los parámetros más básicos para que se ejecute avifenc son los archivos de entrada y salida.

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"–min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a nitidez=3 -y 420" son configuraciones recomendadas para imágenes AVIF.

Avifenc tiene muchas opciones que afectarán tanto a la calidad como a la velocidad. Si quieres ver las opciones y obtener más información, ejecuta ./avifenc.

Ahora tienes tu propia segunda imagen de AVIF.

2. Se está acelerando el codificador.

Un parámetro que quizás sea bueno cambiar según la cantidad de núcleos que tengas en tu máquina es el parámetro --jobs. Este parámetro establece cuántos subprocesos usará Avifenc para crear imágenes de AVIF. Intenta ejecutar esta línea de comandos.

./avifenc happy_dog.jpg example.avif --jobs 8

Esto le indica a avifenc que debe utilizar 8 subprocesos cuando cree la imagen de AVIF. En mi máquina, esto acelera la codificación AVIF 5x.

5. Renderizar imágenes AVIF en una página web

Ahora vamos a mostrarle al mundo todo el trabajo arduo.

1. Crea una página web para entregar tu imagen AVIF.

Crea un archivo llamado avif_example.html.

Abre avif_example.html en tu editor de texto y escribe este código:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

Copia el archivo fuente (en mi caso, happy_dog.jpg) y el archivo AVIF (eaxmple.avif) en el mismo directorio que avif_example.html.

Usaremos el elemento para renderizar la imagen de AVIF si el navegador lo admite, con un resguardo de JPEG si el navegador no lo admite. Puedes encontrar más información sobre aquí.

2. Abre la página web en Chrome.

Una forma de abrir el archivo HTML es arrastrar avif_example.html a Chrome. Otra opción para abrir el archivo HTML es entregar avif_example.html desde un servidor HTTP.

Ahora tu imagen AVIF debería estar renderizada en Chrome. Para probar esto, haz clic con el botón derecho en la imagen y elige Save image as..., que debería abrir un cuadro de diálogo con example.avif. Otra opción es abrir las Herramientas para desarrolladores de Chrome y ver que se haya descargado example.avif.

6. Cómo crear imágenes AVIF animadas

1. Convierte tu contenido multimedia de origen al formato y4m.

avifenc admite y4m como entrada para crear imágenes AVIF animadas. Una excelente opción para crear archivos y4m es usar FFmpeg.

Los archivos Y4m no están comprimidos, por lo que pueden ser muy grandes.

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m

2. Crear una imagen AVIF animada

Creé un archivo y4m para que lo uses en caso de que no tengas un archivo multimedia de origen: ice_qcif_15fps.y4m. El archivo es de Xiph.org Video Test Media.

Ejecuta este comando para crear una imagen AVIF animada a partir de un archivo y4m.

avifenc ice_qcif_15fps.y4m animated.avif

Ahora tienes tu propia imagen AVIF animada.

3. Renderiza la imagen AVIF animada en una página web.

Crea un archivo llamado avif_animated_example.html.

Creé un archivo GIF para que lo uses en caso de que no tengas un archivo multimedia de origen: ice_qcif_15fps.gif.

Ten en cuenta que el archivo GIF es aproximadamente 35 veces más grande y la calidad es mucho peor.

Abre avif_animated_example.html en tu editor de texto y escribe este código:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

Copia el archivo fuente (en el caso anterior, ice_qcif_15fps.gif) y el archivo AVIF (animated.avif) en el mismo directorio que avif_animated_example.html.

4. Abre la página web en Chrome.

Una forma de abrir el archivo HTML es arrastrar avif_animated_example.html a Chrome. Otra opción para abrir el archivo HTML es entregar avif_animated_example.html desde un servidor HTTP.

Ahora tu imagen animada de AVIF debería estar renderizada en Chrome.

Si usas los medios de muestra proporcionados, debería verse de la siguiente manera:

La calidad es mucho mejor, excepto con el AVIF animado.

Para probar que se trata de una imagen AVIF animada, haz clic con el botón derecho en la imagen y elige Save image as..., lo que debería abrir un cuadro de diálogo con animated.avif. Otra opción es abrir las Herramientas para desarrolladores de Chrome y ver que se haya descargado animated.avif.

7. ¡Felicitaciones!

Terminaste el codelab de imágenes AVIF para entregar imágenes.

Esperamos que te quede claro cómo AVIF puede ayudarte a reducir el tamaño de tus imágenes y lograr que la transmisión sea más eficiente a través de la Web. Puedes obtener más información sobre las funciones de AVIF en una excelente publicación de Jake Archibald.