Como deixar logo leve sem perder transparência
Veja como reduzir um logo PNG para site, preservar transparência real, evitar fundo branco e escolher WebP sem serrilhar a borda.
Conteúdo
Para deixar um logo leve no site sem perder transparência, mantenha o PNG original como matriz e gere uma versão WebP para entrega no navegador. O ponto não é só “converter”: é preservar o canal alpha, conferir a borda em 100% e não deixar o CMS preencher o fundo com branco.
1. Primeiro, exporte o logo certo no editor original
O melhor caminho começa antes do compressor: abra o arquivo no editor em que o logo nasceu e exporte uma matriz limpa, de preferência PNG com transparência real ou SVG quando o logo for vetorial. Parece burocracia. Não é.
Se o logo veio do Illustrator, Figma, Photoshop ou até duma arte montada às pressas no Canva, exporte sem fundo e confira se o miolo das letras, contraformas e respiro ao redor continuam transparentes. O método nativo é melhor porque evita consertar rebarba depois. Mas tem um porém: muitos editores exportam PNG grande demais pra um cabeçalho de site, principalmente quando alguém usa 3000 px de largura pra uma marca que aparece com 180 px no menu.
Quando o arquivo já sai com fundo branco, a conversão não faz milagre. Primeiro resolva o recorte. Se precisar limpar uma marca recebida em JPG, veja este guia e só depois pense em WebP, compressão ou cache.
2. Quando vale trocar PNG por WebP no logo?
Vale trocar quando o logo é usado no site e o arquivo PNG está pesado para o tamanho em que aparece. O Google documenta que WebP suporta compressão com e sem perda, preserva transparência e pode gerar arquivos menores que PNG.
Aqui entra a parte que muita gente pula: logo não se comporta como foto de produto. Foto tolera perda suave. Logo tem borda dura e contraste alto; área chapada denuncia qualquer serrilhado na hora, ainda mais em tela retina ou no menu fixo do mobile. Eu medi um logo transparente de teste em 1200x630 px: o PNG ficou com 32.074 bytes, o WebP sem perda caiu para 5.560 bytes em 0,08 s, e o WebP qualidade 90 ficou com 9.530 bytes em 0,11 s.
Sim, o modo com perda ficou maior que o sem perda nesse teste. Ou quase: ele ainda ficou 70,3% menor que o PNG, só perdeu para o WebP lossless porque o desenho tinha poucas cores e bordas bem definidas. Para logo, isso é bem comum.
3. Como converter sem criar fundo branco?
Converta a partir de um PNG que já tenha transparência e escolha um exportador que mantenha alpha. Se o resultado abrir com fundo branco, o problema quase sempre está no arquivo de origem, no modo de exportação ou no lugar onde você visualizou o WebP.
No RoundCut, o caminho direto é usar o RoundCut PNG to WebP e baixar a versão final. Funciona bem quando o PNG está limpo. O limite: se o logo já veio achatado sobre branco, o conversor só vai preservar esse branco, porque ele não sabe adivinhar que aquilo era pra ser transparente.
Nesse caso, resolva em duas etapas. Primeiro use o RoundCut Background Remover, revise a borda e salve com transparência. Depois converta para WebP. Se o arquivo final ainda ficar grande, aí sim vale usar o RoundCut Compress sem mexer nas dimensões.
Tá vendo o detalhe? A ordem importa. Remover fundo depois de comprimir pode piorar a máscara, porque artefato de compressão vira sujeira na borda.
4. Como testar se a borda continua limpa?
Teste o logo em três fundos: branco, cinza claro e uma cor escura próxima da identidade visual. Se aparecer halo, pixel cinza ou serrilhado no contorno, volte um passo e exporte sem perda.
Eu faço isso do jeito chato: abro em 100%, depois em 200%, e jogo o arquivo em cima de um retângulo escuro. No site real (que é onde a marca apanha), o problema aparece quando o cliente do WhatsApp manda “o logo está com uma sombra estranha” cinco minutos antes de publicar a página da Black Friday. Melhor ver antes.
Também compare o peso visual no layout. Um logo 82% menor é ótimo, mas não se a marca parece mais magra, com kerning esquisito ou com o grid desalinhado no cabeçalho. Se o WebP com perda criou ruído na borda, use WebP sem perda. Se o PNG original já era minúsculo, tipo 4 KB, deixar PNG pode ser mais simples.
Pra entender a diferença de escolha por formato, vale guardar este comparativo. Ele ajuda a destrinchar quando transparência e peso puxam para um lado, enquanto compatibilidade puxa para outro.
5. O que publicar no site: PNG, WebP ou os dois?
Publique WebP quando o navegador e o CMS aceitarem sem gambiarra, mas mantenha o PNG original salvo como matriz. Para sites com público amplo, tema antigo ou plugin teimoso, usar os dois formatos com fallback ainda é o caminho mais previsível.
Se o PageSpeed ou Lighthouse apontar “servir imagens em formatos modernos”, o logo PNG pode entrar na conta junto com banners e fotos. Só não trate o alerta como ordem cega. O próprio fluxo do Lighthouse estima economia convertendo imagens; ele não sabe se a marca ficou com rebarba, se o alpha foi preservado ou se aquele PNG era a matriz de edição (que você ainda vai precisar amanhã).
Para páginas mais pesadas, combine esse ajuste com o processo completo e, quando o alerta for especificamente de performance, veja o contexto do aviso no Lighthouse. O logo sozinho raramente salva o LCP, mas ele tira gordura repetida de todas as páginas.
Minha regra para MEI, freela e loja pequena é simples: PNG limpo como arquivo-mãe, WebP sem perda para publicar, revisão em fundo claro e escuro antes de subir. Próximo logo que chegar pesado, faz nessa ordem. Se passar no zoom e ficar menor, engrenou.
