Benchmarks de compresión de imagen 2024 - Comparación medida de JPEG, WebP y AVIF
Metodología del benchmark - Condiciones para una comparación justa
Las comparaciones de formatos de compresión de imagen producen resultados sin sentido sin una metodología adecuada. Afirmaciones como "AVIF es 50% más pequeño que JPEG" varían drásticamente según los ajustes de calidad y el contenido de la imagen. Este benchmark establece condiciones de comparación justas.
Base de comparación: Calidad visual igual - Ajustamos el parámetro de calidad de cada formato (quality de JPEG, quality de WebP, CRF de AVIF) para lograr puntuaciones SSIM (Structural Similarity Index) idénticas. Usando SSIM 0.95 como línea base, comparamos el tamaño mínimo de archivo que cada formato requiere para alcanzar este nivel de calidad.
Conjunto de imágenes de prueba: 5 categorías × 20 imágenes cada una = 100 imágenes totales. (1) Fotografías (paisajes, retratos, comida), (2) Ilustraciones/gráficos (diseño plano, gradientes), (3) Capturas de pantalla (texto predominante, UI), (4) Imágenes transparentes (fotos de producto, iconos), (5) Imágenes de alta frecuencia (texturas, patrones finos).
Codificadores: JPEG usa libjpeg-turbo 3.0, WebP usa libwebp 1.3.2, AVIF usa libavif 1.0.4 (codificador aom). Todas son las últimas versiones estables de 2024.
Configuración de codificación: JPEG - rango de calidad 60-95 buscando SSIM 0.95. WebP - rango de calidad 50-90. AVIF - rango CRF 20-45, Speed 6. Búsqueda binaria determina la calidad óptima por imagen, apuntando a SSIM 0.950±0.002. Esta metodología responde objetivamente: "a la misma calidad percibida, ¿qué formato produce el archivo más pequeño?"
Resultados de la categoría fotografía - La ventaja dominante de AVIF
Las fotografías (imágenes naturales) son la categoría donde los formatos de compresión rinden mejor. Los tonos continuos y gradientes permiten que la compresión basada en transformada de frecuencia funcione efectivamente.
Resumen de resultados (base SSIM 0.95, mediana de 20 imágenes):
- JPEG (libjpeg-turbo): Línea base 100% (logrado con calidad 78-82)
- WebP (libwebp): 68% de JPEG (32% de reducción, logrado con calidad 72-76)
- AVIF (aom): 48% de JPEG (52% de reducción, logrado con CRF 28-32)
AVIF logra calidad visual equivalente con menos de la mitad del tamaño de archivo de JPEG. WebP es 30%+ más pequeño que JPEG pero la brecha con AVIF es clara.
Tendencias dependientes de resolución: La ventaja de AVIF aumenta con mayor resolución. A 4000px de ancho, AVIF comprime al 45% de JPEG, mientras que miniaturas de 400px solo alcanzan el 55%. Esto se debe a que el tamaño de bloque de AVIF (hasta 64x64) funciona más eficientemente con imágenes más grandes.
Tendencias dependientes del contenido: Las fotos de paisaje (gradientes de cielo, detalle distante) muestran el rendimiento más fuerte de AVIF al 42% de JPEG. Los primeros planos con textura (tela, veta de madera) muestran ventaja reducida al 55% de JPEG. Los retratos logran 47% de JPEG, con el modelo de predicción de AVIF manejando efectivamente los gradientes de piel.
Comparación de tiempo de codificación: JPEG 1x (base), WebP 3-5x, AVIF 15-25x (Speed 6). El tiempo de codificación de AVIF es una desventaja clara, pero aceptable para procesamiento por lotes en tiempo de compilación donde los ahorros de compresión justifican el costo computacional.
Resultados de categorías ilustración y captura de pantalla
Las ilustraciones y capturas de pantalla tienen características diferentes a las fotografías. Bordes nítidos, áreas de color uniforme y texto crean contenido con componentes mixtos de alta y baja frecuencia.
Ilustraciones/Gráficos (base SSIM 0.95, mediana de 20 imágenes):
- JPEG: Línea base 100% (logrado con calidad 85-90; alta calidad necesaria para suprimir el ringing en bordes)
- WebP: 55% de JPEG (45% de reducción)
- AVIF: 38% de JPEG (62% de reducción)
La ventaja de AVIF se expande aún más en la categoría de ilustración. JPEG produce artefactos visibles en los límites de bloque requiriendo ajustes de alta calidad para lograr SSIM 0.95. Los bloques más grandes de AVIF y sus modelos de predicción avanzados comprimen áreas de color uniforme con extrema eficiencia.
Capturas de pantalla (base SSIM 0.95, mediana de 20 imágenes):
- JPEG: Línea base 100% (logrado con calidad 88-92)
- WebP: 42% de JPEG (58% de reducción)
- AVIF: 30% de JPEG (70% de reducción)
Las capturas de pantalla son la categoría más fuerte de AVIF. Mantiene la nitidez del texto mientras comprime las áreas de fondo uniforme a su mínimo teórico. La reducción del 70% versus JPEG es notable.
Nota importante: Cuando se requiere compresión sin pérdida para ilustraciones o capturas de pantalla, PNG sigue siendo la opción más compatible. WebP sin pérdida es 26% más pequeño que PNG, y AVIF sin pérdida es 10-15% más pequeño aún, pero considerando las tasas de soporte de navegadores, PNG + WebP como respaldo sigue siendo el enfoque seguro para máxima compatibilidad.
Resultados de imágenes transparentes y de alta frecuencia
Las imágenes con transparencia (canales alfa) y contenido de alta frecuencia (texturas) requieren atención particular en la selección de formato.
Imágenes transparentes (base SSIM 0.95, incluyendo alfa, mediana de 20 imágenes):
- PNG (sin pérdida): Línea base 100%
- WebP (con pérdida + alfa): 18% de PNG (82% de reducción)
- AVIF (con pérdida + alfa): 12% de PNG (88% de reducción)
El efecto de migración desde PNG es dramático para imágenes transparentes. Las fotos de productos de e-commerce (fondo blanco hecho transparente) típicamente ven PNGs de 500KB convertirse en 90KB en WebP y 60KB en AVIF. Una página con 100 imágenes de producto se reduce de 50MB a 6MB (AVIF) - transformador para el rendimiento de carga de página.
Imágenes de alta frecuencia (texturas, patrones finos, base SSIM 0.95):
- JPEG: Línea base 100% (logrado con calidad 82-88)
- WebP: 75% de JPEG (25% de reducción)
- AVIF: 58% de JPEG (42% de reducción)
Las imágenes de alta frecuencia son "difíciles" para todos los formatos. Los patrones finos y texturas resisten la predicción, reduciendo la eficiencia de compresión. AVIF aún logra 42% de reducción versus JPEG - menos dramático que otras categorías pero claramente ventajoso.
Hallazgo notable: Cuando la calidad de AVIF se reduce demasiado (CRF 40+) en imágenes de alta frecuencia, ocurre "smearing" - pérdida de detalle por filtros de deblocking excesivamente agresivos. Para fotografía de texturas, limita el CRF a 25-30. WebP no exhibe este problema tan severamente, haciéndolo preferible para preservación de texturas en algunos escenarios.
Comparación de velocidad de codificación y decodificación
Más allá del tamaño de archivo, la velocidad de codificación y decodificación son factores críticos de selección de formato. Los requisitos de conversión en tiempo real y el rendimiento de decodificación del lado del cliente impactan directamente la experiencia del usuario.
Velocidad de codificación (foto 1200x800px, base de calidad igual):
- JPEG (libjpeg-turbo): 15ms (base 1x)
- WebP (libwebp, method 4): 65ms (4.3x)
- AVIF (aom, speed 6): 280ms (18.7x)
- AVIF (aom, speed 4): 850ms (56.7x)
- AVIF (aom, speed 8): 120ms (8x, pero 10-15% de pérdida en ratio de compresión)
La codificación AVIF toma casi 20x más que JPEG. Procesando 1.000 imágenes: JPEG toma 15 segundos, AVIF (speed 6) toma aproximadamente 5 minutos. Aceptable para pipelines CI/CD pero inadecuado para conversión en tiempo real al subir el usuario.
Velocidad de decodificación (renderizado en navegador):
- JPEG: 8ms (base 1x)
- WebP: 10ms (1.25x)
- AVIF: 18ms (2.25x)
La decodificación AVIF toma aproximadamente 2x más que JPEG. La diferencia de 10ms por imagen es insignificante individualmente, pero páginas con 50+ imágenes pueden ver impacto acumulativo. Usar decoding="async" minimiza el impacto en el hilo principal.
Uso de memoria: El pico de memoria durante la decodificación AVIF es aproximadamente 1.5x el de JPEG. En dispositivos móviles con restricciones de memoria (teléfonos Android económicos), decodificar simultáneamente muchas imágenes AVIF puede causar presión de memoria. Considera estrategias de carga diferida para limitar las operaciones de decodificación concurrentes en dispositivos con recursos limitados.
Guías de selección de formato basadas en resultados del benchmark
Basándose en datos medidos, aquí están las guías de selección de formato por tipo de imagen y caso de uso.
Matriz de selección de formato recomendada:
- Fotos (entrega web): AVIF como principal, WebP como respaldo, JPEG como respaldo final. Construye una cadena de respaldo de 3 niveles con el elemento picture.
- Ilustraciones/gráficos (con pérdida aceptable): AVIF es el más eficiente. Los diseños planos con áreas de color uniforme pueden esperar 60%+ de reducción versus JPEG.
- Capturas de pantalla: AVIF es abrumadoramente ventajoso (70% de reducción vs JPEG). Mantiene la nitidez del texto mientras maximiza la compresión.
- Imágenes transparentes: WebP o AVIF. La migración desde PNG produce 80-88% de reducción de tamaño. Las imágenes de productos de e-commerce deben ser la máxima prioridad.
- Texturas/alta frecuencia: AVIF (CRF limitado a 25-30) o WebP. Cuidado con el smearing de AVIF en niveles de compresión agresivos.
- Animación: Animación WebP o MP4. El soporte de navegadores para animación AVIF sigue siendo insuficiente para uso en producción.
Juicio costo-beneficio: Considerando los costos de adopción de AVIF (cambios en pipeline de compilación, mayor tiempo de codificación, gestión de respaldos), migra en este orden de prioridad: (1) Imágenes transparentes (PNG → WebP/AVIF para máxima reducción), (2) Imágenes hero/LCP (mejora directa de LCP), (3) Todas las fotografías (gran efecto acumulativo por volumen), (4) Ilustraciones/capturas de pantalla (menor prioridad si WebP ya es suficiente).
Las decisiones finales deben basarse en la composición de imágenes de tu sitio y la distribución de navegadores de tus usuarios. Si el soporte de AVIF supera el 90% de tu base de usuarios, la migración integral a AVIF está plenamente justificada por los ahorros de ancho de banda y rendimiento demostrados en estos benchmarks.