Con frecuencia escribimos sobre el sobredimensionamiento de imágenes provenientes de sitios web, y herramientas como Lighthouse destacan cuando la carga de imágenes tiene un impacto negativo en la experiencia del usuario, como el aumento del tiempo de carga o la reducción del ancho de banda de recursos más importantes. Una forma de solucionar este problema es usar la compresión moderna para reducir el tamaño del archivo de las imágenes. Una opción nueva para los desarrolladores web es el formato de imagen AVIF. En esta entrada de blog, se describen las actualizaciones recientes de las herramientas de código abierto para AVIF, se presentan las bibliotecas de codificación libaom y libavif, y se incluye un instructivo sobre el uso de estas bibliotecas para codificar imágenes AVIF de manera eficiente.
AVIF es un formato de imagen basado en el códec de video AV1 y estandarizado por Alliance for Open Media. AVIF ofrece importantes mejoras de compresión en comparación con otros formatos de imagen, como JPEG y WebP. Si bien el ahorro exacto dependerá del contenido, la configuración de codificación y el objetivo de calidad, nosotros y otros obtuvimos más de un 50% de ahorro en comparación con JPEG.
Además, AVIF agrega compatibilidad con códecs y contenedores para funciones de imagen nuevas, como el alto rango dinámico y la amplia gama de colores, la síntesis de granos de película y la decodificación progresiva.
Novedades
Desde que se habilitó la compatibilidad con AVIF en Chrome M85, la compatibilidad con el ecosistema de código abierto mejoró en varios aspectos.
Libaom
Libaom es un codificador y decodificador AV1 de código abierto mantenido por las empresas de la Alianza para Medios Abiertos y que se usa en muchos servicios de producción de Google y otras empresas miembro. Entre la versión 2.0.0 de libaom (al mismo tiempo que Chrome agregó compatibilidad con AVIF) y la versión más reciente 3.1.0, se agregaron importantes optimizaciones de codificación de imágenes a la base de código. Examinémoslos.
- Optimizaciones para la codificación en mosaico y varios subprocesos.
- Reducción del 500% en el uso de memoria
- Reducción de 6.5 veces en el uso de CPU, como se muestra en el siguiente gráfico
Estos cambios reducen de forma masiva el costo de codificar el AVIF, en especial, las imágenes que se cargan con mayor frecuencia o las imágenes de mayor prioridad en tu sitio. A medida que la codificación acelerada por hardware de AV1 esté más disponible en los servidores y los servicios en la nube, el costo de crear imágenes de AVIF continuará disminuyendo.
Libavio
Libavif, la implementación de referencia de AVIF, es un mezclador y analizador de AVIF de código abierto que se usa en Chrome para decodificar imágenes AVIF. También se puede usar con libaom para crear imágenes AVIF a partir de imágenes sin comprimir existentes o para transcodificar imágenes web existentes (JPEG, PNG, etc.).
Recientemente, Libavif agregó compatibilidad con una gama más amplia de parámetros de configuración del codificador, incluida la integración con parámetros de configuración más avanzados del codificador de libaom. Las optimizaciones en la canalización de procesamiento, como la conversión rápida de YUV a RGB con libyuv y la compatibilidad alfa multiplicada previamente, aceleran aún más el proceso de decodificación. Por último, la compatibilidad con el modo de codificación integral integrado en libaom 3.1.0 brinda todas las mejoras de libaom mencionadas anteriormente.
Cómo codificar imágenes AVIF con avifenc
Una forma rápida de experimentar con AVIF es Squoosh.app. Squoosh ejecuta una versión de WebAssembly de libavif y expone muchas de las mismas funciones que las herramientas de línea de comandos. Es una forma sencilla de comparar AVIF con otros formatos antiguos y nuevos. También hay una versión de CLI de Squoosh diseñada para apps de Node.
Sin embargo, WebAssembly aún no tiene acceso a todas las primitivas de rendimiento de las CPU, por lo que, si deseas ejecutar libavif a su velocidad más rápida, te recomendamos el codificador de línea de comandos, avifenc.
Para comprender cómo codificar imágenes AVIF, presentaremos un instructivo con la misma imagen de origen de nuestro ejemplo anterior. Para comenzar, necesitarás lo siguiente:
También debes instalar los paquetes de desarrollo para zlib, libpng y libjpeg. Los comandos para las distribuciones de Debian y Ubuntu Linux son los siguientes:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
Cómo compilar el codificador de línea de comandos Avifenc
1. Obtén el código
Consulta una etiqueta de lanzamiento de libavif.
git clone -b v0.9.1 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 de AV1, libaom.
3. Obtén y crea Libaom
Cambia al directorio de dependencias externas de libavif.
cd ext
El siguiente comando extraerá el código fuente 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 -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
Compila avifenc.
make
Creaste avifenc correctamente.
Información sobre los parámetros de la línea de comandos avifenc
Avifenc usa la estructura de línea de comandos:
./avifenc [options] input.file output.avif
Los parámetros básicos para avifenc que se usan en este instructivo son los siguientes:
| Avifén | |
|---|---|
| --mín 0 | Establecer el cuantizador mínimo para el color en 0 |
| --máx. 63 | Establecer el cuantizador máximo para el color en 63 |
| --minalpha 0 | Establecer el cuantizador mínimo de alfa en 0 |
| --maxalpha 63 | Establecer el cuantizador máximo de alfa en 63 |
| -a end-usage=q | Establece el modo de control de tarifa en el modo Calidad constante (Q) |
| -a nivel de cq=Q | Establecer nivel de cuantización para color y alfa en Q |
| -un color:cq-level=Q | Establecer nivel de cuantización para el color en Q |
| -a alpha:cq-level=Q | Establecer nivel de cuantización alfa en Q |
| -a tune=ssim | Ajustar para SSIM (la opción predeterminada es sintonizar el PSNR) |
| --jobs J | Usa subprocesos de trabajador de J (valor predeterminado: 1) |
| --velocidad S | Establece la velocidad del codificador de 0 a 10 (el valor predeterminado es el más lento: 6). |
La opción de nivel de calidad establece el nivel de cuantización (0-63) para controlar la calidad del color o alfa.
Cómo crear 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 happy_dog.avif
Recomendamos la siguiente línea de comandos para codificar una imagen, por ejemplo, en el nivel de cuantización 18:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.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 imagen de AVIF.
Aceleración del codificador
Un parámetro que recomendamos cambiar en función de la cantidad de núcleos que tengas en la máquina es el parámetro --jobs.
Este parámetro establece cuántos subprocesos usará Avifenc para crear imágenes de AVIF.
Intenta ejecutarlo en la línea de comandos.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
Esto le indica a AVIF que use 8 subprocesos cuando cree la imagen de AVIF, lo que acelera la codificación de AVIF aproximadamente 5 veces.
Efectos en el Procesamiento de imagen con contenido más grande (LCP)
Las imágenes son un candidato común para la métrica Largest Contentful Paint (LCP). Una recomendación común para mejorar la velocidad de carga de las imágenes LCP es asegurarse de que una imagen esté optimizada. Cuando reduces el tamaño de transferencia de un recurso, mejoras su tiempo de carga de recursos, que es una de las cuatro fases clave que se deben abordar cuando se trata de candidatos de LCP que son imágenes.
Se recomienda usar una CDN de imagen para optimizar imágenes, ya que requiere mucho menos esfuerzo que configurar canalizaciones de optimización de imágenes en el proceso de compilación de tu sitio web o usar objetos binarios del codificador para optimizar las imágenes manualmente. Sin embargo, el costo de las CDN de imágenes puede ser costoso para algunos proyectos. Si este es tu caso, ten en cuenta lo siguiente cuando realices optimizaciones con el codificador avifenc:
- Familiarízate con las opciones que ofrece el codificador. Si experimentas con algunas de las funciones de codificación disponibles de AVIF, es posible que ahorres más recursos y conserves la calidad de imagen suficiente.
- AVIF proporciona codificación con y sin pérdida. Según el contenido de una imagen, un tipo de codificación puede tener un mejor rendimiento que otro. Por ejemplo, las fotografías que normalmente se proporcionan como JPEG probablemente tendrán un mejor rendimiento con la codificación con pérdida, mientras que la codificación sin pérdida es probablemente la mejor para las imágenes que contienen detalles simples o el arte lineal que normalmente se muestra como PNG.
- Si usas un agrupador compatible con la comunidad para imagemin, considera usar el paquete imagemin-avif para permitir que tu agrupador genere variantes de imágenes AVIF.
Si experimentas con AVIF, podrás obtener una mejora en los tiempos de LCP de tu sitio web en los casos en que el candidato de LCP sea una imagen. Para obtener más información sobre cómo optimizar el LCP, consulta la guía sobre cómo optimizar el LCP.
Conclusión
Con libaom, libavif y otras herramientas de código abierto, puedes obtener la mejor calidad de imagen y el mejor rendimiento para tu sitio web con AVIF. El formato aún es relativamente nuevo, y las optimizaciones y las integraciones de herramientas se están desarrollando de manera activa. Si tienes preguntas, comentarios o solicitudes de funciones, comunícate con la lista de distribución av1-discuss, la comunidad de AOM en GitHub y la wiki de AVIF.