Introducción: Por qué conocer el algoritmo cambia cómo comprimes
Cada vez que arrastras un control deslizante de calidad en un editor de imágenes o eliges entre JPEG y PNG, estás tomando una decisión que solo se entiende completamente en términos del algoritmo de compresión subyacente. ¿Por qué reducir la calidad JPEG de 90 a 80 apenas cambia el aspecto de la imagen pero reduce el tamaño del archivo en un 40%? ¿Por qué un PNG de una fotografía pesa cinco veces más que un JPEG de la misma foto cuando los dos formatos parecen igualmente "sin pérdida" según la descripción popular? ¿Por qué WebP supera consistentemente a JPEG con la misma calidad perceptual?
Estas preguntas tienen respuestas algorítmicas precisas. Este artículo explica cómo los cuatro formatos de imagen web más importantes — JPEG, PNG, WebP y AVIF — comprimen los datos de imagen. Comprender estos mecanismos te permite tomar mejores decisiones sobre la selección de formato, los ajustes de calidad y los compromisos entre tamaño de archivo y fidelidad visual. Si quieres aplicar lo que aprendas, usa nuestro compresor de imágenes gratuito para experimentar con formatos y ajustes de calidad en tus propios archivos.
Lossy vs. Lossless: La división fundamental
Todo algoritmo de compresión de imágenes pertenece a una de dos categorías — o combina ambas.
Compresión sin pérdida (Lossless)
La compresión sin pérdida reduce el tamaño del archivo sin descartar ningún dato de imagen. Descomprimir un archivo sin pérdida reproduce los datos de píxeles originales exactamente, bit a bit. Piénsalo como comprimir un archivo ZIP: los archivos originales se restauran perfectamente al descomprimir. PNG y GIF usan compresión sin pérdida. WebP y AVIF soportan un modo sin pérdida. Usa sin pérdida cuando la precisión de píxeles importa: capturas de pantalla, imágenes con mucho texto, iconos con bordes nítidos, imágenes médicas o forenses, y cualquier recurso que planees editar más adelante.
Compresión con pérdida (Lossy)
La compresión con pérdida logra tasas de compresión mucho más altas descartando permanentemente información que la visión humana probablemente no notará. El algoritmo explota debilidades conocidas en la percepción humana — somos más sensibles a las diferencias de brillo que a las diferencias de color, más sensibles a los cambios en áreas grandes y uniformes que a los detalles de alta frecuencia. Usa con pérdida para fotografías y escenas naturales donde la información descartada genuinamente no es visible al nivel de calidad objetivo. JPEG es el formato con pérdida clásico; WebP y AVIF usan el modo con pérdida por defecto.
Una analogía útil
Imagina describir una foto de atardecer en un mensaje de texto. Sin pérdida es una descripción completa píxel a píxel: "píxel 1: RGB(255,120,40), píxel 2: RGB(254,119,39)..." — perfectamente precisa, muy larga. Con pérdida es una descripción en prosa: "un degradado naranja y rojo profundo sobre el horizonte, cielo azul arriba, un ligero grano de película en las sombras" — mucho más corta, y un lector puede reconstruir una versión convincente, pero no el original exacto.
Compresión JPEG a fondo
JPEG (Joint Photographic Experts Group), estandarizado en 1992, sigue siendo el formato de imagen con pérdida más común en la web. Su pipeline de compresión tiene varias etapas distintas, cada una contribuyendo al tamaño final del archivo.
Etapa 1: Conversión de espacio de color (RGB → YCbCr)
JPEG primero convierte la imagen de RGB (rojo, verde, azul) a YCbCr, separando la imagen en tres canales: Y (luma, o brillo), Cb (croma de diferencia de azul) y Cr (croma de diferencia de rojo). Esta separación es crucial porque la visión humana es mucho más sensible a las variaciones de brillo que a las variaciones de color. Separarlos permite a JPEG aplicar diferentes niveles de compresión a cada canal — preservando el detalle de brillo mientras comprime agresivamente el color.
Etapa 2: Submuestreo de croma
Después de la conversión del espacio de color, JPEG típicamente reduce la resolución de los canales de croma Cb y Cr. Esto se llama submuestreo de croma. La notación usa una relación como 4:4:4, 4:2:2 o 4:2:0:
- 4:4:4 — Sin submuestreo. Resolución de color completa para los tres canales. Mayor calidad, archivo más grande.
- 4:2:2 — Resolución de croma reducida a la mitad horizontalmente. Se usa en video profesional. Suavizado de color ligero a alta ampliación.
- 4:2:0 — Resolución de croma reducida a la mitad horizontal y verticalmente. Usado en la mayoría de los codificadores JPEG de consumo. Reduce la cantidad de datos de color en un 50% con mínima pérdida de calidad visible en fotografías.
La mayoría de los codificadores JPEG usan 4:2:0 por defecto. A distancias de visualización típicas, la reducción de resolución de color es imperceptible en fotos naturales. Sin embargo, 4:2:0 puede causar "sangrado de color" visible alrededor de bordes de alto contraste en gráficos de texto sobre imagen o memes, razón por la que esos se comprimen mejor como PNG.
Etapa 3: División en bloques y DCT
JPEG divide la imagen en bloques de 8×8 píxeles sin superposición y aplica la Transformada Discreta del Coseno (DCT) a cada bloque. La DCT convierte cada bloque del dominio espacial (valores de píxeles) al dominio de frecuencia (una suma de ondas coseno a diferentes frecuencias espaciales). El resultado es una matriz de 64 coeficientes — uno para el componente DC (el color promedio del bloque) y 63 componentes AC (detalles espaciales cada vez más finos).
La idea clave es que las imágenes naturales contienen la mayor parte de su energía en componentes de baja frecuencia. El coeficiente superior izquierdo de la matriz DCT (el valor DC) describe el brillo general del bloque; los coeficientes hacia la parte inferior derecha describen detalles cada vez más finos. Para un cielo liso o un tono de piel, estos coeficientes de alta frecuencia son muy pequeños o cero.
Etapa 4: Cuantización — donde se controla la calidad
La cuantización es donde ocurre realmente la compresión con pérdida, y es lo que controla tu deslizador de calidad. Cada uno de los 64 coeficientes DCT se divide por un valor de una tabla de cuantización y se redondea al entero más cercano. Valores de cuantización más altos redondean más agresivamente, produciendo enteros más pequeños que se comprimen mejor pero pierden más detalle.
La tabla de cuantización tiene valores más grandes para los coeficientes de alta frecuencia (detalle fino, al cual el ojo es menos sensible) y valores más pequeños para los coeficientes de baja frecuencia (las formas y tonos amplios que el ojo nota más). A calidad 95, la tabla de cuantización usa divisores pequeños — casi no se pierden datos. A calidad 50, los divisores son grandes — el detalle de alta frecuencia se descarta casi completamente, que es por qué la imagen se ve en bloques (los notorios "artefactos JPEG" son la cuadrícula de 8×8 visible cuando la cuantización es demasiado agresiva).
Etapa 5: Codificación de entropía Huffman
Después de la cuantización, muchos coeficientes son cero (detalle de alta frecuencia que se redondeó). JPEG usa codificación por longitud de serie para representar compactamente las series de ceros, luego aplica codificación Huffman — un esquema de codificación de longitud variable sin pérdida — a los valores no nulos restantes. Esta etapa final es completamente sin pérdida y no añade ninguna pérdida de calidad adicional.
Compresión PNG a fondo
PNG (Portable Network Graphics), introducido en 1996 como reemplazo abierto de GIF, usa un pipeline sin pérdida de dos etapas: filtrado seguido de compresión DEFLATE.
Etapa 1: Filtrado
Antes de la compresión, PNG aplica un filtro a cada fila de píxeles. El filtro transforma los valores de píxeles crudos en diferencias (deltas) que típicamente son más pequeñas en magnitud y por tanto se comprimen mejor. PNG soporta cinco tipos de filtro, aplicados por fila:
- Ninguno — Valores de píxeles crudos. Útil cuando la imagen ya es incompresible (ruido, grano de película).
- Sub — Cada píxel se almacena como la diferencia del píxel a su izquierda. Funciona bien para imágenes con degradados horizontales.
- Up — Diferencia del píxel directamente encima. Funciona bien para degradados verticales.
- Average — Diferencia del promedio del píxel a la izquierda y el píxel de arriba.
- Paeth — Usa una función predictora que selecciona el más cercano entre izquierda, arriba o arriba-izquierda como valor predicho. Generalmente el filtro de mejor rendimiento para imágenes naturales.
Los codificadores PNG modernos calculan qué filtro produce el resultado más compresible para cada fila y almacenan el tipo de filtro junto con los datos de la fila para que el decodificador pueda invertirlo exactamente.
Etapa 2: Compresión DEFLATE
Los datos de fila filtrados se comprimen con DEFLATE — el mismo algoritmo usado en archivos ZIP y gzip. DEFLATE combina LZ77 (referencias a cadenas de bytes repetidas) con codificación Huffman. Como el filtrado crea valores delta pequeños y secuencias de ceros, los datos filtrados son altamente compresibles. DEFLATE es sin pérdida por definición, por lo que la descompresión PNG siempre reproduce los datos de píxeles originales exactos.
Por qué PNG es grande para fotografías
Las fotografías contienen enormes cantidades de detalle de alta frecuencia (textura, grano, ruido). Después del filtrado, los valores delta para cada fila son muy variados — no pequeños, no repetitivos. DEFLATE no puede comprimir bien datos impredecibles. El resultado: un PNG fotográfico es 3–10 veces más grande que un JPEG de la misma imagen a calidad visual comparable. PNG brilla cuando los datos de píxeles contienen grandes áreas uniformes, bordes nítidos o patrones repetitivos — exactamente la estructura que el filtrado convierte en series de valores delta pequeños.
WebP: VP8 se encuentra con transformadas lossless
WebP fue desarrollado por Google a partir de su adquisición de On2 Technologies. Utiliza algoritmos fundamentalmente diferentes para los modos con pérdida y sin pérdida, ambos de los cuales superan a sus equivalentes JPEG y PNG en la mayoría de los escenarios.
WebP con pérdida: Codificación de cuadro intra VP8
WebP con pérdida se basa en la codificación de cuadro clave (intra-cuadro) del códec de video VP8. Como JPEG, usa una DCT basada en bloques, pero con predicción más sofisticada y codificación de transformada:
- Predicción de macrobloque: Antes de transformar, VP8 predice cada bloque a partir de bloques vecinos ya codificados usando múltiples modos de intra-predicción. Esta predicción se resta del bloque real, y solo el residual (el error) se transforma y cuantifica. Los bloques altamente predecibles producen residuales casi cero que se comprimen a casi nada.
- Transformadas más grandes: WebP puede usar transformadas en tamaños de bloque más grandes, capturando la estructura más amplia de manera más eficiente que el 8×8 fijo de JPEG.
- Codificación de entropía más eficiente: WebP usa codificación aritmética (más eficiente que el Huffman de JPEG) y un modelado de probabilidad más sofisticado.
El resultado: WebP con pérdida típicamente produce archivos 25–35% más pequeños que JPEG a calidad perceptual equivalente. Por eso comprimir a WebP con nuestro compresor de imágenes puede reducir dramáticamente los tamaños de archivo comparado con JPEG.
WebP sin pérdida: Transformadas y codificación de entropía
WebP sin pérdida aplica una cascada de transformadas reversibles a la imagen antes de la codificación de entropía, cada una diseñada para reducir la redundancia estadística:
- Transformada predictora: Cada píxel se predice a partir de sus vecinos; solo el error de predicción se almacena.
- Transformada de color: Las correlaciones entre canales de color se eliminan (similar a la separación YCbCr pero reversible).
- Transformada de resta de verde: El canal verde se resta del rojo y azul para explotar la correlación.
- Transformada de indexación de color: Reemplaza colores repetidos con índices de paleta cuando la imagen tiene pocos colores únicos.
WebP sin pérdida típicamente es un 25% más pequeño que PNG para la misma imagen.
AVIF: AV1 lleva el poder del códec de video a las imágenes
AVIF (AV1 Image File Format) almacena imágenes estáticas usando codificación de intra-cuadro del códec de video AV1. AV1 fue diseñado por la Alliance for Open Media específicamente para avanzar la frontera de eficiencia de compresión más allá de HEIC/H.265.
Compresión de intra-cuadro AV1
AV1 usa un conjunto de herramientas mucho más rico que JPEG o incluso VP8:
- Tamaños de bloque variables: Superbloques de hasta 128×128 píxeles, subdivididos recursivamente. Las áreas lisas grandes usan bloques grandes; el detalle complejo usa bloques pequeños.
- Intra-predicción rica: Más de 60 modos de intra-predicción direccionales más predictores "suave" y "DC". El codificador elige el modo que minimiza la energía residual por bloque.
- Transformadas múltiples: AVIF soporta DCT, ADST (Transformada Asimétrica del Seno Discreto) e identidad, elegidas por bloque.
- Optimización perceptual: La optimización de tasa-distorsión puede ajustarse a métricas de calidad perceptual en lugar del MSE crudo, reduciendo los artefactos visibles a altas tasas de compresión.
Gama de color amplia y HDR
AVIF soporta de forma nativa gama de color amplia (P3, Rec. 2020) y HDR (profundidad de bit de 10 y 12 bits). JPEG está limitado a sRGB de 8 bits. Esto hace que AVIF sea el único formato web convencional capaz de entregar fotografía HDR sin bandeo en pantallas compatibles.
Eficiencia de compresión y soporte de navegadores
AVIF típicamente entrega archivos 45–55% más pequeños que JPEG a la misma calidad perceptual. Sin embargo, codificar AVIF es intensivo en CPU — especialmente a ajustes de mayor calidad. AVIF es compatible con Chrome 85+, Firefox 93+, Safari 16.1+ y Edge 121+. Para compatibilidad amplia, sirve AVIF con un respaldo WebP o JPEG usando el elemento <picture>.
Métricas de calidad perceptual: qué mide realmente la "calidad"
Cuando los ingenieros de compresión comparan algoritmos, necesitan métricas objetivas que se correlacionen con la percepción visual humana.
PSNR (Relación Señal-a-Ruido de Pico)
PSNR mide la relación entre el valor máximo posible de píxel y el error cuadrático medio (MSE) entre píxeles originales y comprimidos. Es simple de calcular pero se correlaciona mal con la percepción humana — una imagen con desenfoque en todas partes puede puntuar PSNR más alto que una con artefactos nítidos pero localizados.
SSIM (Índice de Similitud Estructural)
SSIM compara la luminancia local, el contraste y la estructura entre imágenes originales y comprimidas. Se correlaciona mucho mejor con la percepción humana que el PSNR. Un SSIM de 0.95+ generalmente se considera visualmente indistinguible del original. La mayoría de los benchmarks de compresión usan SSIM como eje de calidad principal.
Butteraugli y DSSIM
Butteraugli (usado por GUETZLI de Google y libjxl) y DSSIM son modelos psicovisuales que modelan con mayor precisión la sensibilidad dependiente de la frecuencia, la adaptación de color y los efectos de enmascaramiento. Son computacionalmente costosos pero producen mejores curvas de tasa-distorsión para optimización. Los codificadores AVIF a menudo usan estas métricas en sus bucles de optimización de calidad.
Decisiones prácticas de formato y calidad
Con esta comprensión, aquí hay un marco de decisión para los casos de uso web más comunes:
| Tipo de contenido | Mejor formato | Punto dulce de calidad | Por qué |
|---|---|---|---|
| Fotografía de héroe | AVIF o WebP | 70–80% | Alta eficiencia perceptual; gran impacto en LCP |
| Foto de producto | WebP (con respaldo JPEG) | 75–85% | Buena calidad a tamaño reducido; amplio soporte |
| Captura de pantalla / UI | PNG o WebP lossless | Sin pérdida | Los bordes nítidos y texto necesitan precisión de píxel |
| Ilustración / gráfico | SVG o PNG | Sin pérdida | Bordes duros; indexación de color comprime bien |
| Cuadrícula de miniaturas | WebP | 60–70% | Dimensiones pequeñas; artefactos de compresión menos visibles |
| Textura de fondo | WebP o JPEG | 50–65% | Baja importancia visual; compresión agresiva aceptable |
Cómo nuestro compresor aplica estas técnicas
Nuestro compresor de imágenes gratuito aplica implementaciones de códec nativas del navegador (a través de la Canvas API para JPEG y WebP, y bibliotecas dedicadas para AVIF) directamente en tu navegador. Cuando ajustas el deslizador de calidad, estás controlando la agresividad de la tabla de cuantización para JPEG, el objetivo de tasa-distorsión para WebP VP8, o el objetivo de calidad perceptual para el codificador AV1. Ningún archivo se sube jamás a un servidor — toda la codificación ocurre en tu máquina, lo que significa que tus imágenes permanecen privadas y la única latencia es el tiempo de CPU local.
Ahora que entiendes lo que ocurre dentro de cada algoritmo, puedes tomar decisiones informadas: elige WebP para la mejor compresión compatibles con navegadores en fotos, AVIF para máxima compresión con mejora progresiva, PNG para cualquier cosa con texto o bordes duros, y experimenta con ajustes de calidad sabiendo exactamente qué compromisos estás haciendo.