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 formato de imagen derivado del flujo de bits de video AV1. AVIF se creó para lograr eficiencia en la compresión.

¿Por qué AVIF?

Las imágenes AVIF son mucho más pequeñas que las imágenes JPEG, PNG, GIF o WebP con la misma calidad 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

• Cualquier navegador principal
• Un editor de texto
• cmake
• git
• ninja
• Una imagen (aquí te proporcioné una aquí)
• FFmpeg

2. Cómo crear imágenes AVIF con Squoosh

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

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

3. Elige AVIF en el cuadro desplegable Compress.

Luego, Squoosh comprimirá tu imagen en una imagen AVIF. Una vez que Squoosh termine, mostrará un botón de descarga con algunas estadísticas sobre la imagen AVIF en la esquina inferior derecha.

La imagen de muestra original era de 3,340 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 AVIF.

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

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

Ahora tienes tu propia imagen 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, que es una biblioteca que puede decodificar y codificar imágenes AVIF. Si tienes muchas imágenes que deseas convertir a AVIF, usar el codificador de línea de comandos, avifenc, es probablemente 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. Compilaremos avifenc para que esté vinculado de forma estática al codificador libaom, al decodificador dav1d y a las bibliotecas de procesamiento libyuv.

libyuv es importante para acelerar el rendimiento de las conversiones de color.

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

Es recomendable 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 -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

Compila avifenc.

make

Compilaste avifenc correctamente.

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

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

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

./avifenc happy_dog.jpg example.avif

Ahora tienes tu propia segunda imagen AVIF.

2. Cómo cambiar la calidad de la codificación AVIF

Por lo general, el único parámetro que quizás quieras cambiar en la codificación AVIF es el parámetro quality. quality es un parámetro que intercambia la calidad de una imagen comprimida por el tamaño del archivo. Por ejemplo, un archivo de alta calidad (-q 90) será mucho más grande que un archivo de baja calidad (-q 20), pero el archivo de alta calidad se verá mucho mejor.

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

5. Cómo renderizar imágenes AVIF en una página web

Ahora mostremos al mundo todo tu arduo trabajo.

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 tu archivo fuente (en mi caso, happy_dog.jpg) y tu archivo AVIF (eaxmple.avif) en el mismo directorio que avif_example.html.

Usamos el elemento picture para renderizar la imagen AVIF si el navegador admite AVIF, con una alternativa a JPEG si el navegador no lo hace. Puedes encontrar más información sobre el elemento picture 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 renderizarse 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 descargue example.avif.

6. Cómo crear imágenes AVIF animadas con FFmpeg

Obtener FFmpeg en tu sistema no se incluye en este codelab. Para obtener más información sobre cómo obtener FFmpeg en tu sistema, consulta la documentación de FFmpeg.

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

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

1. Crea una imagen AVIF animada.

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

Ahora tienes tu propia imagen AVIF animada.

2. 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 fuente: ice_qcif_15fps.gif.

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 tu archivo fuente (en el caso anterior, ice_qcif_15fps.gif) y tu archivo AVIF (animated.avif) en el mismo directorio que avif_animated_example.html.

3. 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 AVIF animada debería renderizarse en Chrome.

Si usas el contenido multimedia de muestra proporcionado, debería verse de la siguiente manera:

Para probar que es una imagen AVIF animada, 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 animated.avif. Otra opción es abrir las Herramientas para desarrolladores de Chrome y ver que se descargue animated.avif.

7. Cómo crear imágenes AVIF animadas con avifenc

1. Convierte tu contenido multimedia fuente 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 yuvj444p -f yuv4mpegpipe output.y4m

2. Crea una imagen AVIF animada.

Creé un archivo y4m para que lo uses en caso de que no tengas un archivo multimedia fuente: 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 segunda 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 fuente: ice_qcif_15fps.gif.

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 tu archivo fuente (en el caso anterior, ice_qcif_15fps.gif) y tu 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 AVIF animada debería renderizarse en Chrome.

Si usas el contenido multimedia de muestra proporcionado, debería verse de la siguiente manera:

Excepto con el AVIF animado, de mucha mejor calidad.

Para probar que es una imagen AVIF animada, 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 animated.avif. Otra opción es abrir las Herramientas para desarrolladores de Chrome y ver que se descargue animated.avif.

5. Cómo cambiar la calidad de la codificación AVIF

El archivo ice_qcif_15fps.gif es aproximadamente 7 veces más grande con una calidad mucho peor. Puedes cambiar la calidad de AVIF para que coincida aproximadamente con la calidad de ice_qcif_15fps.gif cambiando el parámetro de calidad a 20.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

Ahora, el archivo AVIF animado y ice_qcif_15fps.gif tienen aproximadamente la misma calidad, pero el archivo GIF es aproximadamente 22 veces más grande.

8. ¡Felicitaciones!

Finalizaste el codelab de entrega de imágenes AVIF.

Esperamos que te quede claro cómo AVIF puede ayudar a reducir el tamaño de tus imágenes y hacerlas más eficientes para transmitirlas 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.