Un flujo PNG sensato: oxipng, zopfli y paletas

PNG tiene fama de "pesado", pero la mayoría de PNG hinchados solo están mal codificados. Con un flujo claro de tres pasos — cuantizar, optimizar, recomprimir — puedes recortar de rutina un PNG a la mitad o más, sin pérdida, manteniendo bordes nítidos y color limpio. Este es el orden que importa.

Cuándo PNG es la herramienta correcta

PNG está hecho para gráficos planos de bordes nítidos: logos, iconos, exportaciones de UI, diagramas, capturas y cualquier cosa con transparencia. Es sin pérdida, así que los bordes quedan limpísimos — sin ruido de mosquito de JPEG alrededor del texto. Para fotografías es la elección equivocada (usa WebP/AVIF/JPEG), pero para los gráficos sintéticos que llenan las apps modernas, nada gana a un PNG bien hecho.

Paso 1: cuantiza a una paleta cuando puedas

La mayoría de los gráficos de UI usan muchísimos menos de 16 millones de colores. Convertir un PNG truecolor de 24 bits a una paleta indexada de 8 bits (≤256 colores) es la mayor palanca — suele reducir el fichero a la mitad antes de cualquier otra optimización. El truco está en elegir bien los colores y tratar los gradientes con cuidado; un buen cuantizador elige una paleta óptima y solo aplica dithering donde realmente ayuda.

Paso 2: optimiza los filtros con oxipng

PNG aplica un filtro por fila antes de comprimir, y la elección afecta mucho al tamaño. oxipng prueba estrategias de filtros y recomprime la imagen, rápido y en paralelo, con cero pérdida de calidad. Es el valor por defecto seguro de cada día: apúntalo a una carpeta y hace cada PNG más pequeño. Ejecútalo tanto en imágenes truecolor como con paleta.

Paso 3: aprieta DEFLATE con zopfli

Cuando quieres el mínimo absoluto y no te importa esperar, zopfli es un compresor compatible con DEFLATE que busca mucho más a fondo un stream menor. Es lento — a veces segundos por imagen — pero produce PNG estándar que lee cualquier decodificador, a menudo un poco más pequeños que solo con oxipng. Perfecto para recursos que publicas una vez y sirves millones de veces.

# El pipeline completo, sin pérdida de principio a fin
imageforge ui.png --palette auto --lossless        # paso 1
imageforge ./iconos/*.png --optimize oxipng        # paso 2
imageforge logo.png --optimize zopfli --effort max # paso 3

Evitar banding y artefactos de dithering

Los dos modos de fallo de los PNG con paleta son el banding (escalones visibles en un gradiente cuando faltan colores) y el ruido de dithering (moteado de esparcir colores para fingir más). La solución es criterio: deja los gradientes en truecolor, cuantiza las zonas planas y aplica dithering solo con paletas pequeñas donde el ojo prefiere ruido a bandas. En la duda, compara la versión cuantizada con el original antes de publicarla.