SVG vs. PNG vs. WebP: Qual é o Melhor para Gráficos na Web?
A Resposta Rápida (e Por Que Ela é Complicada)
Não há um vencedor único aqui. SVG, PNG e WebP têm, cada um, uma função específica, e escolher o errado vai custar caro — em arquivos gigantes, qualidade de imagem ruim ou dores de cabeça com compatibilidade de navegadores. Servir um logo como um PNG de 340 KB quando poderia ser um SVG de 4 KB é um verdadeiro imposto de desempenho para seus usuários. Por outro lado, tentar salvar uma fotografia detalhada como SVG não é apenas um erro teórico; é completamente inutilizável, já que o SVG não tem como representar os milhões de pixels de uma foto. Este artigo analisa cada formato com base no que realmente importa para projetos web: como eles escalam, o tamanho final do arquivo, o suporte dos navegadores, a transparência e as tarefas específicas onde cada formato se destaca. Também abordaremos fluxos de trabalho de conversão concretos, incluindo o que você pode fazer com o CocoConvert e onde talvez precise procurar outras ferramentas.
SVG: A Ferramenta Certa para Logos, Ícones e Ilustrações
SVG significa Scalable Vector Graphics (Gráficos Vetoriais Escaláveis), mas o que isso realmente significa é *sem pixels*. É um formato baseado em XML que usa caminhos e formas matemáticas para descrever uma imagem. Por ser apenas matemática, um SVG renderiza com uma nitidez perfeita em qualquer tamanho, desde um pequeno favicon de 16×16 até um monitor 5K. Isso o torna a única escolha sensata para logos, ícones, gráficos e qualquer ilustração construída com linhas e formas limpas. Os tamanhos de arquivo para SVGs simples são incrivelmente pequenos. O logo de uma empresa típica, uma vez otimizado, pode ter apenas 2–8 KB. Ao passá-lo por um otimizador como o SVGO (que o CocoConvert usa automaticamente para exportações em SVG), muitas vezes você pode reduzir outros 20–40% removendo o lixo do editor, combinando caminhos e reduzindo a precisão decimal de seis para duas casas. É aqui que o SVG se torna realmente poderoso: ele suporta interatividade e animação através de CSS e JavaScript, algo que PNG e WebP nem chegam perto. Você pode mudar a cor de um ícone ao passar o mouse com uma única linha de CSS: `svg path { fill: #0057ff; }`. Esse tipo de flexibilidade muda o jogo para componentes de UI modernos. Mas as limitações são reais. Nem pense em usar SVG para fotografias. Tentar exportar uma foto como SVG resultará em um arquivo gigantesco e lento para carregar ou em uma bagunça posterizada e abstrata. Além disso, como os arquivos SVG são apenas texto, eles revelam seus caminhos de origem — o que não é bom se sua ilustração for uma arte proprietária que você não quer que seja facilmente copiada. Finalmente, SVGs extremamente complexos, como um mapa detalhado com milhares de nós individuais, podem, na verdade, ser mais lentos para um navegador renderizar do que uma imagem raster bem comprimida.
PNG: Qualidade Sem Perdas Quando Você Precisa de Cada Pixel
PNG, ou Portable Network Graphics, é um formato raster sem perdas. Isso significa que ele salva cada pixel exatamente como ele é, com zero artefatos de compressão. Essa fidelidade perfeita é o motivo pelo qual ele é o padrão para capturas de tela, mockups de UI e qualquer imagem contendo texto nítido, onde você precisa de precisão de pixel perfeita e transparência limpa. O canal alfa de 8 bits do PNG oferece 256 níveis de transparência, proporcionando bordas suaves e esfumaçadas. A contrapartida é o tamanho do arquivo. Uma captura de tela de 1200×800 como PNG pode facilmente ter de 800 KB a 1.2 MB. A compressão DEFLATE do PNG é sem perdas, mas não é muito agressiva. Para fotos, os PNGs são consistentemente de duas a quatro vezes maiores que JPEGs ou WebPs da mesma qualidade visual. O PNG realmente brilha em fluxos de trabalho que exigem múltiplas edições. Por ser sem perdas, você pode abrir, editar e salvar novamente um arquivo PNG cem vezes sem degradar sua qualidade. Qualquer um que já viu um JPEG se autodestruir em artefatos após algumas salvadas conhece essa dor. Se você está criando um ativo que outra pessoa editará mais tarde — como um elemento de UI para um desenvolvedor recortar — o PNG é o formato mais seguro para entregar. Você verá menções a 'PNG-8' e 'PNG-24'. O PNG-8 é limitado a 256 cores (como um GIF) e funciona para gráficos simples e chapados. O PNG-24 suporta 16 milhões de cores mais o canal alfa completo para transparência. A maioria das ferramentas usa PNG-24 como padrão. Ao exportar do CocoConvert, ele produzirá um PNG-24, a menos que a imagem de origem tenha uma paleta simples, caso em que ele pode usar automaticamente o PNG-8 para otimizar o tamanho do arquivo. A principal fraqueza do PNG é a falta de suporte nativo para animação. Embora existam PNGs animados (APNG), o suporte das ferramentas é irregular. Para animações, é melhor usar WebP ou, idealmente, uma animação SVG/CSS.
WebP: O Cavalo de Batalha da Compressão Moderna
Desenvolvido pelo Google em 2010, o WebP teve uma adoção lenta, mas finalmente se popularizou quando o Safari 14 adicionou suporte por volta de 2020. Em meados de 2026, todos os principais navegadores — Chrome, Firefox, Safari e Edge — suportam WebP, cobrindo cerca de 97% dos usuários globais, de acordo com dados do caniuse.com. O WebP é um pau para toda obra, suportando tanto compressão com perdas quanto sem perdas, transparência e até animação. Ele pode substituir efetivamente JPEG, PNG e GIF para a maioria dos usos na web. A compressão é a atração principal: imagens WebP com perdas são tipicamente 25–35% menores que JPEGs na mesma qualidade visual, enquanto WebPs sem perdas são cerca de 26% menores que PNGs. Esses não são apenas números de marketing; eles vêm de testes em larga escala do Google e são confirmados por benchmarks independentes. Vamos tornar isso prático. Uma imagem de destaque de 180 KB salva como JPEG pode se tornar um WebP com perdas de 130 KB com qualidade 80. Aumente para qualidade 85, e pode ter 145 KB — ainda menor, com detalhes ainda melhores. Você pode encontrar essas configurações nas opções de WebP do CocoConvert, no controle deslizante 'Qualidade de Saída'. Um valor entre 75 e 85 é um ótimo ponto de partida para fotos, enquanto você pode subir para 90+ para ativos de UI onde a nitidez é crítica. Claro, o WebP não é perfeito. Para começar, ele é estritamente para telas; sua falta de suporte a CMYK o torna inviável para fluxos de trabalho de impressão. Ele também teve problemas iniciais com softwares mais antigos — o Adobe Photoshop só ganhou suporte nativo no CC 2022. Para gráficos simples e chapados, sua vantagem sobre o PNG é mínima, e para logos e ícones, o SVG ainda é o rei indiscutível dos tamanhos de arquivo pequenos.
Frente a Frente: Benchmarks de Tamanho de Arquivo e Qualidade
Comparações abstratas só vão até certo ponto. Veja como os três formatos se comportam em dois casos de teste representativos. **Teste 1: O logo de uma empresa (cores chapadas, fundo transparente, 400×200 px)** - SVG (otimizado com SVGO): 3.8 KB - PNG-24: 12.4 KB - WebP sem perdas: 9.1 KB - WebP com perdas (qualidade 90): 7.2 KB (com leve formação de faixas de cor nas bordas nítidas) Para um logo, o SVG vence de lavada. O WebP sem perdas é uma boa segunda opção se o SVG não for uma possibilidade por algum motivo. O PNG é o maior, mas oferece fidelidade perfeita. **Teste 2: Uma fotografia de produto (colorida, sem transparência, 1200×800 px)** - SVG: Não aplicável (não consegue representar dados fotográficos de forma significativa) - PNG-24: 1.14 MB - JPEG (qualidade 85): 187 KB - WebP com perdas (qualidade 80): 134 KB - WebP com perdas (qualidade 75): 108 KB (uma leve suavidade visível em uma inspeção mais atenta) Para fotografias, o WebP é o vencedor claro em termos de tamanho de arquivo. Um PNG deste tamanho deve ser usado apenas como um arquivo mestre para edições futuras, nunca em uma página web ativa. Aqui está uma limitação prática do CocoConvert que você precisa saber: você não pode gerar uma versão WebP e um fallback em PNG em uma única tarefa de exportação. Você precisará executar duas conversões separadas e, em seguida, implementar o elemento HTML `<picture>` por conta própria para servir o formato correto. Essa é uma lacuna no fluxo de trabalho, e é melhor saber disso agora do que descobrir no meio do projeto.
Suporte de Navegadores, Fallbacks e o Elemento <picture>
SVG e PNG têm suporte universal em navegadores há mais de uma década. Você não precisa pensar em fallbacks. O WebP agora também é amplamente suportado, mas você pode encontrar lacunas se precisar dar suporte a usuários em navegadores corporativos antigos ou aplicativos legados com visualizações web incorporadas. A solução padrão é o elegante elemento HTML `<picture>`. Ele permite que você liste múltiplas fontes, e o navegador simplesmente escolhe a primeira que ele entende. ```html <picture> <source srcset="hero.webp" type="image/webp"> <img src="hero.png" alt="Product hero image"> </picture> ``` O navegador lê de cima para baixo, usando a primeira fonte suportada. Este padrão não adiciona nenhuma sobrecarga real e oferece os benefícios de desempenho do WebP com a confiabilidade sólida do PNG como uma rede de segurança. Para o SVG, a maior armadilha de compatibilidade não são os navegadores — são os clientes de e-mail. O suporte para SVG em e-mails HTML é um desastre; o Outlook no Windows simplesmente mostrará uma imagem quebrada. Sério, não use SVGs em templates de e-mail. Apenas use um PNG e poupe a si mesmo os tickets de suporte. Para páginas web e aplicativos, o SVG é perfeitamente seguro. Uma nota rápida sobre SVG e Content Security Policy (CSP): se você incorporar um SVG diretamente no seu HTML, ele herda o CSP da página. Se você o carregar como um arquivo externo através de uma tag `<img>`, ele não pode executar scripts. Isso é um recurso de segurança. Se o seu SVG precisa ser interativo com JavaScript, você deve incorporá-lo diretamente no HTML ou carregá-lo usando uma tag `<object>`.
Fazendo a Escolha Certa: Um Guia de Decisão
Depois de todos os benchmarks e ressalvas, a árvore de decisão prática é a seguinte: **Use SVG quando:** O gráfico é um logo, ícone, gráfico ou qualquer ilustração feita de formas e caminhos. Você tem um arquivo de origem vetorial de uma ferramenta como Illustrator, Figma ou Inkscape. Você precisa que ele tenha uma aparência nítida em todas as densidades de tela sem criar ativos @2x e @3x separados. Você quer controlar cores ou adicionar efeitos de hover com CSS. **Use PNG quando:** A imagem é uma captura de tela de UI ou contém texto nítido onde a compressão com perdas ficaria horrível. Você precisa de transparência e não pode usar WebP. O arquivo precisa ser um arquivo mestre sem perdas para edições futuras. Você está enviando ativos para uma campanha de e-mail ou para um cliente que pode não ter software de imagem moderno. **Use WebP quando:** A imagem é uma fotografia ou outro gráfico raster complexo para um site moderno. Sua principal prioridade é a melhor relação possível entre tamanho de arquivo e qualidade. Você pode implementar o elemento `<picture>` para fallbacks, ou seu CMS/CDN (como Cloudflare Images, Imgix ou Cloudinary) lida com isso para você, servindo WebP automaticamente para navegadores que o suportam. Para converter entre esses formatos no CocoConvert, basta enviar seu arquivo, escolher o formato de destino no menu suspenso e baixar. Se você estiver convertendo para WebP, pode ajustar o controle deslizante 'Qualidade de Saída' — o padrão de 85 é um bom ponto de partida para fotos. Para trabalhos em lote, como converter uma pasta inteira de PNGs para WebP, o plano Pro suporta até 50 arquivos de uma vez. A otimização de SVG é automática em todas as exportações de SVG, então não há nada para configurar. Há um caso em que nenhuma dessas opções é a melhor: animações. É hora de dizer: para uso em produção na web, o GIF está morto. Apesar de sua permanência cultural, ele cria arquivos de 3 a 5 vezes maiores que uma animação WebP. Para loops curtos e simples, use animações CSS (zero sobrecarga de imagem). Para gráficos de movimento vetoriais complexos, use uma animação Lottie/SVG. Use a animação WebP apenas como último recurso para conteúdo raster.