Cómo funciona realmente la compresión JPEG

JPEG es la cucaracha de los formatos de archivo. Se estandarizó en 1992, es anterior al navegador web y ha sobrevivido a todos los intentos de reemplazarlo. WebP, AVIF, HEIC: todos comprimen mejor, y aun así JPEG sigue siendo el formato de imagen más usado en internet. En parte es inercia. Pero también se debe a que la cadena de compresión de JPEG es realmente brillante: una clase magistral de procesamiento de señales aplicado, que merece la pena entender aunque nunca escribas un codificador.

La mayoría de desarrolladores tratan JPEG como una caja negra: metes una imagen, sacas un archivo más pequeño y subes el control de calidad hasta que se ve aceptable. Pero entender qué pasa dentro de la caja cambia la forma en que piensas sobre las imágenes, la compresión y los compromisos entre tamaño de archivo y calidad visual.

El pipeline de un vistazo

La compresión JPEG es un pipeline de cinco etapas, cada una con algo ingenioso. La gracia está en que se componen: cada etapa prepara a la siguiente para ser más eficaz.

1. Conversión de espacio de color — de RGB a YCbCr (separa el brillo del color)
2. Submuestreo de crominancia — reduce la resolución de los canales de color
3. Transformada discreta del coseno (DCT) — convierte datos espaciales en datos de frecuencia
4. Cuantización — descarta el detalle de alta frecuencia (este es el paso con pérdida)
5. Codificación de entropía — compresión sin pérdida de los datos cuantizados

Los pasos 1 y 2 explotan cómo funciona la visión humana. Los pasos 3 y 4 explotan propiedades de las imágenes naturales. El paso 5 es compresión de datos estándar. Cada paso es simple por separado. La clave está en la secuencia.

Paso 1: conversión de espacio de color

Tu cámara captura imágenes en RGB: canales rojo, verde y azul, con 8 bits por píxel. El primer movimiento de JPEG es convertir esto a YCbCr: un canal de luminancia (brillo) y dos canales de crominancia (color). Todavía no es compresión, no se pierde ningún dato. Es una transformación de coordenadas, como rotar los ejes.

¿Para qué molestarse? Porque el ojo humano es mucho más sensible al brillo que al color. Puedes ver detalles finísimos en una fotografía en blanco y negro, pero tu capacidad para percibir la resolución del color es mucho más basta. Al separar brillo y color, JPEG puede tratarlos de forma distinta: conserva el detalle del brillo y reduce agresivamente el detalle del color.

RGB to YCbCr conversion (simplified):
Y  =  0.299R + 0.587G + 0.114B    (luminance — brightness)
Cb = -0.169R - 0.331G + 0.500B    (blue chrominance)
Cr =  0.500R - 0.419G - 0.081B    (red chrominance)
Note: green dominates the luminance calculation because
human eyes have far more green-sensitive cone cells.
This isn't arbitrary — it matches the physiology.

Paso 2: submuestreo de crominancia

Aquí ocurre la primera reducción real de datos. Como los humanos no percibimos el color a resolución espacial completa, JPEG reduce la resolución de los canales Cb y Cr, normalmente a la mitad en ambas dimensiones. Esto se llama submuestreo 4:2:0. Por cada cuatro píxeles de luminancia hay una muestra de crominancia.

El resultado: acabas de recortar a la mitad los datos brutos (de 3 canales a resolución completa a 1 completo + 2 de un cuarto de resolución), y la imagen se ve prácticamente idéntica al original. Pruébalo tú mismo: toma cualquier fotografía, reduce la resolución de los canales de color 4 veces y te costará ver la diferencia. Tu cerebro rellena el detalle de color a partir de la información de luminancia.

Esto no funciona igual de bien para todas las imágenes. Las fotografías comprimen de maravilla porque las escenas naturales tienen degradados de color suaves. Pero las imágenes con bordes de color nítidos, como texto sobre un fondo de color, un círculo rojo sobre blanco o el pixel art, muestran un halo de color visible tras el submuestreo. Por eso JPEG es malo con el texto: los bordes de color nítidos se difuminan.

Paso 3: la transformada discreta del coseno

Aquí es donde JPEG se pone interesante. La imagen se divide en bloques de 8×8 píxeles, y cada bloque pasa del dominio espacial (valores de brillo de los píxeles) al dominio de la frecuencia (cuánto hay de cada frecuencia espacial).

Piénsalo así: un bloque de 8×8 píxeles puede representarse como una suma ponderada de 64 patrones básicos. El primero es un bloque plano (el valor medio). Los siguientes añaden gradientes horizontales y verticales. Los patrones con números más altos añaden detalle cada vez más fino: oscilaciones rápidas de brillo.

An 8x8 DCT block conceptually:
DC ──► Low frequency ──────────────► High frequency
┌─────┬─────┬─────┬─────┬─────┬─────┬─────┬─────┐
│ AVG │  →  │  →  │  →  │  →  │  →  │  →  │  →  │ Low freq
│     │     │     │     │     │     │     │     │   ↓
│  ↓  │  ↘  │     │     │     │     │     │     │
│     │     │  ↘  │     │     │     │     │     │
│     │     │     │  ↘  │     │     │     │     │
│     │     │     │     │  ↘  │     │     │     │
│     │     │     │     │     │  ↘  │     │     │
│     │     │     │     │     │     │  ↘  │     │
│     │     │     │     │     │     │     │ FINE │ High freq
└─────┴─────┴─────┴─────┴─────┴─────┴─────┴─────┘
Top-left = low frequency (smooth gradients)
Bottom-right = high frequency (sharp edges, fine detail)
Natural images: most energy concentrated in top-left
Text/line art: significant energy in bottom-right

La DCT en sí no tiene pérdida: puedes reconstruir perfectamente el bloque original de 8×8 a partir de sus 64 coeficientes. Pero aquí está la propiedad clave: en las imágenes naturales (fotografías, degradados, texturas orgánicas), la mayor parte de la energía se concentra en los coeficientes de baja frecuencia. Los coeficientes de alta frecuencia, que representan el detalle fino, tienden a ser pequeños. Esto es lo que hace funcionar el siguiente paso.

¿Por qué 8×8? Es un compromiso. Bloques más grandes (16×16, 32×32) concentrarían mejor la energía, pero cuestan más de calcular y provocan artefactos de «bloques» visibles con calidades bajas. Bloques más pequeños (4×4) reducirían ese efecto, pero no concentrarían tan bien la energía. El 8×8 resultó ser un punto dulce que ha aguantado más de 30 años.

Paso 4: cuantización, donde mueren los datos

Este es el paso con pérdida. Cada coeficiente DCT se divide entre un valor correspondiente de una tabla de cuantización y luego se redondea al entero más cercano. Los divisores grandes (para los coeficientes de alta frecuencia) redondean a cero los valores pequeños. Esos ceros se pierden para siempre: aquí es donde la información se descarta de forma permanente.

Example quantization (quality ~50):
DCT coefficient: 42.7    Quantization divisor: 16    Result: round(42.7/16) = 3
DCT coefficient: 8.3     Quantization divisor: 40    Result: round(8.3/40)  = 0
DCT coefficient: -2.1    Quantization divisor: 99    Result: round(-2.1/99) = 0
The quality slider in your image editor controls the quantization table.
Quality 100: divisors close to 1 (almost no rounding, huge file)
Quality 75:  moderate divisors (good balance, typical web use)
Quality 50:  large divisors (noticeable artifacts, small file)
Quality 10:  very large divisors (blocky mess, tiny file)

La tabla de cuantización es el factor más importante de la calidad de un JPEG. El estándar JPEG define una tabla por defecto, pero los codificadores pueden usar la que quieran. Los codificadores modernos como MozJPEG usan tablas optimizadas que exprimen más calidad de archivos más pequeños ajustando los divisores a la sensibilidad perceptual humana: son más agresivos con las frecuencias a las que los humanos somos menos sensibles.

Tras la cuantización, un bloque 8×8 típico con calidad media tiene quizá entre 6 y 10 coeficientes no nulos de 64. El resto son cero. Esta enorme reducción de valores no nulos es lo que hace eficaz el último paso de compresión.

Paso 5: codificación de entropía

El último paso es la compresión sin pérdida de los coeficientes cuantizados. JPEG usa una combinación de codificación por longitud de series (RLE) y codificación Huffman. Los coeficientes se leen en un patrón en zigzag desde el bloque 8×8, empezando por el coeficiente DC (arriba a la izquierda) y avanzando por frecuencias crecientes. Esto agrupa todos los ceros finales, que RLE gestiona eficientemente: en vez de guardar «0, 0, 0, 0, 0, 0, ..., 0», guarda «cuarenta y siete ceros».

La codificación Huffman asigna secuencias de bits más cortas a los valores más comunes y más largas a los raros. Como la mayoría de coeficientes no nulos son enteros pequeños (1, -1, 2, -2), reciben códigos muy cortos. El resultado: el bloque 8×8 cuantizado, que empezó con 64 valores, suele comprimirse a entre 20 y 40 bytes, según el contenido de la imagen y el nivel de calidad.

Por qué unas imágenes comprimen mejor que otras

Entender el pipeline explica comportamientos de compresión que de otro modo parecen misteriosos.

• Las fotografías comprimen bien porque tienen degradados de color suaves (el submuestreo de crominancia funciona de maravilla) y la mayor parte de la energía está en coeficientes DCT de baja frecuencia (la cuantización anula muchos coeficientes sin impacto visible).
• El texto y el dibujo lineal comprimen mal porque los bordes nítidos producen coeficientes DCT de alta frecuencia significativos que no pueden anularse sin artefactos visibles. Los límites de los bloques de 8×8 se hacen visibles como un halo alrededor de los bordes del texto.
• El ruido destruye la compresión porque el ruido del sensor es un dato aleatorio de alta frecuencia. Cada píxel ruidoso añade coeficientes de alta frecuencia no nulos que resisten la cuantización. Una foto con ruido a calidad 80 puede pesar entre 3 y 5 veces más que una foto limpia de la misma escena con la misma calidad.
• Los degradados son casi gratis porque un degradado suave en un bloque 8×8 se representa con solo 2 o 3 coeficientes DCT. El resto son cero incluso sin cuantización.
• Volver a guardar degrada la calidad porque cada guardado aplica la cuantización de nuevo y los errores de redondeo se acumulan. Guardar un JPEG 10 veces a calidad 75 es notablemente peor que guardarlo una sola vez a calidad 75. Por eso conviene editar siempre desde el archivo original.

El control de calidad no es lineal

La mayoría de desarrolladores tratan el control de calidad de JPEG como si fuera un compromiso lineal: la calidad 50 es la mitad de calidad que la 100, y ocupa la mitad de tamaño. Ninguna de las dos cosas es cierta.

La calidad 100 no es «sin pérdida»: sigue aplicando cuantización, solo que con divisores pequeños. El archivo es enorme (a menudo más grande que un PNG) y visualmente indistinguible de la calidad 95. En fotografías, la calidad 95 es indistinguible de la 90. La diferencia perceptual entre la calidad 85 y la 75 es mayor que entre la 100 y la 85. Por debajo de 50, los artefactos se vuelven graves y la reducción de tamaño se ralentiza.

El punto óptimo para imágenes web suele estar entre 75 y 85. Por debajo de 75, los artefactos se ven a un tamaño de visualización normal. Por encima de 85, el archivo crece bastante con una mejora perceptual insignificante. La calidad 75 por defecto de MozJPEG está bien elegida: alcanza el codo de la curva calidad-tamaño en la mayoría de fotografías.

Los codificadores JPEG modernos son más listos de lo que crees

El estándar JPEG define el formato de decodificación, no el codificador. Esto significa que las implementaciones de codificadores pueden diferir muchísimo en eficiencia de compresión y aun así producir archivos conformes al estándar. MozJPEG, desarrollado por Mozilla, genera archivos entre un 5 y un 15 % más pequeños que libjpeg con la misma calidad visual, gracias a varias técnicas.

• Cuantización trellis — en lugar de redondear cada coeficiente DCT de forma independiente, la cuantización trellis considera cómo afectan las decisiones de redondeo a la etapa de codificación de entropía y toma decisiones globalmente mejores.
• Tablas Huffman optimizadas — las tablas Huffman por defecto de JPEG son genéricas. MozJPEG genera tablas personalizadas ajustadas a la distribución real de coeficientes de cada imagen.
• Codificación progresiva — los JPEG progresivos almacenan los coeficientes en varias pasadas (primero lo grueso, luego el refinamiento). A menudo comprimen mejor que la codificación secuencial porque la pasada gruesa tiene distribuciones de coeficientes más predecibles.
• Tablas de cuantización adaptativas — en lugar de una única tabla para toda la imagen, los codificadores adaptativos ajustan la cuantización por región: más agresivos en zonas con mucho detalle (donde los artefactos se ven menos) y más conservadores en zonas lisas.

Si sirves imágenes en la web, cambiar del codificador libjpeg por defecto a MozJPEG es una de las mejoras de rendimiento más fáciles que hay. La mayoría de CDN de imágenes y librerías de procesamiento lo soportan. La codificación es más lenta (irrelevante para imágenes estáticas pre-procesadas) y la salida es más pequeña con la misma calidad.

JPEG frente a los formatos nuevos

WebP, AVIF y HEIC usan técnicas de compresión más modernas: bloques de transformada más grandes, filtros de desbloqueo en bucle y predicción intra (usar bloques vecinos para predecir el bloque actual). Comprimen entre un 20 y un 50 % mejor que JPEG con la misma calidad visual. AVIF, en particular, basado en el códec de vídeo AV1, es impresionantemente eficiente.

Entonces, ¿por qué JPEG sigue en todas partes? Por su soporte universal. Todos los navegadores, visores de imágenes, sistemas operativos, cámaras, teléfonos y software que maneja imágenes soportan JPEG. WebP está casi universalizado en navegadores pero le falta soporte nativo en los sistemas operativos. El soporte de AVIF sigue siendo irregular. HEIC es sobre todo del ecosistema de Apple. Para un formato que tiene que funcionar en todas partes, JPEG sigue siendo la única opción segura.

El consejo práctico: usa AVIF o WebP con JPEG como alternativa si tu infraestructura lo permite (la mayoría de CDN lo hacen mediante negociación de contenido). Si solo puedes usar un formato, un JPEG codificado con MozJPEG a calidad 80 es difícil de superar en fotografías. Para capturas de pantalla, diagramas e imágenes con mucho texto, PNG sigue siendo mejor opción: o explora enfoques más creativos para representar imágenes.

El bloque de 8×8 que conquistó el mundo

La cadena de compresión de JPEG es un ejemplo de manual de ingeniería que trabaja con la percepción humana en lugar de en su contra. Cada etapa explota una propiedad concreta (la insensibilidad al color, la distribución de frecuencias de las imágenes naturales, el enmascaramiento perceptual del ruido de cuantización) y juntas forman un sistema que reduce los archivos entre 10 y 20 veces con un impacto visible mínimo. Treinta y cuatro años después, los mismos bloques DCT de 8×8 que funcionaban en el hardware de 1992 siguen transportando la mayoría de imágenes de internet. Esa es la marca de un diseño que acertó con lo fundamental.