Compresión de imágenes explicada - Cómo funcionan JPEG, PNG y WebP

Qué es la compresión de imágenes - Dos enfoques para reducir el tamaño de archivo

La compresión de imágenes es la tecnología para reducir el tamaño de los archivos de imagen. Dado que impacta directamente en la velocidad de carga de las páginas web, es un conocimiento esencial para desarrolladores frontend y diseñadores. Según investigaciones de HTTP Archive, las imágenes representan aproximadamente el 50% del tamaño total de transferencia de una página web, lo que convierte la optimización de imágenes en uno de los medios más efectivos para mejorar el rendimiento.

Los métodos de compresión se dividen en dos grandes categorías:

• Compresión sin pérdida (lossless): Un método que puede reconstruir perfectamente los datos originales tras la descompresión. PNG es el ejemplo principal, comprimiendo mediante la eliminación de redundancia en los datos. Es ideal para imágenes con bordes de color definidos como texto y diagramas. Las tasas de compresión típicamente van de 2:1 a 10:1 dependiendo del contenido.
• Compresión con pérdida (lossy): Un método que reduce significativamente el tamaño del archivo descartando información imperceptible para el ojo humano. JPEG es el ejemplo principal, adecuado para fotografías naturales. Una vez comprimidos, los datos originales no pueden recuperarse, pero las tasas de compresión son ajustables de 10:1 a 100:1.

La elección entre estos métodos depende del propósito de la imagen y la calidad requerida. Para uso web, el equilibrio entre calidad de visualización y tamaño de archivo es el factor de decisión más crítico. La compresión con pérdida que aprovecha las características de la visión humana puede reducir el tamaño de las fotos a niveles donde la degradación de calidad es apenas perceptible, siendo altamente efectiva desde la perspectiva del rendimiento web.

Cómo funciona JPEG - Transformada de frecuencia mediante DCT

JPEG es un formato de compresión con pérdida basado en la Transformada Discreta del Coseno (DCT). Estandarizado en 1992, ha reinado como el estándar de facto para formatos fotográficos durante más de 30 años. El proceso de compresión sigue estos pasos:

• Conversión de espacio de color: Convierte de RGB a YCbCr, separando la luminancia (Y) de la crominancia (Cb, Cr). Como el ojo humano es sensible a los cambios de luminancia pero menos a las diferencias de color, el submuestreo de croma (4:2:0) reduce el volumen de datos hasta un 50%.
• División en bloques y DCT: La imagen se divide en bloques de 8x8 píxeles y se aplica la DCT a cada bloque. La información espacial se transforma al dominio de frecuencia, separando componentes de baja frecuencia (cambios graduales) de componentes de alta frecuencia (detalles finos). La DCT es una transformación reversible que no pierde información; no ocurre degradación en esta etapa.
• Cuantización: Los coeficientes DCT se dividen por una tabla de cuantización, redondeando agresivamente los componentes de alta frecuencia a cero. Se pierde información en esta etapa, pero el parámetro de calidad (1-100) controla la intensidad de la cuantización. Una calidad alrededor de 85 es un punto de equilibrio práctico para uso web. Se usan tablas de cuantización separadas para luminancia y crominancia, con cuantización más fuerte aplicada a los canales de crominancia.
• Codificación de entropía: Los coeficientes post-cuantización se convierten en un arreglo 1D mediante escaneo en zigzag, luego se comprimen usando codificación de longitud de ejecución y codificación Huffman para producir el archivo final. Los ceros consecutivos en componentes de alta frecuencia se codifican eficientemente, por lo que más ceros de la cuantización significan mejor compresión.

La debilidad de JPEG es el ruido de bloque visible (ruido mosquito) en imágenes con bordes definidos como texto o arte lineal. El procesamiento en bloques de 8x8 crea discontinuidades en los límites de bloque. Tampoco soporta transparencia (canal alfa), haciéndolo inadecuado para imágenes que requieren fondos transparentes.

Cómo funciona PNG - Filtrado y Deflate

PNG es un formato de compresión sin pérdida que preserva perfectamente los datos originales de la imagen tras la descompresión. Creado en 1996 para evitar problemas de patentes de GIF, se ha convertido en el formato estándar de imágenes sin pérdida en la web. La compresión PNG consta de dos etapas.

Filtrado: Para cada fila de píxeles, se selecciona el filtro óptimo entre 5 tipos (None, Sub, Up, Average, Paeth). Los filtros calculan diferencias con píxeles adyacentes, aumentando la redundancia de datos. Por ejemplo, en áreas de color casi uniforme como el cielo azul, aplicar el filtro Sub hace que las diferencias se acerquen a cero, mejorando dramáticamente la eficiencia de compresión. El filtro Paeth calcula valores predichos a partir de tres píxeles (izquierdo, superior, superior-izquierdo) y es el filtro más sofisticado, efectivo para imágenes con gradientes.

Compresión Deflate: Después del filtrado, se aplica la compresión Deflate que combina el algoritmo LZ77 y la codificación Huffman. LZ77 detecta secuencias de bytes repetidas y las reemplaza con referencias de distancia-longitud, mientras que la codificación Huffman usa códigos de longitud variable basados en frecuencia. El tamaño de la ventana deslizante (máximo 32KB) afecta la tasa de compresión; ventanas más grandes pueden referenciar patrones más distantes pero aumentan el tiempo de procesamiento.

PNG soporta canales alfa (transparencia) y logra altas tasas de compresión para imágenes con pocos colores o bordes definidos. Sin embargo, para fotografías con variaciones de color complejas, los tamaños de archivo pueden ser 3-5 veces mayores que JPEG. La distinción entre PNG-8 (256 colores, modo paleta) y PNG-24/32 (color completo) es importante; PNG-8 es ideal para iconos y logotipos. PNG-8 puede incluir canales alfa, pero la transparencia se expresa solo dentro de la limitación de 256 colores.

Tecnología WebP - Formato de nueva generación basado en VP8

WebP es un formato desarrollado por Google en 2010 que soporta tanto compresión con pérdida como sin pérdida. El modo con pérdida aplica la tecnología del códec de video VP8 a imágenes estáticas, logrando tamaños de archivo 25-34% menores comparados con JPEG. Diseñado principalmente para mejorar el rendimiento web, ofrece un excelente equilibrio entre velocidad de codificación/decodificación y eficiencia de compresión.

Características de WebP con pérdida: Como JPEG, usa codificación predictiva basada en bloques, pero con intra-predicción de 4x4 píxeles que reduce los artefactos en los límites de bloque. Hay cuatro modos de predicción disponibles: horizontal, vertical, DC (promedio) y TrueMotion, seleccionando el modo óptimo por bloque. También emplea Codificación Aritmética Booleana, logrando mayor eficiencia de compresión que la codificación Huffman. El soporte de canal alfa permite fotos transparentes en un solo archivo.

Características de WebP sin pérdida: Usa un algoritmo propietario que combina predicción espacial, caché de colores, retro-referencias LZ77 y codificación Huffman para producir archivos aproximadamente 26% más pequeños que PNG. La caché de colores recuerda colores usados recientemente y codifica eficientemente su reaparición. Múltiples pasos de preprocesamiento explotan la redundancia específica de imágenes, incluyendo transformación de paleta y almacenamiento delta en el canal verde.

A partir de 2024, todos los navegadores principales (Chrome, Firefox, Safari, Edge) soportan WebP, y los problemas prácticos de compatibilidad están en gran medida resueltos. Sin embargo, el soporte en software de edición de imágenes varía, y dependiendo de tu flujo de trabajo, puede ser necesario usar JPEG/PNG junto con WebP. La velocidad de codificación es comparable a JPEG y significativamente más rápida que AVIF.

Calidad de compresión vs tamaño de archivo - Encontrando la configuración óptima

En la compresión con pérdida, el parámetro de calidad determina el compromiso entre tamaño de archivo y calidad de imagen. Sin embargo, la relación entre el valor de calidad y el tamaño de archivo no es lineal y varía significativamente según el contenido de la imagen. Aquí presentamos conocimiento práctico para encontrar configuraciones de calidad óptimas.

Configuración de calidad JPEG: Reducir la calidad de 100 a 95 reduce el tamaño del archivo un 30-50% con diferencia visual prácticamente imperceptible. El rango de 95 a 85 produce otra reducción del 30-40% a un nivel donde la degradación es indetectable sin comparación cuidadosa. De 85 a 75, se logra una reducción significativa de tamaño pero el banding (escalonamiento) se vuelve visible en áreas de gradiente. Por debajo de 75, la degradación de calidad se vuelve pronunciada y no se recomienda para uso web.

Configuración de calidad WebP: El parámetro de calidad de WebP usa el mismo rango 0-100 que JPEG pero logra mayor eficiencia de compresión a valores equivalentes. WebP calidad 75 ofrece calidad visual equivalente a JPEG calidad 85 con un tamaño de archivo menor. WebP también tiene un parámetro único method (0-6) donde valores más altos dedican más tiempo de codificación para mejorar la tasa de compresión.

Evaluación objetiva de calidad con SSIM: SSIM (Índice de Similitud Estructural) se usa ampliamente como métrica de calidad que se aproxima a la percepción humana. Un SSIM superior a 0.95 se considera imperceptible para la mayoría de los espectadores. En pipelines automatizados, establecer un SSIM objetivo y ajustar automáticamente los parámetros de calidad es efectivo. Usa la opción -quality de cjpeg o la opción -q de cwebp para especificar calidad, y mide el SSIM con el comando dssim para buscar valores óptimos.

画像フォーマットの解説書も Amazon で入手できます

Selección práctica de formato - Eligiendo el formato correcto por caso de uso

Aquí presentamos un resumen de criterios para la selección de formato. En la práctica, necesitas considerar no solo el tipo de imagen sino también el entorno de distribución y el flujo de trabajo.

• Fotos e imágenes naturales: Usa WebP (con pérdida) como primera opción con JPEG como respaldo. Calidad 75-85 mantiene un nivel donde la degradación visual es apenas perceptible. Para navegadores compatibles con AVIF, es posible una reducción adicional del 30-50%.
• Logotipos, iconos y gráficos: Usa PNG-8 para pocos colores, WebP (sin pérdida) o PNG-24 para color completo con transparencia. Prefiere SVG cuando sea aplicable; como formato vectorial, SVG se renderiza nítidamente a cualquier resolución.
• Capturas de pantalla: PNG es óptimo para capturas que contienen texto. JPEG introduce ruido mosquito alrededor del texto que reduce la legibilidad. Sin embargo, si el tamaño del archivo es grande, convertir a WebP (sin pérdida) puede lograr una reducción del 20-30%.
• Animación: La animación WebP es efectiva como reemplazo de GIF, logrando aproximadamente 1/3 del tamaño de archivo a calidad equivalente. Para videos cortos, MP4 o WebM es aún más eficiente.
• Imágenes responsivas: Combina el elemento <picture> de HTML con el atributo srcset para servir imágenes óptimas según el ancho de pantalla del dispositivo y el soporte de formato. Un pipeline de compilación que auto-genere AVIF, WebP y JPEG es ideal.

En última instancia, el enfoque más confiable es probar múltiples formatos en tus imágenes reales y confirmar visualmente el equilibrio calidad-tamaño. Para automatización, construye lógica que dirija las imágenes a formatos basándose en características como cantidad de colores, densidad de bordes y requisitos de transparencia. Bibliotecas como Sharp o ImageMagick hacen que la generación automatizada multi-formato sea sencilla durante el tiempo de compilación.