Con frecuencia, escribimos sobre el exceso de sitios web a partir de imágenes, 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 eliminación del ancho de banda de los recursos más importantes. Una forma de solucionar este problema es usar la compresión moderna para reducir el tamaño de archivo de las imágenes, y una opción nueva para los desarrolladores web es el formato de imagen AVIF. En esta entrada de blog, se mencionan 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 de AVIF de manera eficiente.
AVIF es un formato de imagen basado en el códec de video AV1 y estandarizado por la Alliance for Open Media. AVIF ofrece mejoras de compresión significativas 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 ahorramos más del 50% en comparación con JPEG.
Además, AVIF agrega compatibilidad con códecs y contenedores para nuevas características de imagen, como alto rango dinámico y amplia gama de colores, síntesis de grano de película y decodificación progresiva.
Novedades
Desde que se lanzó la compatibilidad con AVIF en Chrome M85, la compatibilidad con AVIF en el ecosistema de código abierto ha mejorado en varios frentes.
Libaom
Libaom es un codificador y decodificador AV1 de código abierto que mantienen las empresas de la Alianza para Medios Abiertos y que se usa en muchos servicios de producción de Google y otras empresas miembros. Entre la versión 2.0.0 de libaom (alrededor de la misma vez que Chrome agregó compatibilidad con AVIF) y la versión 3.1.0 reciente, se agregaron importantes optimizaciones de codificación de imágenes a la base de código. Estos incluyen los siguientes:
- Optimizaciones para varios subprocesos y codificación en mosaico.
- Reducción del 500% en el uso de memoria
- Se redujo 6.5 veces el uso de CPU, como se muestra en el siguiente gráfico.
Estos cambios reducen de forma masiva el costo de codificación de AVIF, en especial, las imágenes que se cargan con mayor frecuencia o las de mayor prioridad en tu sitio. A medida que la codificación acelerada por hardware de AV1 esté más disponible en servidores y servicios en la nube, el costo de crear imágenes AVIF seguirá disminuyendo.
Libavif
Libavif, la implementación de referencia de AVIF, es un compilador y analizador de AVIF de código abierto que se usa en Chrome para decodificar imágenes de AVIF. También se puede usar con libaom para crear imágenes AVIF a partir de imágenes sin comprimir existentes o transcodificar imágenes web existentes (JPEG, PNG, etcétera).
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 libaom. Las optimizaciones en la canalización de procesamiento, como la conversión rápida de YUV a RGB mediante libyuv y la compatibilidad alfa premultiplicada, aceleran aún más el proceso de decodificación. Por último, la compatibilidad con el modo de codificación all intra recién agregado en libaom 3.1.0 incluye todas las mejoras de libaom mencionadas anteriormente.
Codificar imágenes AVIF con avifenc
Una forma rápida de experimentar con AVIF es Squoosh.app. Squoosh ejecuta una versión WebAssembly de libavif y expone muchas de las mismas funciones que las herramientas de línea de comandos. Es una manera fácil de comparar AVIF con otros formatos antiguos y nuevos. También hay una versión de la CLI de Squoosh destinada a las apps de Node.
Sin embargo, WebAssembly aún no tiene acceso a todas las primitivas de rendimiento de las CPU, por lo que, si quieres ejecutar libavif lo más rápido posible, 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 usada en nuestro ejemplo anterior. Para comenzar, necesitarás lo siguiente:
También deberás instalar los paquetes de desarrollo zlib, libpng y libjpeg. Los comandos para las distribuciones de Debian y Ubuntu de Linux son los siguientes:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
Compilando avifenc del codificador de línea de comandos
1. Cómo obtener el código
Revisa 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 la compilación. Puedes encontrar más información en libavif. Vamos a compilar avifenc para que esté vinculado de forma estática a la biblioteca de codificador y decodificador de AV1, libaom.
3. Obtén y compila libaom
Cambia al directorio de dependencias externas 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 -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
Crea avifenc.
make
Creaste avifenc con éxito.
Comprende los parámetros de la línea de comandos de avifenc
avifenc usa la estructura de la línea de comandos:
./avifenc [options] input.file output.avif
Los parámetros básicos de avifenc que se usan en este instructivo son los siguientes:
| avfenc | |
|---|---|
| --min 0 | Establecer cuantizador mínimo para el color en 0 |
| --máx. 63 | Establecer el cuantizador máximo del color en 63 |
| --minalpha 0 | Establecer cuantizador mínimo para alfa en 0 |
| --maxalpha 63 | Establecer cuantizador máximo para alfa en 63 |
| -a end-usage=q | Establecer el modo de control de tarifa en el modo Calidad constante (Q) |
| -a nivel de cq=Q | Establecer el nivel de cuantización para el color y alfa en Q |
| -a color:cq-level=Q | Establecer el nivel de cuantización del color en Q |
| -a alpha:cq-level=Q | Establecer el nivel de cuantización de alfa a Q |
| -una melodía=ssim | Ajustar por SSIM (la configuración predeterminada es ajustarlo a PSNR) |
| --trabajos J | Usa subprocesos de trabajador de J (predeterminado: 1). |
| --velocidad S | Establecer la velocidad del codificador de 0 a 10 (la velocidad más lenta a la predeterminada: 6) |
La opción a nivel de CC 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 ejecutar avifenc son la configuración de 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 la calidad como la velocidad.
Si quieres ver las opciones y obtener más información sobre ellas, ejecuta ./avifenc.
Ahora tienes tu propia imagen AVIF.
Aceleración del codificador
Un parámetro que puede ser conveniente cambiar según la cantidad de núcleos que tengas en tu máquina es el parámetro --jobs.
Este parámetro establece la cantidad de subprocesos que avifenc utilizará para crear imágenes 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 avifenc que use 8 subprocesos cuando cree la imagen AVIF, lo que acelera la codificación AVIF casi 5 veces.
Efectos en el procesamiento de imagen con contenido más grande (LCP)
Las imágenes son una candidata común para la métrica de Procesamiento de imagen con contenido más grande (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. Si reduces el tamaño de transferencia de un recurso, mejorarás el tiempo de carga de los recursos, que es una de las cuatro fases clave que debes tener como objetivo cuando se trata de candidatos de LCP que son imágenes.
Se recomienda usar una CDN de imágenes cuando optimices imágenes, ya que esto 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 de forma manual los objetos binarios del codificador para optimizar las imágenes manualmente. Sin embargo, el costo de las CDN de imágenes puede ser prohibido en algunos proyectos. Si este es tu caso, ten en cuenta lo siguiente cuando optimices con el codificador de avifenc:
- Familiarízate con las opciones que ofrece el codificador. Puedes experimentar con algunas de las funciones de codificación disponibles de AVIF para lograr ahorros adicionales sin perder la calidad de imagen suficiente.
- AVIF proporciona codificación con y sin pérdidas. 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 muestran como archivos JPEG probablemente tendrán un mejor rendimiento con la codificación con pérdidas, mientras que la codificación sin pérdidas probablemente sea mejor para imágenes que contienen detalles simples o arte lineal que normalmente se muestran como PNG.
- Si usas un agrupador compatible con la comunidad para imagemin, considera usar el paquete imagemin-avif a fin de permitir que tu agrupador genere variantes de imagen AVIF.
Si experimentas con AVIF, puedes lograr una mejora en los tiempos de LCP de tu sitio web en los casos en que el candidato para LCP sea una imagen. Para obtener más información sobre la optimización del LCP, consulta la guía para optimizar el LCP.
Conclusión
Con libaom, libavif y otras herramientas de código abierto, puedes obtener la mejor calidad y rendimiento de imagen para tu sitio web con AVIF. El formato aún es relativamente nuevo, y se están desarrollando de forma activa integraciones de herramientas y optimizaciones. Si tienes preguntas, comentarios o solicitudes de funciones, comunícate con la lista de distribución de av1-discuss, la comunidad de AOM en GitHub y la wiki de AVIF.