Optimización PNG 2025 — Paletización y compresión sin pérdida

Publicado: 19 sept 2025 · Tiempo de lectura: 3 min · Por el equipo editorial de Unified Image Tools

Reducir PNG sin perder transparencia ni borde

PNG sigue brillando para UI, logos e iconos. Este guía resume un flujo fiable: paletiza cuando sea posible, elimina chunks redundantes y luego aprieta con herramientas sin pérdida.

Decide primero

¿Necesitas transparencia? → PNG o WebP sin pérdida (para UI)
¿Pocos colores? → Paletiza (≤8 bits) para grandes ahorros
¿Bordes finos/texto? → Prioriza sin pérdida; evita preprocesados agresivos

Flujo práctico

Normaliza a sRGB (detalles: Gestión de color correcta y estrategia ICC 2025 — Guía práctica para colores web consistentes)
Paletiza para reducir colores
Elimina chunks redundantes (EXIF, marcas de tiempo, texto)
Aplica compresión sin pérdida

Para casos puntuales usa Optimizador PNG sin pérdida; para lotes, Optimizador por lotes Plus.

Puntos delicados

Desdibujado del texto: evita el blur previo; mantén la fuente nítida
Roturas de color: ajusta la paleta por pasos; revisa con Comparador

¿Hasta dónde reducir colores? (umbrales)

Logos/iconos: a menudo 8–32 colores; cuidado con el anti-aliasing
Capturas de UI: 64–128 colores suelen lograr paridad visual
Ilustración tipo foto: evita PNG; prueba WebP (lossless/lossy) o AVIF

Para bordes alfa sobre fondo oscuro, añadir un halo de 0,5–1px del mismo color evita franjas.

Recetas CLI (sin pérdida)

# oxipng: buen equilibrio entre velocidad y compresión
oxipng -o 4 --strip all input.png -o output.png

# zopflipng: más fuerte pero más lento
zopflipng -m --iterations=50 --filters=0me input.png output.png

# pngquant: con pérdida (paletización) pero de alta calidad; controla con --quality
pngquant --quality=70-95 --speed 1 --strip --force --output output.png input.png

Pistas:

Comienza con pngquant para reducir colores y después oxipng/zopflipng para apretar.
--strip all quita timestamps/texto que no afectan al renderizado.

Filtros y parámetros zlib

PNG elige por línea un filtro (None/Sub/Up/Average/Paeth) y luego comprime con zlib. La combinación óptima puede cambiar el tamaño varios puntos porcentuales.

Búsqueda de filtros: prueba patrones como zopflipng -m --iterations=50 --filters=0me
Nivel zlib: 9 es máximo pero lento; en práctica, empieza en 5–7 y itera
Áreas continuas suelen preferir Paeth/Average; superficies planas, a veces None/Sub

Dithering (granularidad perceptiva)

El dither disimula bandas, pero en texto/bordes puede parecer ruido.

Floyd–Steinberg: todoterreno; bueno para imágenes naturales
Ordered: patrón regular; en UI puede destacar
None: mejor para texto/logos; planos limpios

En pngquant usa --floyd (0..1) y --ordered. Para iconos, suele ir sin dither; en gradientes suaves, Floyd débil.

Alfa y bordes premultiplicados

Los PNG transparentes pueden mostrar halos oscuros en fondos oscuros. Anticipa el fondo y considera premultiplied‑alpha o un trazo exterior de 0,5–1px del mismo color.

// Ejemplo conceptual con sharp
import sharp from 'sharp'

await sharp('input.png')
  .removeAlpha()
  .png({ compressionLevel: 9 })
  .toFile('flat.png')

await sharp('input.png')
  .ensureAlpha()
  .png({ compressionLevel: 9 })
  .toFile('alpha.png')

Integración en CI/CD (ejemplo)

# .github/workflows/png-optimize.yml (extracto)
name: Optimize PNG
on: [pull_request]
jobs:
  png-opt:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: sudo apt-get update && sudo apt-get install -y pngquant
      - run: |
          find assets -name "*.png" -print0 | xargs -0 -n1 -I{} pngquant --skip-if-larger --quality=70-95 --strip --force --output {} {}