WebP vs AVIF: Codificación, Compresión y Compatibilidad con Navegadores

WebP usa codificación intra VP8, que se basa en codificación de residuos predictivos. Divide las imágenes en bloques de luma de 16x16 y bloques de croma correspondientes, solo proporciona 4 modos de predicción intra, tiene un proceso de codificación relativamente simple y una complejidad computacional menor.

AVIF usa codificación intra AV1, admite partición de bloques de tamaño variable de 4x4 a 64x64, proporciona hasta 56 direcciones de predicción intra y agrega nuevos modos como predicción angular y predicción direccional, que pueden ajustarse con mayor precisión a los detalles de textura local de las imágenes.

La codificación intra VP8 no usa optimización de filtrado en bucle. La codificación intra AV1 agrega filtrado desbloqueante en bucle y reducción de ruido, lo que puede reducir los artefactos de bloqueo y la distorsión de contorno causados por la compresión, lo que da como resultado una calidad de imagen subjetiva más suave a la misma tasa de bits.

Los datos medidos públicos de proveedores de CDN nacionales muestran que, con la misma calidad de imagen subjetiva, los tamaños de archivo de AVIF son entre un 15% y un 30% más pequeños que los de WebP. La mejora de la relación de compresión para imágenes fotográficas naturales es mayor que para imágenes vectoriales y gráficas.

Los tamaños de archivo de WebP son entre un 25% y un 35% más pequeños que los JPEG tradicionales. AVIF tiene una ventaja de relación de compresión más obvia en escenarios de fotografía de alta definición e imágenes de gran tamaño. En escenarios de vista previa de baja calidad, la diferencia de relación de compresión entre los dos se reduce a menos del 10%.

En los resultados de pruebas públicas actuales, no se ha registrado ningún caso en que AVIF tenga un tamaño de archivo mayor que WebP con la misma calidad de imagen. Solo en imágenes gráficas donde los bloques de color sólido representan más del 80% del área, la diferencia de relación de compresión entre los dos es menor al 5%.

Ambos formatos admiten canales alfa y animación, pero existen diferencias en la implementación detallada. WebP admite transparencia alfa de 8 bits, mientras que AV1 admite transparencia alfa de 10 bits y 12 bits, lo que da como resultado gradientes de transparencia más suaves.

En cuanto al soporte de HDR, WebP solo admite el almacenamiento básico de HDR estático, y la adaptación completa de decodificación PQ y HLG no se ha implementado de forma generalizada. AVIF admite de forma nativa profundidad de color de 10 bits, HDR10 y gama de colores amplia, y está adaptado a los dispositivos de visualización de gama amplia actuales.

En cuanto al soporte de animación, WebP tiene una complejidad de codificación de un solo fotograma menor, y el uso de recursos de decodificación durante la reproducción es menor que para la animación AVIF. La animación AVIF tiene un tamaño de archivo aproximadamente un 20% más pequeño que la animación WebP con la misma calidad de imagen.

A partir de 2024, la cobertura de soporte global de navegadores para WebP supera el 96%, y la mayoría de las versiones de navegadores principales pueden analizar y mostrar imágenes WebP de forma normal.

La cobertura de soporte de navegadores para AVIF es de aproximadamente 84%, menor que la de WebP. Las imágenes AVIF no se pueden mostrar de forma normal en dispositivos antiguos de macOS e iOS que ejecuten versiones de Safari inferiores a 16.4.

Para escenarios de imágenes grandes de productos de comercio electrónico y banners de marketing, priorice AVIF con una solución alternativa de WebP. Esto reduce los costos de almacenamiento y ancho de banda al mismo tiempo que cubre a los usuarios de navegadores más antiguos, y garantiza el control de costos en escenarios de alto tráfico.

Para escenarios de miniaturas de listas de productos e iconos de páginas de detalles de productos, WebP es suficiente para cumplir los requisitos. En este escenario, los tamaños de imagen individuales ya son pequeños, el beneficio de la mejora de la relación de compresión es limitado y WebP tiene una velocidad de decodificación más rápida.

Para imágenes animadas de visualización de productos e imágenes animadas de publicidad, elija AVIF cuando el ancho de banda es una prioridad y los requisitos de compatibilidad son bajos, y elija WebP cuando se requiere cobertura amplia y alto rendimiento de decodificación. Puede usar el conversor de WebP a AVIF de OKfmt para completar pruebas de formato de pre-conversión.