ALLONLINE STORIES · VOL. III · TRANSPARÊNCIA EXPLICADA
PNG
A transparência tornou-se informação. Como um formato aberto transformou alpha, filtros de scanline e compressão sem perdas numa forma fiável de transportar gráficos digitais.
Desce para entrar nas camadas
01 · PORQUÊ PNG
PNG não tenta adivinhar o que podes deixar de ver. Preserva o que exportaste.
Nascido em 1996 como alternativa aberta para gráficos web, PNG encontrou um papel muito específico: interfaces, capturas, ilustrações e assets onde contornos, cor e transparência precisam de permanecer intactos.
ABERTOPNGsem perdas · alpha · cor
02 · ANATOMIA
Um PNG é uma sequência de chunks com regras muito claras.
A assinatura identifica o ficheiro. IHDR define as propriedades essenciais. Um ou mais IDAT contêm os dados comprimidos. IEND fecha a estrutura. Entre eles podem existir paletas, perfis de cor, texto e outras peças auxiliares.
PNG SIGNATURE
A assinatura de oito bytes identifica o ficheiro antes de interpretar qualquer chunk.
03 · RGBA
A transparência não é um efeito. É informação por píxel.
Em truecolor com alpha, cada píxel pode guardar vermelho, verde, azul e um canal alpha independente. Separá-los ajuda a perceber porque PNG preserva contornos suaves sem pintar um fundo na imagem.
RGBA
4 canais ativos · cor completa + transparência
04 · ALPHA COMPOSITING
O mesmo píxel pode viver sobre qualquer fundo.
Alpha descreve cobertura ou opacidade. O navegador mistura a cor do píxel com o que está atrás, permitindo contornos naturais sobre branco, preto, cor ou imagem.
PNG
05 · FILTROS
Antes de DEFLATE, PNG tenta tornar cada scanline mais previsível.
Cada linha pode usar None, Sub, Up, Average ou Paeth. O filtro não elimina informação: transforma temporariamente valores para expor padrões e pequenas diferenças que comprimem melhor depois.
SUBguarda diferenças em relação ao píxel anterior da linha
06 · DEFLATE
Sem perdas significa reconstruir exatamente os mesmos valores.
Depois da filtragem, PNG usa DEFLATE: procura sequências repetidas e combina-as com codificação estatística. O objetivo é descrever os mesmos dados com menos bits, não aproximá-los.
07 · PALETA VS TRUECOLOR
Às vezes 32 cores são mais inteligentes do que milhões.
PNG pode guardar cor indexada através de uma paleta ou cor direta por píxel. Para ícones, pixel art e gráficos com poucos tons, uma paleta compacta reduz bastante o ficheiro sem o tornar lossy.
INDEXEDMuito eficiente para gráficos com cor limitada
08 · ADAM7
Uma imagem entrelaçada pode revelar-se em sete passagens.
Adam7 distribui os píxeis por sete mapas. As primeiras passagens mostram uma estrutura dispersa; as seguintes preenchem os espaços até reconstruir a imagem completa. Só muda a ordem de chegada.
Passagem 1 / 7
09 · APNG
PNG também aprendeu a mexer-se.
APNG acrescenta vários frames, duração, blending e disposal ao ecossistema PNG. É útil para animação com transparência, embora para web seja sensato comparar peso e suporte com WebP e outros formatos modernos.
FRAME 01 → 04
10 · COR E METADADOS
Um PNG pode transportar mais contexto do que aquilo que vês.
Chunks auxiliares podem descrever gamma, cromaticidades, perfis ICC, intenção sRGB e texto. Essa informação pode melhorar consistência entre aplicações, mas também acrescenta bytes e complexidade.
11 · QUANDO USAR
PNG ganha quando cada píxel importa. Perde quando cada byte importa mais.
Interfaces, logótipos rasterizados, capturas, gráficos com texto e transparência são território natural de PNG. Uma fotografia grande normalmente comprime muito melhor com formatos criados para perda percetual.
Texto, ícones e contornos duros permanecem nítidos porque a compressão não aproxima os píxeis.
Prioriza dimensões corretas e compressão sem perdas.12 · WORKFLOW
Otimizar PNG é escolher a estrutura antes de perseguir um número de KB.
Ajusta dimensões, decide se precisas de alpha, reduz a paleta quando fizer sentido, conserva apenas metadados úteis e verifica se WebP encaixa melhor no destino.
- 01Dimensiona ao tamanho real de utilização.
- 02Decide se precisas de alpha, truecolor ou paleta.
- 03Otimiza filtros, paleta e metadados.
- 04Compara com WebP quando o objetivo é entrega web.
Da transparência à ação
Conserva cada píxel. Remove apenas o que não é necessário.
Comprime PNG, verifica alpha, extrai paletas ou compara uma saída WebP. Todas as ferramentas funcionam diretamente no navegador.
AllOnline Stories · Compreender a transparência muda a forma como exportas.