Como salvar PNGs transparentes sem bordas brancas

O que um canal alfa realmente armazena

Um pixel de PNG contém quatro números: vermelho, verde, azul e alfa. Alfa é a opacidade, de 0 (invisível) a 255 (totalmente opaco). O detalhe crucial é que um pixel mantém seus valores RGB mesmo quando o alfa é baixo. Um pixel pode ser branco puro e ter 90% de transparência. Você mal vai vê-lo — até que ele seja composto sobre algo escuro, quando aquele branco sutil aparece.

Todo problema de borda branca é uma variação da mesma coisa: pixels de borda parcialmente transparentes que contêm a cor errada por baixo.

Causa 1: bordas com antialiasing misturadas com branco

Imagens digitais têm pixels quadrados; objetos reais têm bordas curvas. O antialiasing resolve essa diferença fazendo os pixels ao longo de uma borda serem uma mistura do objeto com o que está atrás dele. Um pixel coberto em 40% por um logotipo vermelho sobre uma página branca é armazenado como rosa claro — 40% de vermelho misturado com 60% de branco.

Agora remova o fundo. Um removedor típico elimina pixels que se aproximam da cor do fundo e mantém o restante. Seu pixel rosa claro não é próximo o bastante do branco puro para ser apagado, então permanece com opacidade total, ainda rosa claro. Multiplique isso por cada pixel do contorno, e você terá uma borda clara de um pixel ao redor de toda a forma.

Removedores melhores fazem algo mais inteligente: em vez de uma decisão binária entre manter e apagar, definem o alfa daquele pixel em 40% e tentam recuperar o vermelho original. Mas recuperar a cor verdadeira de uma mistura é uma estimativa, e a quantidade de branco que conseguem eliminar determina o quanto a borda fica limpa.

Causa 2: o formato descartou o canal alfa

JPEG não tem canal alfa. Nenhum. É um formato de três canais feito para fotografias, e não há lugar no arquivo para armazenar transparência. Quando você salva uma imagem transparente como JPG, o codificador a achata sobre um fundo — quase sempre branco —, e a transparência se perde permanentemente.

É aqui que acontece o desastre clássico. Você exporta um PNG limpo e, em alguma etapa posterior, algo o converte para JPG: um CMS redimensionando arquivos enviados, um aplicativo de mensagens comprimindo anexos, uma ferramenta de design exportando uma prévia, um cliente de e-mail. Seu fundo transparente vira um retângulo branco uniforme, e, se você remover o branco novamente, estará recortando bordas comprimidas em JPEG, muito mais irregulares que as originais.

Observe a linha do GIF. Transparência de um bit significa que cada pixel é totalmente visível ou totalmente invisível — não há cobertura parcial, então antialiasing é impossível e todas as bordas são serrilhadas. Converter um PNG suave para GIF troca um halo suave por degraus.

Causa 3: bordas contaminadas pela cor de fundo

Alguns editores armazenam imagens transparentes com uma cor de "fundo original": os valores RGB dos pixels totalmente transparentes são definidos como uma cor escolhida, geralmente branco, com a ideia de que isso não importa porque o alfa é zero. Normalmente não importa. Mas alguns renderizadores e a maioria das operações de redimensionamento de imagens calculam a média de pixels vizinhos incluindo seus valores RGB, ponderados ou não pelo alfa. Um redimensionamento simples puxa esse branco dos pixels invisíveis e o espalha pela borda visível.

É por isso que uma imagem pode parecer perfeita em tamanho completo e ganhar um halo depois de ser reduzida para uma miniatura. A técnica correta é o alfa pré-multiplicado, em que os valores RGB são armazenados já multiplicados pelo alfa para que o cálculo da média funcione corretamente. A maioria dos navegadores e engines modernos trata isso corretamente; fluxos antigos e alguns códigos personalizados não.

Correções, em ordem de preferência

1. Evite criar o problema

Se você controla a origem, esta é de longe a melhor opção. Exporte a arte da ferramenta em que foi criada com fundo transparente desde o início, em vez de exportá-la achatada sobre branco e remover o branco depois. Ferramentas vetoriais, renderizadores 3D e aplicativos de design aceitam exportação com alfa. Cada etapa de remoção é uma etapa que pode dar errado.

Se você está gerando imagens com um modelo de IA, peça explicitamente um fundo transparente ou uma cor de fundo que não apareça em nenhuma parte do objeto. Magenta vivo é a escolha tradicional: nada natural tem essa cor, então a separação é inequívoca.

2. Remova o fundo usando uma cor contrastante na prévia

O halo branco existe porque o fundo era branco. Se o elemento estiver sobre magenta ou verde neon, os pixels restantes da borda serão magenta ou verdes — o que pode parecer pior, mas é muito mais fácil para uma ferramenta detectar e corrigir, justamente porque essas cores são muito diferentes de qualquer coisa no elemento principal.

Nosso Removedor de fundo funciona amostrando os pixels dos cantos para identificar a cor do fundo e limpando os pixels correspondentes, depois exportando um PNG transparente. Ele lida bem com fundos uniformes — fotos de produtos sobre branco, logotipos sobre uma única cor, gráficos exportados de uma ferramenta. Não foi projetado para fotos com fundos carregados ou em degradê, nas quais uma abordagem de segmentação do elemento principal é a ferramenta certa.

3. Contraia o alfa em um pixel

Se um halo já está incorporado, a correção mais direta e confiável é reduzir um pouco a área visível para que o anel contaminado fique fora dela. Em um editor: carregue o canal alfa como seleção, contraia em um pixel, inverta e apague. No Photoshop, isso corresponde a Layer → Matting → Defringe, que faz aproximadamente isso automaticamente; o GIMP tem Layer → Transparency → Threshold Alpha e as opções de remoção de antialiasing do Script-Fu.

A contrapartida é real: você está apagando um pixel de detalhe verdadeiro da borda. Em um logotipo de 2000 pixels, ninguém vai notar. Em um ícone de 32 pixels, um pixel representa três por cento da largura, e a forma ficará visivelmente mais fina. Ajuste a correção à escala da imagem.

4. Altere a cor da borda em vez de apagá-la

Melhor para imagens pequenas. Em vez de remover o anel semitransparente, substitua seu RGB pela cor que deveria ter — a cor dos pixels internos adjacentes — mantendo o alfa como está. A borda preserva sua suavidade e seu formato; apenas a contaminação desaparece. O Defringe do Photoshop com um raio pequeno se aproxima desse resultado, e é simples implementar isso diretamente se você trabalha com código e dados de imagem do canvas.

5. Componha sobre a cor de destino

Às vezes, a resposta honesta é que você não precisa de transparência. Se o logotipo só aparecerá sobre um fundo conhecido, achate-o sobre essa cor exata e entregue uma imagem comum. Sem alfa, sem halo, sem risco de formato. Isso não é tanto um contorno do problema, mas o reconhecimento de que a transparência só compensa suas complicações quando o fundo realmente varia.

Conferindo seu trabalho

Antes de considerar um recorte pronto, confira esta lista. Leva um minuto e identifica quase todos os problemas.

1. Visualize sobre preto e sobre branco. Qualquer halo ficará evidente sobre um dos dois. Prévias quadriculadas em editores enganam porque o cinza médio esconde tanto bordas claras quanto escuras.
2. Visualize a 100 por cento e em tamanho reduzido. Um halo que aparece apenas ao redimensionar indica uma borda contaminada pela cor de fundo na etapa de redimensionamento, não no arquivo.
3. Confirme que o arquivo é realmente PNG ou WebP. Confira a extensão e os bytes reais, não apenas o que o CMS informa. Um arquivo chamado logo.png que passou por um fluxo JPEG é uma falha comum e confusa.
4. Teste no destino real. Navegadores, engines de jogos e processos de impressão fazem a composição de formas diferentes. O único teste que conta é no local em que a imagem realmente será usada.
5. Procure uma camada indesejada que cubra toda a tela. Uma camada de fundo quase invisível, com 1% de opacidade, não aparecerá no editor, mas produzirá um véu sutil na exportação.

Perguntas frequentes