Como comprimir PNG sem perder qualidade

“Sem perder qualidade” aparece em muitíssimas ferramentas de compressão, e a expressão cobre duas promessas que não são iguais. Uma pode ser conferida até o último bit. A outra é um julgamento sobre o que os seus olhos vão perceber. Este guia faz a primeira e é preciso sobre onde ela termina.

O que “sem perder qualidade” pode significar de forma honesta

Compressão de imagem sem perdas é reescrever a forma como uma imagem é armazenada (o filtro aplicado a cada linha de varredura, a paleta, a profundidade de bits e a ordem do fluxo comprimido) sem alterar um único valor de pixel. O teste é mecânico: decodifique o original e o resultado, compare cada canal de cada pixel, e eles batem. Um PNG tem muito espaço para isso, porque o formato permite muitas codificações válidas da mesma imagem e um codificador de uso geral não está tentando achar a menor.

A outra promessa costuma ser chamada de “visualmente sem perdas”. Significa um resultado com perdas cujo dano você supostamente não vai ver no tamanho normal de visualização. Pode ser uma troca justa, mas é uma opinião sobre uma imagem numa tela, não uma propriedade que uma comparação byte a byte consiga confirmar. Uma abordagem com perdas comum para PNG reduz a imagem a uma paleta de 256 cores ou menos; numa fotografia com muito mais cores do que isso, ela altera pixels de propósito.

Então, para comprimir um PNG sem nenhuma perda, você quer um otimizador, não um recodificador e não um redutor de cores.

Fazendo isso com o compressor de imagens

1. Abra o compressor de imagens e pressione Choose images (escolher imagens), ou solte ou cole os seus PNGs em qualquer lugar da página. Não há limite de quantidade; cada arquivo vira um cartão marcado como “Ready · oxipng, lossless” (pronto, sem perdas).
2. Deixe More options (mais opções) fechado: a linha de resumo diz “PNG effort: Fast (level 2) · lossless at every level” (esforço rápido, nível 2, sem perdas em todos os níveis). Harder (level 4) e Hardest (level 6) estão lá dentro se você quiser. Os três são sem perdas, como a nota abaixo deles informa.
3. Ignore o controle deslizante JPEG quality · MozJPEG. Ele só vale para arquivos JPEG, e a linha abaixo dele diz quantos desses você adicionou.
4. Pressione Compress 1 image (ou o número de imagens que você colocou na fila). Os arquivos são processados um depois do outro, não em paralelo, para que o celular não fique sem memória.
5. Leia cada cartão: o tamanho antes e depois, uma porcentagem e “identical pixels” (pixels idênticos) para tudo o que passou pelo oxipng. Before and after (antes e depois) mostra o original e o resultado lado a lado; com vários arquivos, escolha um cartão para ver outro.
6. Baixe com Download num cartão específico, ou com o botão que substituiu “Compress” (Download all … as .zip para o lote), que a barra no rodapé da tela também traz.

Se uma porcentagem ficar vermelha com sinal de mais, aquele arquivo saiu maior. Ele já estava compacto e não havia mais nada a tirar, então fique com o original.

As medições

Estes números vêm da pesquisa por trás da ferramenta: os mesmos pixels gravados de três formas e depois comparados. A coluna do canvas é o que você obtém quando um navegador decodifica o PNG e pede ao próprio codificador que o grave de novo, que é como funciona a maioria dos “compressores” no navegador.

Imagem	PNG de origem	Salvo de novo por um canvas	Otimizado com oxipng	oxipng em relação à origem
Gráfico de interface chapado	21 493 B	38 905 B (+81%)	3 350 B	−84%
Fotografia, 1600 × 1000	1 006 774 B	1 236 423 B (+23%)	864 362 B	−14%

Os números do oxipng são no nível máximo dele, e cada pixel dos dois resultados bateu com a origem. O gráfico chapado é a surpresa boa: 21 493 ÷ 3 350 = 6.4 vezes menor. A fotografia é a expectativa realista para uma imagem com detalhe tonal de verdade. Três imagens de teste são um indicativo, não uma bateria de benchmarks, então trate a direção como firme e as porcentagens exatas como uma amostra.

O esforço compra tempo de busca, não pixels

Os níveis do menu não trocam qualidade por tamanho. A saída é sem perdas em todos os níveis; um nível mais alto apenas procura por mais tempo uma codificação válida menor. Na mesma fotografia, de forma nativa e em um núcleo:

Nível do oxipng	Saída	Tempo
2 (“Fast” na ferramenta)	884 853 B	0.97 s
4 (“Harder” na ferramenta)	870 679 B	1.98 s
máx.	864 362 B	3.45 s

O nível máximo economizou 20 491 bytes a mais do que o nível 2 por três vezes e meia o trabalho. No navegador, o WebAssembly roda de duas a três vezes mais devagar do que esses tempos nativos, e é por isso que a ferramenta começa no nível rápido.

O que dá errado: salvar de novo não é otimizar

A coluna do canvas na primeira tabela é a falha que esta tarefa atrai. Salvar de novo um PNG pelo codificador do navegador deixou o gráfico chapado 81% maior e a fotografia 23% maior. Os pixels estavam bem; o codificador simplesmente não estava se esforçando. Uma ferramenta feita desse jeito infla uma boa parte dos arquivos que recebe, e, se ela só mostra economias, você pode nem perceber.

As bordas suaves são uma segunda armadilha. Um canvas arredonda os pixels semitransparentes na entrada, e esse arredondamento não pode ser desfeito na saída. Nas medições de PNG para WebP, um recorte fotográfico com bordas esfumadas que passou por um canvas em qualidade sem perdas voltou com 39.77% dos pixels alterados. O caminho de PNG do compressor evita os dois problemas porque nunca toca num canvas: os seus bytes vão direto para o oxipng e os bytes dele voltam direto para você.

Ele vai um passo além do estritamente necessário. O oxipng pode reescrever os valores de cor escondidos sob pixels totalmente transparentes, o que ninguém consegue ver e economiza bytes de verdade, mas não é idêntico bit a bit. A ferramenta deixa essa opção desligada (optimize_alpha é false no código-fonte), porque “identical pixels” é o que está escrito na tela.

Onde o sem perdas termina

• Arquivos JPEG vão para o MozJPEG, que trabalha com perdas. Ele descarta detalhes para economizar bytes, e a ferramenta avisa isso ao lado do controle deslizante. Nesta ferramenta, não dá para deixar um JPEG menor sem essa perda.
• GIF e BMP saem como PNG. Eles são lidos uma vez e gravados como um PNG otimizado sem nenhum pixel alterado, então a extensão do arquivo muda.
• WebP e AVIF são recusados, porque os dois já estão mais bem comprimidos do que um caminho de PNG ou JPEG conseguiria.
• PNGs e GIFs animados são recusados. Decodificar uma animação no navegador mantém só o primeiro quadro, o que transformaria um GIF de quarenta quadros numa imagem parada e ainda apresentaria isso como economia.

Outras formas de fazer isso

Na linha de comando, o próprio oxipng:

oxipng -o 4 --strip safe image.png

-o 4 é o nível de esforço, o mesmo da opção “Harder” da ferramenta, e esta é a sintaxe com que as nossas medições foram feitas. --strip safe manda remover os metadados que ele considera seguros de descartar; os pixels ficam intactos de qualquer forma. Trabalhe numa cópia se quiser manter o arquivo original.

O macOS e o Windows não têm um otimizador de PNG sem perdas nativo que possamos indicar; a linha de comando é a alternativa.

Como verificar que nada foi enviado

Abra as ferramentas de desenvolvedor do navegador na aba Network antes de pressionar o botão de compressão. A primeira execução baixa o próprio mecanismo de compressão, um arquivo WebAssembly servido por este site; o que você não vai ver é qualquer requisição levando a sua imagem para fora. Comprima um segundo arquivo e o mecanismo já estará carregado, então nada novo aparece.

Solte os seus PNGs no compressor de imagens e leia os números de cada arquivo antes de ficar com algum. Se o que você precisa é de outro formato, e não de um PNG menor, esse é o trabalho do conversor de imagens.