Cómo funciona la compresión de imágenes: JPEG, PNG, WebP y AVIF

Guardar una foto de 4000×3000 sin ninguna compresión exige 12 millones de píxeles × 3 bytes (rojo, verde y azul): unos 36 MB. Esa misma foto ocupa entre 3 y 5 MB en la galería del móvil. Esa diferencia de casi el 90% es obra de la compresión, que funciona de dos maneras muy distintas.

Con pérdida y sin pérdida: ¿se puede recuperar el original?

La compresión sin pérdida tiene que devolver exactamente los mismos píxeles, bit a bit. Funciona como un ZIP: busca repeticiones y regularidades y las escribe de forma más corta. Cuánto ahorra depende de lo predecible que sea la imagen. Un esquema con fondo blanco y unas pocas formas puede reducirse decenas de veces; una foto nocturna llena de ruido apenas cambia. PNG, GIF y WebP sin pérdida pertenecen a este grupo.

La compresión con pérdida descarta información para siempre. Elige el detalle que el ojo difícilmente notará, y el ajuste de «calidad» decide cuánto se tira. Así trabajan JPEG, WebP con pérdida y AVIF. En fotografía ganan por goleada porque la mayor parte de los datos de una foto describe variaciones mínimas —ruido del sensor, texturas finas— que nadie ve a tamaño normal.

Un error muy extendido es pensar que PNG equivale a alta calidad y JPEG a baja calidad. Si guardas como PNG una foto que ya pasó por JPEG, conservas con total fidelidad cada artefacto del JPEG y el archivo pesa varias veces más. La calidad se decide una sola vez, cuando se descarta el detalle; el formato solo determina con qué eficiencia se guarda lo que queda.

JPEG: separar el color, transformar, redondear

El estándar JPEG, ITU-T T.81, se aprobó en septiembre de 1992. Sigue siendo el formato fotográfico más usado, y los códecs con pérdida posteriores repiten su receta básica.

Paso 1: separar brillo y color

El codificador convierte RGB en un canal de luminancia (Y) y dos de diferencia de color (Cb y Cr). La vista humana es muy sensible a los cambios de brillo, pero distingue peor el detalle fino de color, así que los canales de color pueden guardarse a menor resolución sin que casi nadie lo note. Reducirlos a la mitad en horizontal y en vertical se llama submuestreo 4:2:0 y deja los datos de color en una cuarta parte. Reducir solo en horizontal es 4:2:2; mantener la resolución completa, 4:4:4.

Aquí nace un defecto conocido. Un texto rojo fino sobre blanco tiene poca diferencia de brillo y mucha de color. Con la mitad de resolución de color, el rojo se derrama sobre los píxeles vecinos y los bordes se ensucian. Por eso el problema no se ve en las fotos de vacaciones y salta a la vista en banners, gráficos y capturas de subtítulos.

Paso 2: bloques de 8×8 y la DCT

Cada canal se divide en bloques de 8×8 y a cada bloque se le aplica la transformada discreta del coseno (DCT). La DCT convierte 64 valores de píxel en 64 coeficientes de frecuencia. El de la esquina superior izquierda (coeficiente DC) es la media del bloque; hacia la esquina inferior derecha, los coeficientes describen rayas cada vez más finas. La transformada en sí no pierde nada: es la misma información expresada en otros ejes.

Su utilidad está en que casi todos los bloques de una foto natural cambian de forma suave. La energía se concentra en unos pocos coeficientes de baja frecuencia, y los de alta frecuencia son números pequeños cerca de cero.

Paso 3: la cuantización, el único paso con pérdida

Cada coeficiente se divide entre el número correspondiente de una tabla de cuantización y se redondea a entero. Las tablas dividen las frecuencias altas entre números mayores, así que la mayoría de los valores pequeños de alta frecuencia se convierten en cero. El control de calidad de cualquier herramienta JPEG es, en el fondo, un factor de escala sobre esa tabla: menos calidad significa divisores más grandes y más ceros.

Las largas series de ceros se escriben luego de forma muy compacta con codificación de Huffman (codificación de entropía), que vuelve a ser sin pérdida.

De dónde salen los bloques y el ringing

Si bajas mucho la calidad, cada bloque conserva poco más que su media y un par de frecuencias bajas. Como cada bloque se aproxima por separado, los vecinos dejan de encajar y aparece la cuadrícula de 8×8: la escalera que se ve en un cielo azul o en una pared lisa.

Los bordes nítidos, como el texto o las líneas finas, necesitan muchos coeficientes de alta frecuencia para dibujarse bien. Si se recortan, aparecen halos ondulados alrededor del borde, lo que se conoce como ringing. Es la suciedad que rodea las letras cuando guardas una captura de pantalla en JPEG.

Guardar un JPEG otra vez como JPEG añade un nuevo error de cuantización sobre los bloques anteriores. Ni siquiera la calidad 100 recupera lo perdido, y a menudo el archivo crece, porque el codificador se empeña en conservar los artefactos antiguos como si fueran detalle real.

PNG: guardar diferencias y comprimir con deflate

PNG se diseñó a mediados de los noventa como alternativa libre de patentes a GIF; su tercera edición se convirtió en Recomendación del W3C en junio de 2025. Comprime en dos fases.

Primero, el filtrado. En cada fila, el codificador elige uno de cinco filtros que sustituyen cada byte por una diferencia: None (sin cambios), Sub (diferencia con el píxel de la izquierda), Up (con el de arriba), Average (con la media de izquierda y arriba) y Paeth (una predicción a partir de izquierda, arriba y arriba a la izquierda). Los fondos planos y los degradados suaves se convierten en ceros y números pequeños.

Después, deflate, la misma familia de compresión que usa ZIP: búsqueda de coincidencias LZ77 dentro de una ventana de hasta 32 KB más codificación de Huffman. Las series de ceros casi no ocupan.

Por eso PNG brilla con capturas de pantalla, interfaces, logotipos y diagramas, donde hay pocos colores y los valores se repiten. Las fotos son el caso contrario: el ruido hace que la diferencia de cada píxel con sus vecinos sea impredecible y los filtros apenas ayudan. Una foto guardada en PNG suele pesar varias veces más que en JPEG.

Además, dos PNG de la misma imagen pueden tener tamaños distintos según el filtro que use cada fila y lo a fondo que deflate busque coincidencias. Por eso los optimizadores especializados logran reducir un PNG sin pérdida, y por eso volver a guardarlo con el codificador integrado del navegador puede hacerlo más grande que el original.

WebP: un formato de foto heredado del vídeo

Google presentó WebP en el blog de Chromium el 30 de septiembre de 2010. WebP con pérdida reutiliza la compresión de fotogramas clave del códec de vídeo VP8. Mantiene el esqueleto de DCT y cuantización de JPEG y añade dos cosas:

• Predicción por bloques: cada bloque se predice a partir de los bloques vecinos ya decodificados, y solo se transforma y guarda el residuo, es decir, la diferencia entre la predicción y la realidad.
• Reparto adaptativo de bits y codificación aritmética: la imagen se divide en segmentos y gasta menos bits en las zonas lisas y más en las complejas.

WebP sin pérdida es un diseño totalmente distinto que combina predicción espacial, decorrelación de color, paletas, referencias LZ77 y una caché de colores usados recientemente. La documentación de Google indica que WebP ocupa alrededor de un 30% menos que PNG y JPEG con calidad visual equivalente, y que sustituir PNG transparentes por WebP con pérdida y canal alfa ahorra de media un 60–70%. Compresión con pérdida más transparencia: justo lo que JPEG no puede ofrecer.

AVIF: un fotograma de AV1

AVIF guarda imágenes comprimidas con AV1 —el códec de vídeo de la Alliance for Open Media— dentro de un contenedor HEIF, que a su vez se basa en el formato ISO Base Media File Format. Bloques más grandes y de tamaño variable, muchos modos de predicción direccional y un filtrado potente hacen que, con pocos bytes, AVIF tienda a suavizarse en vez de pixelarse en bloques. También admite HDR, gamas de color amplias y color de 10 o 12 bits.

El precio es el tiempo de codificación: generar un AVIF cuesta mucho más que un JPEG o un WebP, y pocos navegadores pueden codificarlo desde un canvas. Su escala de calidad tampoco significa lo mismo —un AVIF a 50 suele verse parecido a un JPEG a 80—, así que nunca compares números de calidad entre formatos.

Cuándo llegó el soporte a los navegadores

Según Can I use, el soporte completo llegó en estas versiones:

Navegador	WebP	AVIF
Chrome	32	85
Firefox	65	93
Safari	16.0 (parcial en 14–15.6)	16.4 (iOS desde 16.0)
Edge	18	121

Como Chrome adoptó WebP años antes que Firefox y Safari, durante mucho tiempo WebP tuvo fama de ser «el formato que no se ve en el iPhone». Hoy ambos formatos se muestran en más del 95% del uso mundial de navegadores. Eso sí, mostrar un formato y codificarlo son capacidades distintas: un navegador puede enseñar un AVIF sin problemas y, aun así, no saber crear un archivo AVIF desde un canvas.

Qué formato para cada caso

Situación	Elige	Por qué
Fotos normales para la web	WebP o AVIF; JPEG si te preocupa la compatibilidad	Aquí la compresión con pérdida rinde más
Capturas, documentos, gráficos	PNG, o WebP a calidad 90 o más	Evita el ringing alrededor del texto y el sangrado de color
Logotipos e iconos con transparencia	WebP de alta calidad para publicar; PNG (o SVG) como original	JPEG no tiene canal alfa
Originales que seguirás editando	PNG o el archivo de la cámara	Para que la pérdida no se acumule en cada guardado
Sistemas antiguos, adjuntos de correo	JPEG	Se abre en cualquier parte

Hay una regla que pesa más que la elección de formato: la resolución es una palanca mayor que la calidad. El tamaño del archivo sigue al número de píxeles, así que pasar una foto de 4000 píxeles a 2000 deja una cuarta parte de los píxeles. Si la foto se va a mostrar a 1000 píxeles de ancho, subirla a 4000 y bajar la calidad hasta 40 da un archivo más pesado y más feo que reducirla antes con el redimensionador de imágenes y dejar una calidad generosa.

El punto en que se dobla la curva de tamaño cambia de una foto a otra. El compresor de imágenes codifica a varias calidades y elige ese punto por ti, y el conversor de imágenes cambia el formato de muchos archivos a la vez.