PNG transparente: confira se o fundo faz parte da imagem

Para conferir um PNG transparente, coloque o arquivo exportado sobre fundos de cores diferentes. A área que deveria estar vazia precisa deixar o fundo aparecer. Se um retângulo branco ou um quadriculado continuar cobrindo o destino, essa parte pode estar gravada na imagem, em vez de representar transparência.

O guia de imagem para web organiza formatos, dimensões e publicação. Aqui, vamos fazer uma conferência específica: comparar transparência real e fundo quadriculado incorporado, com duas amostras geométricas criadas para o artigo.

A extensão PNG permite transparência, mas não confirma o conteúdo

A documentação de formatos da MDN descreve o suporte do PNG à transparência. Isso informa uma capacidade do formato, não uma prova de que o fundo de determinado arquivo foi removido. Um PNG pode guardar uma imagem inteiramente opaca.

A especificação PNG do W3C explica o papel do alfa na opacidade e admite imagens com todos os pixels opacos. Em termos práticos, uma área transparente permite que o fundo da composição apareça; uma área branca continua sendo conteúdo branco quando está gravada como opaca.

Comece pela aparência desejada no destino. Em uma fotografia retangular, o fundo pode fazer parte da composição. Em um elemento que precisa se sobrepor a uma apresentação, talvez seja necessário deixá-lo transparente. Remover o fundo só faz sentido quando atende à função da imagem e preserva o assunto.

Não use apenas a miniatura ou o quadriculado como evidência

Um editor pode mostrar um padrão quadriculado para ajudar a visualizar áreas transparentes. Porém, um arquivo também pode conter o desenho de um quadriculado. Na miniatura, as duas situações podem parecer semelhantes. O teste precisa acompanhar o arquivo até outra composição.

Também é possível que um visualizador apresente uma imagem transparente sobre branco, fazendo a área vazia parecer preenchida. Antes de pedir uma remoção de fundo, mude o fundo de visualização ou coloque o arquivo em uma composição de teste. Guarde o original e trabalhe com uma cópia.

Exemplo didático: dois PNGs com o mesmo losango

Exemplo didático criado para este artigo: a amostra A tem um losango laranja opaco e área transparente ao redor. A amostra B tem o mesmo losango sobre um quadriculado branco e cinza gravado no arquivo; ela é inteiramente opaca. Ambas têm 128 × 128 pixels. São formas de demonstração, sem marca, produto ou cliente reais.

Amostra A · área transparente

O losango é opaco; o fundo aparece ao redor.

Fundo claro

Fundo grafite

Amostra B · quadriculado gravado

O quadrado branco e cinza permanece sobre os dois fundos.

Fundo claro

Fundo grafite

Como comparar e limite

Use os arquivos das amostras, não uma captura da visualização. São formas próprias de 128 × 128 pixels, sem marca ou cliente reais. Não representam tratamento de fotografia ou teste de um editor comercial.

Descrição da figura

A comparação tem duas colunas de fundo, claro e grafite, e duas linhas de arquivos. A amostra A é um PNG próprio com losango laranja opaco e área transparente ao redor. Ao compor esse arquivo sobre branco, o branco aparece; sobre grafite, aparece o grafite. A amostra B contém o mesmo losango sobre um quadriculado branco e cinza inteiramente opaco. O quadriculado continua aparecendo nos dois fundos. Cada fonte tem 128 por 128 pixels e foi ampliada igualmente para a comparação, sem mudar os valores de opacidade. A figura não é uma captura de editor nem demonstra tratamento de uma fotografia ou arquivo de cliente. As amostras geométricas foram criadas para este artigo.

Na comparação, A permite ver o fundo claro ou grafite ao redor do losango. Em B, o quadrado quadriculado continua aparecendo nos dois fundos. Isso acontece porque B guarda essas cores como parte da imagem. Alterar apenas o fundo da composição não apaga os pixels opacos do arquivo.

As amostras A e B foram produzidas e conferidas para esta demonstração. Você pode abrir a amostra A, com área transparente, e abrir a amostra B, com quadriculado opaco. Salve os arquivos de imagem para testar; uma captura de tela pode incorporar o fundo da visualização e mudar o que você está conferindo.

A capa usa um acetato como metáfora física ilustrativa. Ela ajuda a reconhecer o assunto, mas não demonstra um arquivo PNG nem uma remoção de fundo. A conferência digital deste exemplo está nas amostras e na comparação interna.

Faça a conferência em uma cópia e reabra a exportação

Em uma ferramenta que permita compor imagens sobre fundos, crie uma área clara e coloque o PNG sobre ela. Repita com um fundo escuro ou com a cor real do destino. Mantenha o arquivo acima do fundo e observe a área que deveria estar vazia, sem alterar sua opacidade global para fazer o retângulo desaparecer.

A redução da opacidade do elemento inteiro também afeta o assunto que deveria permanecer visível. Ela não equivale a remover somente o fundo indesejado. Na amostra B, por exemplo, apagar o quadriculado exige tratar o conteúdo do arquivo, preservando o losango, e conferir uma nova exportação.

Depois de exportar conforme o recurso de transparência da ferramenta, reabra o arquivo salvo e repita o teste. Se você verificou apenas o documento de trabalho, ainda pode ter escolhido uma saída que incorporou um fundo. Os nomes dos controles variam; use a documentação do editor efetivamente adotado.

Examine bordas e espaços internos antes de aprovar

Confira se sobraram contornos claros, áreas opacas entre partes do desenho ou cortes no assunto. Use o fundo real e o tamanho de aplicação, além de uma ampliação que ajude a localizar o defeito. O contorno pode parecer aceitável sobre branco e se tornar visível sobre grafite.

Não elimine toda região clara por rotina. Um produto, uma letra ou uma área interna do desenho pode precisar continuar branco. Combine o que deve ser preservado com quem responde pela peça. Se a correção exigir recuperar detalhes, volte ao original adequado, em vez de tentar reconstruir o assunto a partir de uma exportação pequena.

Na entrega de uma identidade, consulte também o guia de organização e conferência dos arquivos do logotipo. Transparência é uma das condições de uso; versão, dimensões, contraste e compatibilidade continuam exigindo suas próprias verificações.

Confira o arquivo e a página como etapas diferentes

Se a amostra transparente funciona na composição de teste, mas aparece com um fundo no site, investigue qual arquivo foi publicado e como o elemento está sendo apresentado. Um fundo pode pertencer ao quadro que contém a imagem. Compare a mídia efetivamente usada antes de refazer o recorte.

Registre a versão conferida, o destino e o resultado. Quando houver conversão de formato ou geração de outras versões no processo de publicação, confira a variante efetivamente exibida. Não apresente o teste local de um PNG como prova automática de que todas as versões do site preservaram a transparência.

Arquivo, versão e procedência:
Destino e tamanho de uso:
Área que deve ficar transparente:
Partes claras e detalhes que devem ser preservados:
Teste sobre fundo claro e resultado:
Teste sobre fundo escuro ou cor do destino e resultado:
Quadriculado é visualização do editor ou conteúdo gravado? Evidência:
Bordas, espaços internos e assunto conferidos:
Exportação reaberta e formato efetivo:
Arquivo ou variante publicada no destino:
Fundo do próprio elemento da página examinado, quando pertinente:
Pendência, responsável e nova conferência:

Perguntas frequentes sobre PNG transparente

Todo arquivo PNG tem fundo transparente?

Não. O formato admite transparência, mas o arquivo pode ser totalmente opaco. Confira a área que deveria estar vazia sobre fundos diferentes.

O quadriculado prova que o fundo foi removido?

Ele pode ser uma ajuda visual do editor ou estar gravado na imagem. No exemplo B, o quadriculado é conteúdo opaco e continua aparecendo sobre outro fundo.

Posso usar uma captura de tela no lugar do PNG original?

Para conferir transparência, use o arquivo de imagem. Uma captura pode incorporar o fundo mostrado pelo visualizador e deixar de representar a transparência do original.

Se funcionar no editor, o teste já terminou?

Reabra a exportação e confira também o arquivo ou variante efetivamente publicado no destino. O documento de trabalho e o resultado apresentado na página são etapas diferentes.

Se a equipe recebe imagens que não funcionam nos destinos previstos, converse conosco sobre a organização da produção visual. Podemos ajudar a definir entregas e critérios de conferência. Criação, tratamento de imagens e implantação precisam ter escopos e responsabilidades combinados.