Saltar al contenido

PNG

La Tecnología Detrás de la Compresión PNG Sin Pérdida: Un Análisis Profundo

5 min read

La Tecnología Detrás de la Compresión PNG Sin Pérdida: Un Análisis Profundo

Cuando guardas una imagen como JPEG, el software descarta deliberadamente datos visuales para lograr tamaños de archivo más pequeños. Esto se conoce como compresión con pérdida (lossy). Sin embargo, cuando guardas una imagen como PNG (Portable Network Graphics), se comprime sin pérdida (lossless). Puedes comprimir y descomprimir un PNG un millón de veces, y cada píxel seguirá siendo matemáticamente idéntico a la imagen original.

¿Cómo es esto posible? ¿Cómo puede reducirse el tamaño de un archivo de imagen sin perder ninguna información?

La magia de PNG radica en una combinación brillante de algoritmos de preprocesamiento y un motor de compresión robusto tomado del mundo de los archivos ZIP. En este análisis técnico profundo, retiraremos las capas de un archivo PNG, examinando cómo el Filtrado (Filtering), LZ77, la Codificación de Huffman y el algoritmo DEFLATE trabajan en armonía para hacer que la web sea más rápida sin sacrificar la calidad.


1. El Problema con los Datos de Píxeles Crudos

Imagina una imagen de 1000 x 1000 píxeles. Eso es 1.000.000 de píxeles. Si es una imagen RGBA estándar (Rojo, Verde, Azul, Alfa), cada píxel requiere 4 bytes (8 bits por canal).

  • 1.000.000 píxeles × 4 bytes = 4.000.000 bytes = ~3.8 MB.

Una imagen cruda (raw) y sin comprimir de 1000x1000 ocupa casi 4 megabytes de almacenamiento. Si la imagen es solo un cuadrado rojo sólido, almacenar 4 megabytes de "rojo, rojo, rojo, rojo..." es increíblemente ineficiente. Esta ineficiencia es lo que los algoritmos de compresión buscan eliminar.


2. Primer Paso: Filtrado (Delta Encoding)

Antes de que el algoritmo de compresión real toque los datos, la especificación PNG aplica un inteligente paso de preprocesamiento llamado Filtrado (Filtering).

El filtrado no comprime los datos; en cambio, transforma los datos en un formato que es mucho más fácil de manejar para un algoritmo de compresión. Lo hace almacenando la diferencia (el delta) entre píxeles en lugar del valor absoluto de los píxeles.

Cómo Funciona el Filtrado

Imagina una línea horizontal de píxeles con los siguientes valores en escala de grises: 100, 101, 102, 103, 104, 105

Si usamos un Filtro Sub (que compara un píxel con el que está inmediatamente a su izquierda), la secuencia se transforma en: 100, 1, 1, 1, 1, 1

¿Por qué es útil esto? Porque los algoritmos de compresión prosperan con la repetición y los números pequeños. Una secuencia compuesta principalmente por unos (1) o ceros (0) es enormemente más fácil de comprimir que una secuencia de números grandes que cambian constantemente.

Tipos de Filtros PNG

PNG define cinco tipos de filtros diferentes que se pueden aplicar fila por fila:

  1. None (Ninguno): No altera los píxeles.
  2. Sub: Resta el píxel a la izquierda.
  3. Up (Arriba): Resta el píxel que está directamente arriba.
  4. Average (Promedio): Resta el promedio matemático del píxel a la izquierda y el píxel de arriba.
  5. Paeth: Un algoritmo complejo que predice el valor del píxel basándose en los píxeles de la izquierda, arriba y arriba-izquierda, y luego resta el valor real de la predicción.

Al guardar un PNG, los codificadores avanzados (como OptiPNG u OxiPNG) probarán diferentes combinaciones de estos filtros en cada una de las filas para encontrar la disposición que produzca los datos más compresibles.


3. Segundo Paso: El Algoritmo DEFLATE

Una vez que los datos de la imagen se han filtrado en una secuencia de números altamente predecible, se pasan al algoritmo DEFLATE.

DEFLATE es exactamente el mismo motor de compresión utilizado en archivos ZIP, GZIP y la compresión HTTP. Logra la compresión sin pérdida combinando dos algoritmos distintos: LZ77 y Codificación de Huffman.

Fase A: LZ77 (Compresión Basada en Diccionario)

LZ77 (creado por Abraham Lempel y Jacob Ziv en 1977) busca secuencias repetitivas de datos.

Imagina que los datos filtrados se ven como esta cadena de caracteres: A B C D E F A B C D E F

LZ77 se da cuenta de que el segundo A B C D E F es idéntico al primero. En lugar de escribir esos caracteres de nuevo, reemplaza la segunda secuencia con un "puntero" (pointer) que esencialmente dice: "Retrocede 6 espacios y copia los siguientes 6 caracteres."

En datos binarios crudos, esto significa que si hay un patrón recurrente de colores (como un cielo azul liso o un botón de UI sólido), LZ77 colapsará todos esos bytes repetidos en diminutos punteros de referencia hacia atrás (back-reference pointers). Esta es la razón por la que los PNG son espectacularmente buenos para comprimir ilustraciones, logotipos y capturas de pantalla, pero tienen dificultades con fotografías ruidosas (donde los patrones que se repiten son raros).

Fase B: Codificación de Huffman (Entropía)

Después de que LZ77 ha reemplazado los patrones repetidos con punteros, los datos pasan a un Codificador Huffman (inventado por David A. Huffman en 1952).

Las computadoras estándar almacenan caracteres utilizando una longitud fija. Por ejemplo, en ASCII, cada carácter ocupa exactamente 8 bits.

  • A = 01000001 (8 bits)
  • Z = 01011010 (8 bits)

La codificación de Huffman analiza la frecuencia de los datos. Si la letra E aparece 10,000 veces en un archivo, pero la letra Z solo aparece dos veces, ¿por qué ambas deberían ocupar 8 bits?

La codificación de Huffman crea un "diccionario" personalizado (un árbol binario) para el archivo específico que está comprimiendo. Asigna códigos muy cortos a los valores más frecuentes y códigos más largos a los valores raros.

Por ejemplo, después de la codificación de Huffman:

  • El byte más común podría convertirse en solo: 0 (1 bit)
  • Un byte un poco menos común podría ser: 10 (2 bits)
  • Un byte muy raro podría ser: 110110 (6 bits)

Debido a que el paso de Filtrado de preprocesamiento (Paso 1) transformó los datos de la imagen en una secuencia fuertemente dominada por ceros y números pequeños, el Codificador Huffman puede asignar códigos increíblemente cortos de 1 o 2 bits a esos números, reduciendo drásticamente el tamaño total del archivo.


4. Técnicas Avanzadas de Optimización de PNG

Si bien el proceso de codificación PNG estándar es poderoso, los desarrolladores modernos usan herramientas avanzadas para llevar la compresión sin pérdida aún más lejos. Estos se conocen como optimizadores PNG.

Eliminación de Trozos (Metadata / Chunks)

Un archivo PNG está compuesto de "trozos" (chunks). Además del trozo crítico de datos de imagen (IDAT), un PNG puede contener trozos para comentarios de texto, perfiles de color, corrección de gamma y datos EXIF. Los optimizadores pueden eliminar los trozos no esenciales, ahorrando kilobytes de datos sin afectar la imagen visual.

Filtrado por Fuerza Bruta (Brute-forcing)

Los editores de imágenes estándar como Photoshop generalmente aplican una heurística de filtrado básica y rápida al guardar un PNG. Los optimizadores dedicados como pngcrush o zopflipng adoptan un enfoque diferente: usan la fuerza bruta. Comprimen la imagen miles de veces utilizando todas las combinaciones posibles de filtros de fila y tamaños de ventana DEFLATE para encontrar el tamaño de archivo más pequeño absoluto permitido matemáticamente.

Compresión Zopfli

Google desarrolló una implementación de DEFLATE profundamente optimizada llamada Zopfli. Aunque es mucho más lenta en la compresión de datos que la biblioteca zlib estándar, crea archivos que suelen ser entre un 3% y un 8% más pequeños que la compresión máxima de zlib, al mismo tiempo que sigue siendo 100% compatible con todos los decodificadores PNG estándar.

Conclusión

La próxima vez que guardes un logotipo o una captura de pantalla como PNG y te maravilles de sus bordes nítidos y su pequeño tamaño de archivo, recuerda la increíble informática que trabaja detrás de escena.

Es la sinergia inteligente de la codificación delta (Filtrado) para reducir la varianza, LZ77 para eliminar patrones repetidos y la codificación de Huffman para minimizar la longitud de bits de los valores frecuentes lo que permite a PNG ofrecer una calidad impecable y sin pérdida en un paquete amigable para Internet. Comprender este proceso no solo nos da aprecio por los formatos que usamos todos los días, sino que también capacita a los desarrolladores para tomar decisiones informadas al optimizar los recursos para el rendimiento web.

Buy me a coffee