Reduzir PNG preservando transparência e bordas nítidas

PNG continua excelente para UI, logos e ícones. Este guia resume um fluxo confiável: paletizar quando adequado, remover chunks redundantes e então comprimir sem perdas.

Decida primeiro

• Precisa de transparência? → PNG ou WebP sem perdas (para UI)
• Poucas cores? → Paletização (≤8‑bit) gera economia grande
• Bordas finas/texto? → Priorize o sem perdas; evite pré‑processos agressivos

Workflow prático

1. Normalize para sRGB (detalhes: Gerenciamento de Cor e Estratégia ICC 2025 — Guia prático para consistência de cores na Web)
2. Paletize para reduzir cores
3. Remova chunks redundantes (EXIF, timestamps, texto)
4. Aplique compressão sem perdas

Para casos pontuais: Otimizador PNG sem perda. Para lotes: Otimizador em lote Plus.

Pontos de atenção

• Borrão nas bordas do texto: evite blur prévio; mantenha a fonte nítida
• Quebra de cores: ajuste o tamanho da paleta passo a passo; revise com Comparador

Até onde reduzir cores (referências)

• Logos/ícones: frequentemente 8–32 cores; observe o anti‑aliasing
• Capturas de UI: 64–128 cores costumam atingir paridade visual
• Ilustrações tipo foto: evite PNG; prefira WebP (lossless/lossy) ou AVIF

Para bordas alfa em fundo escuro, um contorno externo de 0,5–1px da mesma cor evita halos.

Receitas de CLI (sem perdas)

# oxipng: bom equilíbrio velocidade/compactação
oxipng -o 4 --strip all input.png -o output.png

# zopflipng: mais forte, porém lento
zopflipng -m --iterations=50 --filters=0me input.png output.png

# pngquant: com perdas (paletização) mas qualidade alta; ajuste com --quality
pngquant --quality=70-95 --speed 1 --strip --force --output output.png input.png

Dicas:

• Comece com pngquant para reduzir cores e, na sequência, oxipng/zopflipng para apertar.
• --strip all remove timestamps/texto sem impacto visual.

Estratégia de filtros e parâmetros zlib

PNG escolhe um filtro por linha (None/Sub/Up/Average/Paeth) e então comprime com zlib. A melhor combinação pode mudar o tamanho em alguns a vários por‑cento.

• Busca de filtros: tente padrões como zopflipng -m --iterations=50 --filters=0me
• Nível zlib: 9 é máximo mas lento; na prática, comece em 5–7 e itere
• Áreas contínuas tendem a Paeth/Average; áreas planas de UI às vezes None/Sub

Dithering (granularidade percebida)

O dithering mascara banding, mas em texto/bordas pode parecer ruído.

• Floyd–Steinberg: versátil; bom para imagens naturais

• Ordered: padrão regular; pode chamar atenção em UI

• None: ideal para texto/logos; superfícies planas permanecem limpas

No pngquant, controle com --floyd (0..1) e --ordered. Para ícones, normalmente sem dithering; para gradientes sutis, Floyd fraco.

Alfa e bordas pré‑multiplicadas

PNGs transparentes podem exibir halos escuros em fundos escuros. Considere o fundo esperado e o premultiplied‑alpha/compostagem ou um contorno externo de 0,5–1px.

// Exemplo conceitual com 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')

Integração CI/CD (exemplo)

# .github/workflows/png-optimize.yml (trecho)
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 {} {}

Artigos relacionados

• Otimizador PNG sem perda
• Estratégias de conversão de formatos 2025 — Guia WebP/AVIF/JPEG/PNG
• Gerenciamento de Cor e Estratégia ICC 2025 — Guia prático para consistência de cores na Web