Uso de formatos de imagen modernos: AVIF y WebP

Recientemente hemos publicado el libro de optimización de imágenes de Addy con todo lo que necesita saber sobre imágenes , cómo comprimir, servir y mantener imágenes. Ahora, envío con un mensaje personal escrito a mano, firmado por Addy. Salta a la tabla de contenido y obtén el libro de inmediato.

Las imágenes son el tipo de recurso más popular en la web y suelen ser los más grandes. Los usuarios aprecian las imágenes de alta calidad, pero se debe tener cuidado para entregar esas imágenes de héroes, fotos de productos y memes de gatos de la manera más eficiente y efectiva posible.

Si está optimizando para Web Vitals, es posible que le interese saber que las imágenes representan aproximadamente el 42 % del elemento de pintura con contenido más grande para sitios web. Las métricas clave centradas en el usuario a menudo dependen del tamaño, el número, el diseño y la prioridad de carga de las imágenes en la página. Esta es la razón por la que gran parte de nuestra orientación sobre el rendimiento habla de la optimización de la imagen.

Un tl; dr de recomendaciones se puede encontrar a continuación.

tl; dr

• AVIF es una primera opción sólida si la compresión de baja fidelidad con pérdidas es aceptable y ahorrar ancho de banda es la prioridad número uno. Suponiendo que las velocidades de codificación/decodificación satisfagan sus necesidades.
• WebP es más compatible y se puede usar para renderizar imágenes regulares donde no se requieren funciones avanzadas como una amplia gama de colores o superposiciones de texto.
• Es posible que AVIF no pueda comprimir imágenes no fotográficas, así como PNG o WebP sin pérdidas. El ahorro de compresión de WebP puede ser inferior al de JPEG para la compresión con pérdida de alta fidelidad.
• Si tanto AVIF como WebP no son opciones viables, considere evaluar MozJPEG (optimizar imágenes JPEG), OxiPNG (imágenes no fotográficas) o JPEG 2000 (imágenes fotográficas con pérdida o sin pérdida).
• La mejora progresiva a través <picture> permite que el navegador elija el primer formato admitido en el orden de preferencia. Esta implementación se simplifica considerablemente cuando se utilizan CDN de imagen donde el encabezado de aceptación y la negociación de contenido (por ejemplo, formato y calidad automáticos) pueden ofrecer la mejor imagen.

¿Por qué necesitamos formatos modernos?

Tenemos una selección razonablemente amplia de formatos de imagen para elegir al renderizar imágenes en la web. La diferencia esencial entre los formatos de imagen es que el códec de imagen utilizado para codificar o decodificar cada tipo de imagen es diferente. Un códec de imagen representa el algoritmo utilizado para comprimir y codificar imágenes en un tipo de archivo específico y decodificarlas para mostrarlas en la pantalla.

Evaluación de códecs

Puede evaluar qué formato de imagen es adecuado para usted en función de diferentes parámetros.

• Compresión
  La eficiencia de un códec se puede medir principalmente por la cantidad de compresión que puede lograr. La compresión lograda es relevante porque cuanto mayor sea la compresión, menor será el tamaño del archivo y menor será la cantidad de datos necesarios para transferir la imagen en la red. El tamaño de archivo más pequeño afecta directamente la métrica de pintura con contenido más grande (LCP) para la página, ya que los recursos de imagen que necesita la página se cargan más rápido.
• Calidad
  Idealmente, la compresión no debería resultar en ninguna pérdida de datos de imagen; debe ser sin pérdidas. Los formatos de compresión que resultan en alguna pérdida de datos de imagen, reduciendo así la calidad de la imagen, se conocen como con pérdida. Puede usar herramientas como DSSIM o ssimulacra para medir la similitud estructural entre las imágenes y juzgar si la pérdida de calidad es aceptable.
• Velocidad de codificación/decodificación
  Los algoritmos de compresión complejos pueden requerir una mayor potencia de procesamiento para codificar/decodificar imágenes. Esto puede complicarse si la codificación se realiza con anticipación (estática/compilación) o sobre la marcha (bajo demanda). Si bien la codificación puede ser una sola vez en el caso de imágenes estáticas, el navegador todavía tiene que decodificar las imágenes antes de representarlas. Un proceso de decodificación complejo puede ralentizar la reproducción de imágenes.

El grado de compresión, la calidad de la imagen y la velocidad de decodificación son factores clave a tener en cuenta al comparar el rendimiento de la imagen para la web. Los casos de uso específicos pueden requerir formatos de imagen que admitan otras características como:

• Soporte de software: un formato de imagen puede funcionar muy bien, pero es inútil si los navegadores, CDN y otras herramientas de manipulación de imágenes no lo reconocen.
• Es posible que se requiera soporte de animación para algunas imágenes en la web (p. ej., GIF). Sin embargo, lo ideal es reemplazar esas imágenes con videos.
• Transparencia alfa: la capacidad de crear imágenes con diferentes niveles de opacidad utilizando el canal alfa. (por ejemplo, imágenes PNG con fondos transparentes)
• Debe admitir imágenes de alto rango dinámico (HDR) y una amplia gama de colores.
• La decodificación progresiva para cargar imágenes gradualmente permite a los usuarios obtener una vista previa razonable de la imagen antes de que se refine.
• Mapas de profundidad que te permitirán aplicar efectos al primer plano o al fondo de la imagen.
• Imágenes con varias capas superpuestas, por ejemplo, superposiciones de texto, bordes, etc.

Sugerencia: al evaluar la calidad, la compresión y el ajuste fino de los formatos modernos, la capacidad de Squoosh.app para realizar una comparación visual en paralelo es útil. Acercarse le permite apreciar mejor dónde un formato exhibe bloques o artefactos en los bordes para razonar acerca de las compensaciones.

La vieja guardia: JPEG y PNG

JPEG ha sido el formato de imagen más admitido durante 25 años. Los codificadores JPEG clásicos conducen a una compresión relativamente débil, mientras que los esfuerzos de codificación JPEG más modernos (como MozJPEG) mejoran la compresión pero no son tan óptimos como los formatos modernos. JPEG también es un formato de compresión con pérdida. Si bien la velocidad de decodificación de archivos JPEG es excelente, carece de otras características deseables requeridas para las imágenes en sitios web modernos y llamativos. No admite transparencia en imágenes, animaciones, mapas de profundidad o superposiciones.

JPEG funciona mejor con fotografías, mientras que PNG es su equivalente para otras imágenes fijas. PNG es un formato sin pérdidas y puede admitir transparencia alfa, pero la compresión lograda, especialmente para fotografías, es considerablemente baja. JPEG y PNG se utilizan ampliamente según el tipo de imagen requerida.

El objetivo de los formatos de imagen modernos es, por lo tanto, superar las limitaciones de JPEG y PNG al ofrecer una mejor compresión y flexibilidad para admitir las otras características discutidas anteriormente. Con estos antecedentes, veamos lo que AVIF y WebP tienen para ofrecer.

AVIF

El formato de archivo de imagen AV1 (AVIF) es un formato de imagen de código abierto para almacenar imágenes fijas y animadas. Fue lanzado en febrero de 2019 por Alliance for Open Media (AOMedia). AVIF es la versión de imagen del popular formato de video AV1. El objetivo era desarrollar un nuevo formato de codificación de video de código abierto que fuera de última generación y libre de regalías.

Beneficios AVIF

AVIF admite una compresión con pérdida y sin pérdida muy eficiente para producir imágenes de alta calidad después de la compresión. AVIF comprime mucho mejor que los formatos más populares en la web hoy en día (JPEG, WebP, JPEG 2000, etc.). Las imágenes pueden ser hasta diez veces más pequeñas que los archivos JPEG de calidad visual similar. Algunas pruebas han demostrado que AVIF ofrece un ahorro del 50% en el tamaño del archivo en comparación con JPEG con una calidad de percepción similar . Tenga en cuenta que puede haber casos en los que WebP sin pérdida sea mejor que AVIF sin pérdida, así que asegúrese de evaluarlo manualmente.

Aquí, puede ver una comparación de tamaño entre una imagen JPEG y su correspondiente imagen AVIF (con pérdida) convertida usando la aplicación Squoosh:

Además de una compresión superior, AVIF también ofrece las siguientes funciones:

• AVIF admite animaciones, fotos en vivo y más a través de imágenes multicapa almacenadas en secuencias de imágenes.
• Ofrece un mejor soporte para elementos gráficos, logotipos e infografías, donde JPEG tiene limitaciones.
• Proporciona una mejor compresión sin pérdidas que JPEG.
• Admite doce bits de profundidad de color que permiten imágenes de alto rango dinámico (HDR) y amplia gama de colores (WCG) con una mejor gama de tonos brillantes y oscuros y una gama más amplia de luminosidad.
• Incluye soporte para imágenes monocromáticas e imágenes multicanal, incluidas imágenes transparentes que utilizan el canal alfa.

Comparación de formatos

Para comprender mejor las diferencias de calidad y compresión que ofrecen los distintos formatos, podemos comparar visualmente las imágenes y evaluar las diferencias.

Evaluación de la calidad y la compresión

Comenzaremos nuestra evaluación de calidad de JPEG, WebP y AVIF utilizando la configuración de salida de alta calidad predeterminada de Squoosh para cada formato, intencionalmente sin ajustar para imitar la experiencia de un nuevo usuario con ellos. Como recordatorio, debe tratar de evaluar la configuración de calidad y los formatos que mejor se adapten a sus necesidades. Si tiene poco tiempo, las CDN de imágenes automatizan parte de esto.

En esta primera prueba, la codificación de una foto de 560 KB de una puesta de sol (con muchas texturas) produce una imagen que es visual y perceptivamente bastante similar para cada una. La salida llega a 289 KB (JPEG@q75), 206 KB (WebP@q75) y 101 KB (AVIF@q30), hasta un 81 % de ahorro en compresión.

Gran cosa, pero profundicemos más.

Existen varias herramientas para comparar la disimilitud entre diferentes formatos de imagen (por ejemplo, DSSIM, simulacros). Con estas herramientas, puede aproximarse a la configuración de calidad comparable al evaluar, por ejemplo, JPEG a WebP o WebP a AVIF. A continuación, se encuentran las mismas imágenes codificadas con una calidad comparable, apuntando a la calidad del 70 % de JPEG. La salida es de 323 KB (JPEG), 214 KB (WebP@q75) y 117 KB (AVIF@60); los tamaños son un poco más grandes que confiar en los valores predeterminados, pero las ganancias de compresión siguen siendo significativas.

También podemos buscar una calidad más baja en cada formato, que es realmente donde brillan WebP y AVIF. Aquí está JPEG@q10 (35 KB), WebP@q1 (35 KB), AVIF@q17 (36 KB): WebP tiene significativamente menos artefactos en bloques en comparación con JPEG, mientras que AVIF tiene menos bloques y es más nítido en los detalles clave de la imagen. .

Nota: Esta puesta de sol es una imagen de mayor resolución ( 2400 × 1595 ), y en pantallas de 2×, la calidad podría ser mucho menor y seguir pareciendo nítida dependiendo de cómo interactúan los usuarios con la imagen (p. ej., cuánto pellizcan y hacen zoom).

Para ver un ejemplo más extremo de las diferencias entre JPEG y AVIF, podemos ver un ejemplo del conjunto de datos de Kodak (evaluado por Netflix) que compara un JPEG (4:4:4) a 20 KB con un AVIF (4:4:4) en 19.8KB. Observe cómo el JPEG tiene artefactos en bloques visibles en el cielo y el techo. El AVIF es visiblemente mejor y contiene menos artefactos de bloqueo. Sin embargo, hay un nivel de pérdida de textura en el techo y algo de borrosidad. Todavía es bastante impresionante, dado que el factor de compresión general es 59x.

A continuación, evaluaremos la calidad de una imagen de playa con muchos detalles finos, texturas y áreas de bajo contraste en las nubes. Compararemos el original (a 482 KB) con lo que JPEG, WebP y AVIF pueden producir con un límite de tamaño de archivo de 45 KB (sin ajustes avanzados), usando Squoosh; esto funciona en JPEG (MozJPEG) al 50 % de calidad, WebP al 54 % y AVIF al 36 %.

El JPEG tiene artefactos en bloque y bandas de color visibles en las nubes y el agua, mientras que WebP y AVIF tienen notablemente menos de este bloque observable. En mi opinión, AVIF ofrece la experiencia general más fluida de las tres.

Hablando de texturas, también podemos realizar una evaluación similar de menor calidad en un póster de Netflix para "The Witcher" (con un objetivo de 36 KB). Observe el bloque en las nubes para el JPEG y algo de borrosidad alrededor del texto rojo para WebP (que solo admite submuestreo de croma 4:2:0 sin soluciones alternativas). El AVIF se ve mejor, seguido por el WebP.

Finalmente, veamos una foto con muchos más elementos de texto que las imágenes anteriores: un póster. Cuando bajamos a calidades más bajas y apuntamos a un tamaño razonablemente pequeño (25 KB), podemos observar que el JPEG tiene fuertes bandas de color y halos alrededor del texto. Hay artefactos de bloques claros alrededor de los bordes. El WebP evita una cantidad de bloqueos y se ve cada vez mejor. AVIF conserva los bordes nítidos un poco mejor que JPEG o WebP, lo que produce una imagen uniforme.

Hay disponibles comparaciones adicionales de formato y calidad para fotografías e ilustraciones.

Herramientas y soporte AVIF

Desde su lanzamiento en 2019, el soporte para AVIF ha aumentado considerablemente. Si bien antes no había un método directo para crear o ver archivos AVIF, ahora puede hacerlo fácilmente con las utilidades de código abierto disponibles.

Imágenes AVIF en el navegador

AVIF se introdujo en la versión de escritorio de Chrome en agosto de 2020 con Chrome 85. También es compatible con Chrome para Android, Opera y Firefox para escritorio y Opera para Android.

Para incluir una imagen AVIF en su página, puede agregarla como un elemento de imagen. Sin embargo, los navegadores que no son compatibles con AVIF no pueden mostrar esta imagen.

 <img src="/images/sky.avif" width="360" height="240" alt="a beautiful sky">

Una solución para garantizar que al menos un formato de imagen compatible se entregue a todos los navegadores es aplicar AVIF como una mejora progresiva . Hay dos maneras de hacer esto.

Mejora progresiva

1. Uso del elemento <picture>
   Como <picture> permite a los navegadores omitir imágenes que no reconocen, puede incluir imágenes en su orden de preferencia. El navegador selecciona el primero que admite.

 <picture> <source type="image/avif"> <source type="image/webp"> <img src="img/photo.jpg" alt="Description" width="360" height="240"> </picture>

1. Uso de la negociación de contenido
   La negociación de contenido permite que el servidor sirva diferentes formatos de recursos en función de lo que admita el navegador. Los navegadores que admiten un formato específico pueden anunciarlo agregando el formato a su encabezado de solicitud de aceptación. Por ejemplo, el encabezado de solicitud de aceptación para imágenes en Chrome es:
   Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
   El código para verificar si AVIF es compatible con el controlador de eventos de búsqueda puede verse así:
   const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image\/avif/.test(hdrAccept);
   Puede usar este valor para servir AVIF o cualquier otro formato predeterminado al cliente.

Crear el marcado para la mejora progresiva puede ser desalentador. Image CDN ofrece la opción de servir automáticamente el mejor formato adecuado para el cliente. Sin embargo, si no está utilizando una imagen CDN, puede considerar usar una herramienta como just-gimme-an-img. Esta herramienta puede generar el marcado para el elemento de imagen para una imagen dada con diferentes formatos y anchos. También crea las imágenes correspondientes al marcado usando Squoosh completamente del lado del cliente. Nota: la codificación de múltiples formatos puede llevar un tiempo, por lo que es posible que desee tomar un café mientras espera.

Nota: los CDN de imágenes se mencionan varias veces en este artículo. Los servidores CDN suelen estar ubicados más cerca de los usuarios que los servidores de origen y pueden tener tiempos de ida y vuelta (RTT) más cortos, lo que mejora la latencia de la red. Dicho esto, servir desde un origen diferente puede agregar viajes de ida y vuelta e impactar en las ganancias de rendimiento. Esto puede estar bien si la CDN sirve otro contenido del sitio, pero en caso de duda, experimente y mida.

Codificar y decodificar archivos AVIF

Varios proyectos de código abierto proporcionan diferentes métodos para codificar/decodificar archivos AVIF:

• bibliotecas
  Libaom es el codificador y decodificador de código abierto mantenido por AOMedia, los creadores de AVIF. La biblioteca se actualiza continuamente con nuevas optimizaciones que tienen como objetivo reducir el costo de codificación de AVIF, especialmente para imágenes cargadas con frecuencia o de alta prioridad. Libavif es un muxer y analizador de código abierto para AVIF que se utiliza en Chrome para decodificar imágenes AVIF. Puede usar libavif con libaom para crear archivos AVIF a partir de imágenes originales sin comprimir o transcodificarlos desde otros formatos. También está Libheif, un popular codificador/descodificador AVIF/HEIF y Cavif. Gracias a Ben Morss, libgd es compatible con AVIF y también llegará a PHP en noviembre.
• Aplicaciones web y aplicaciones de escritorio
  Squoosh, una aplicación web que le permite usar diferentes compresores de imágenes, también es compatible con AVIF, lo que hace que sea relativamente sencillo convertir y crear archivos .avif en línea. En el escritorio, GIMP admite la exportación de AVIF. ImageMagick y Paint.net también son compatibles con AVIF, mientras que los complementos de la comunidad de Photoshop para AVIF también están disponibles.
• Bibliotecas JavaScript
  
  • AVIF.js es un polyfill AVIF para navegadores que aún no son compatibles con AVIF. Utiliza la API de Service Worker para interceptar el evento de búsqueda y decodificar archivos AVIF.
  • Avif.io es otra utilidad web que puede convertir archivos de diferentes tipos de imágenes a AVIF en el lado del cliente. Llama al código Rust en el navegador usando un WebWorker. La biblioteca del convertidor se compila en WASM mediante wasm-pack.
  • Sharp es un módulo de Node.js que puede convertir imágenes grandes en formatos estándar en imágenes más pequeñas aptas para la web, incluidas imágenes AVIF.
• Utilidades
  Las utilidades de conversión o transformación de imágenes admiten el formato AVIF. Puede usar MP4Box para crear y decodificar archivos AVIF.
• En codigo
  go-avif implementa un codificador AVIF para Go usando libaom . Viene con una utilidad llamada avif que puede codificar archivos JPEG o PNG a AVIF.

Cualquier persona interesada en aprender cómo crear imágenes AVIF usando Squoosh o construir el codificador de línea de comandos avifenc puede hacerlo en el laboratorio de código para servir archivos AVIF.

AVIF y rendimiento

AVIF puede reducir el tamaño de archivo de las imágenes debido a una mejor compresión. Como resultado, los archivos AVIF se descargan más rápido y consumen menos ancho de banda. Esto puede mejorar potencialmente el rendimiento al reducir el tiempo de carga de imágenes.

La auditoría de mejores prácticas de Lighthouse ahora considera que la compresión de imágenes AVIF puede traer mejoras significativas. Recopila todas las imágenes BMP, JPEG y PNG de la página, las convierte a WebP y estima el tamaño del archivo AVIF. Esta estimación ayuda a Lighthouse a informar los ahorros potenciales en la sección "Servir imágenes en formatos de próxima generación".

Tim Vereecke informó un ahorro de bytes del 25 % y un impacto positivo en LCP (en comparación con JPEG) después de convertir 14 millones de imágenes en el sitio web a AVIF medido con Real User Monitoring (RUM).

Problemas de AVIF

El mayor inconveniente de AVIF en la actualidad es que carece de soporte uniforme en todos los navegadores. La introducción de AVIF como una mejora progresiva ayuda a superar esto. Algunos otros aspectos en los que AVIF no cumple con los estándares ideales para un formato de archivo moderno.

• Las versiones modernas de Chrome (Chrome 94+) admiten el renderizado progresivo AVIF, mientras que las versiones anteriores no. Si bien en el momento de escribir este artículo no hay un codificador que pueda crear estas imágenes fácilmente, existe la esperanza de que esto cambie.
• Las imágenes AVIF tardan más en codificarse y crearse. Esto podría ser un problema para los sitios que crean archivos de imágenes de forma dinámica. Sin embargo, el equipo de AVIF está trabajando para mejorar las velocidades de codificación. Los colaboradores de AVIF en Google también han informado de algunas mejoras de rendimiento agradables. Desde el 1 de enero de 2021, la codificación AVIF tuvo una mejora de ~47 % en el tiempo de transcodificación (esta es la velocidad 6, el valor predeterminado actual para libavif) y, a lo largo del año calendario, una mejora del 73 %. Desde julio, también ha habido una mejora del 72 % en los tiempos de transcodificación a velocidad 9 (codificación sobre la marcha).

• La decodificación de imágenes AVIF para su visualización también puede consumir más potencia de la CPU que otros códecs, aunque los tamaños de archivo más pequeños pueden compensar esto.
• Algunas CDN aún no admiten AVIF de forma predeterminada para sus modos de formato automático porque aún puede ser más lento generar en la primera solicitud.

WebP

Hemos mencionado WebP varias veces, pero cubramos brevemente su historia. Google creó el formato WebP en 2011 como un formato de imagen que ayudaría a hacer la web más rápida. A lo largo de los años, ha sido aceptado y adoptado ampliamente debido a su capacidad para comprimir imágenes a tamaños de archivo más bajos en comparación con JPEG y PNG. WebP ofrece compresión con pérdida y sin pérdida con una calidad visual aceptable y admite animación y transparencia de canal alfa.

La compresión WebP con pérdida se basa en el códec de video VP8 y utiliza codificación predictiva para codificar una imagen. Utiliza valores en los bloques de píxeles vecinos para predecir el valor en un bloque y codifica solo la diferencia. Las imágenes WebP sin pérdidas se generan aplicando múltiples técnicas de transformación a las imágenes para comprimirlas.

Beneficios WebP

Las imágenes sin pérdida de WebP son generalmente un 26 % más pequeñas que PNG, y las imágenes con pérdida de WebP son entre un 25 y un 34 % más pequeñas que las imágenes JPEG de calidad similar. El soporte de animación los convierte también en un excelente reemplazo para las imágenes GIF. A continuación se muestra una imagen PNG transparente a la izquierda y la imagen WebP correspondiente a la derecha generada por la aplicación Squoosh con una reducción de tamaño del 26 %.

Además, WebP ofrece otros beneficios como:

• Transparencia
  WebP tiene un canal de transparencia de 8 bits sin pérdidas con solo un 22 % más de bytes que PNG. También es compatible con la transparencia RGB con pérdida, que es una característica exclusiva de WebP.
• metadatos
  El formato de archivo WebP admite metadatos de fotos EXIF ​​y metadatos de documentos digitales de la plataforma de metadatos extensible (XMP). También puede contener un perfil de color ICC.
• Animación
  WebP admite imágenes animadas en color verdadero.

Nota: En el caso de imágenes transparentes similares a vectores como las anteriores, un SVG optimizado puede, en última instancia, ofrecer un archivo más nítido y pequeño en comparación con un formato de trama.

Herramientas y soporte WebP

A lo largo de los años, otros ecosistemas además de Google han adoptado WebP y hay muchas herramientas disponibles para crear, ver y cargar archivos WebP.

Servir y ver archivos WebP

WebP es compatible con las últimas versiones de casi todos los principales navegadores actuales.

Si los desarrolladores desean servir WebP en otros navegadores en el futuro, pueden hacerlo utilizando el elemento <picture> o solicitar encabezados como se muestra en la sección sobre AVIF.

Las redes de entrega de contenido de imagen (CDN) también admiten imágenes receptivas con selección automática de formato para imágenes en WebP o AVIF, según la compatibilidad del navegador. Los complementos de WebP están disponibles para otras pilas populares como WordPress, Joomla, Drupal, etc. El soporte inicial para WebP también está disponible en el núcleo de WordPress, comenzando con WordPress 5.8.

Puede ver imágenes WebP fácilmente abriéndolas en un navegador que las admita. Además, también puede obtener una vista previa de ellos en Windows y macOS usando un complemento. La instalación del complemento Quick Look para WebP ( qlImageSize ) le permitiría obtener una vista previa de los archivos WebP utilizando la utilidad Quick Look. El equipo de WebP ha publicado bibliotecas y utilidades precompiladas para el códec WebP para Windows, macOS y Linux. El uso de estos en Windows le permite obtener una vista previa de las imágenes WebP en el Explorador de archivos o en el Visor de fotos de Windows.

Convertir imágenes a WebP

Además de las bibliotecas proporcionadas por el equipo de WebP, varias herramientas de edición de imágenes comerciales, de código abierto y gratuitas son compatibles con WebP.

Utilidades:
Al igual que AVIF, Squoosh también puede convertir archivos a WebP en línea, como se muestra en la sección anterior. XnConvert es una utilidad que puede instalar en el escritorio para convertir diferentes formatos de imagen, incluido WebP. XnConvert también puede ayudar con la eliminación y edición de metadatos, recorte y cambio de tamaño, brillo y contraste, personalización de la profundidad del color, desenfoque y nitidez, máscaras y marcas de agua, y otras transformaciones.

Módulos de Node.js:
Imagemin es un popular módulo de minificación de imágenes con un complemento para convertir imágenes a WebP (imagemin-webp). El complemento es compatible con los modos WebP con pérdida y sin pérdida.

Otros:
Varias aplicaciones para la conversión y manipulación de imágenes admiten el formato WebP. Estos incluyen Sketch, GIMP, ImageMagick, etc. También está disponible un complemento de Photoshop para WebP.

Uso de producción de WebP

Debido a sus beneficios de compresión sobre JPEG y PNG, muchas grandes empresas usan WebP en producción para reducir costos y disminuir los tiempos de carga de la página web. Google informa de un ahorro del 30 al 35 % con WebP en comparación con otros esquemas de compresión con pérdida, y atiende 43 000 millones de solicitudes de imágenes al día, el 26 % de las cuales son compresión sin pérdida.

Para llegar a su gran base de usuarios en los mercados emergentes donde los datos son caros, Facebook comenzó a ofrecer imágenes WebP a los usuarios de Android. Observaron, "ahorros de datos de 25 a 35 por ciento en comparación con JPG, y 80 por ciento en comparación con PNG".

Problemas de WebP

En sus inicios, una desventaja sustancial de WebP era la falta de compatibilidad con el navegador y las herramientas. Todavía hay pocas ventajas y desventajas con WebP cuando se consideran todas las funciones que idealmente debería admitir un formato moderno.

• WebP está limitado a una precisión de color de 8 bits. Como resultado, no puede admitir imágenes de gama amplia/HDR.
• WebP no admite imágenes con pérdida sin submuestreo de croma. Lossy WebP funciona exclusivamente con un YCbCr 4:2:0 de 8 bits, mientras que lossless WebP funciona con el formato RGBA. Esto puede afectar imágenes con detalles finos, texturas cromáticas o texto en color. Vea a continuación un ejemplo.
• No es compatible con la decodificación progresiva, sin embargo, admite la decodificación incremental. Esto puede compensar algo por eso, pero el efecto en el renderizado puede ser diferente.

Idealmente, debe generar archivos WebP a partir de los archivos fuente de mejor calidad disponibles. La conversión de archivos JPEG deficientes a WebP no es muy eficiente, ya que se pierde dos veces la calidad.

Resumen

Resumiendo toda la información sobre los cuatro formatos JPEG, PNG, AVIF y WebP y comparando y cuantificando las fortalezas y debilidades como se presentó en la sección anterior, hemos elaborado la siguiente tabla.

Nota: La cantidad de estrellas se basa en una opinión general y puede diferir para casos de uso específicos.

Los siguientes son algunos de los puntos clave que se deben considerar al referirse a esta tabla.

• La compresión de imágenes fotográficas y no fotográficas puede diferir aún más según la fidelidad (calidad) de las imágenes. Hemos indicado una puntuación general aquí.
• Debe elegir la configuración de submuestreo de calidad y croma en función del propósito de las imágenes. Las imágenes de fidelidad baja a media pueden ser aceptables en la mayoría de los escenarios en la web, por ejemplo, para noticias, redes sociales y comercio electrónico. Los sitios web de archivo de imágenes, películas o fotografía requieren imágenes de alta fidelidad. Debe probar los ahorros reales debido a la compresión de alta fidelidad antes de convertir a otro formato.
• La falta de soporte y velocidad de decodificación progresiva puede ser un problema para codificar/decodificar archivos AVIF. Para sitios web con imágenes de tamaño promedio, el ahorro de bytes debido a la compresión puede compensar la velocidad y la ausencia de decodificación progresiva a medida que las imágenes se descargan rápidamente.
• Al comparar la compresión que ofrecen los formatos de imagen, compare los tamaños de archivo en el mismo DSSIM.
• La configuración de calidad utilizada al codificar no necesita ser la misma para diferentes formatos para producir la misma calidad de imágenes. Un JPEG codificado con una configuración de calidad de 60 puede ser similar a un AVIF con una configuración de calidad de 50 y un WebP con una configuración de calidad de 65, como se sugiere en esta publicación.
• Todavía se requieren estudios extensos para medir el impacto real en LCP al comparar formatos.
• No hemos incluido otros formatos como JPEG XL y HEIC en esta comparación. JPEG XL todavía se encuentra en una etapa relativamente incipiente, y solo los dispositivos Apple admiten HEIC (mientras que Safari no). Las regalías y las tarifas de licencia complican aún más el apoyo a HEIC.

AVIF marca la mayoría de las casillas en general, y WebP tiene un mejor soporte y ofrece una mejor compresión en comparación con JPEG o PNG. Como tal, sin duda debería considerar la compatibilidad con WebP al optimizar imágenes en su sitio web. Evaluar AVIF si cumple con sus requisitos e introducirlo como una mejora progresiva podría proporcionar valor a medida que el formato se adopte en diferentes navegadores y plataformas. Con herramientas de comparación de calidad y mejorando las velocidades de codificación, el uso de AVIF finalmente sería más fácil.

Agradecemos a Leena Sohoni-Kasture por su gran contribución a este artículo, así como a Patrick Meenan, Frank Galligan y Yoav Weiss por sus reseñas.

Una nota aplastante

A principios de este año, publicamos un nuevo libro con Addy sobre todo lo que necesita saber para optimizar la forma en que comprime, sirve y mantiene imágenes, aumentando el rendimiento en el camino. Estamos enviando los libros gratis a todo el mundo , y si obtienes el libro ahora, también recibirás una postal escrita a mano por Addy con un mensaje personal.

• Saltar a los detalles ↓
• Descargue una muestra gratuita en PDF (12 MB)
• Envío gratuito por correo aéreo mundial para libros impresos.
• Obtenga el libro de inmediato.