WebP versus PNG versus JPG: qual formato usar nas suas imagens?
"Use WebP para tudo" é o conselho que você mais vai ouvir, e ele está errado com frequência suficiente para fazer diferença. Os três formatos comprimem de maneiras fundamentalmente diferentes, e o melhor depende do conteúdo da imagem — às vezes com uma diferença de várias vezes no tamanho. Veja como cada um funciona e como decidir para cada arquivo.
Como cada formato comprime
JPG: com perdas, otimizado para fotografias
JPG divide a imagem em blocos de 8×8, converte cada um em componentes de frequência e descarta os detalhes de alta frequência que seus olhos têm menos chance de perceber. O controle de qualidade define a intensidade desse descarte. Isso funciona muito bem em fotografias, em que os detalhes são finos e irregulares e pequenos erros se escondem no ruído.
Ele funciona mal em qualquer imagem com bordas nítidas. Uma linha preta sobre branco é pura informação de alta frequência, exatamente o que o formato descarta, então surge o halo característico ao redor de textos e contornos. JPG também não tem canal alfa — não um limitado, nenhum. Salve uma imagem transparente como JPG, e a transparência será substituída permanentemente por uma cor sólida, normalmente preta ou branca.
PNG: sem perdas, otimizado para gráficos chapados
PNG nunca descarta dados de pixels. Ele prevê cada pixel a partir dos vizinhos, armazena as pequenas diferenças e processa o resultado com DEFLATE. Sequências longas de pixels idênticos ou quase idênticos são comprimidas a quase nada, por isso gráficos de cores chapadas, capturas de interfaces, desenhos de linhas e pixel art diminuem tanto.
O formato tem dois modos que vale distinguir. PNG truecolor armazena cor completa de 24 bits e alfa opcional. PNG com paleta (PNG-8) armazena um índice em uma tabela de até 256 cores, então cada pixel ocupa um byte em vez de quatro. Para gráficos planos que realmente usam poucas cores, o modo de paleta gera arquivos muito menores e sem nenhuma perda. A maioria das pessoas nunca o utiliza, e é por isso que o PNG às vezes supera o WebP com folga.
WebP: os dois, em um só formato
WebP tem dois modos separados que compartilham uma extensão de arquivo. WebP com perdas usa previsão por blocos vinda da codificação de vídeo — normalmente produz arquivos de 20–30% menores que JPG com qualidade percebida comparável. WebP sem perdas usa um esquema diferente, com previsão mais sofisticada que PNG, e normalmente fica de 20–30% menor que um PNG truecolor.
O ponto crucial é que os dois modos aceitam alfa. Essa é a verdadeira vantagem do WebP: antes dele, uma imagem transparente precisava ser PNG, o que significava sem perdas e, portanto, grande. WebP com perdas e alfa permite comprimir uma foto recortada da mesma forma que uma foto comum.
A comparação em resumo
| JPG | PNG | WebP | |
|---|---|---|---|
| Compressão | Somente com perdas | Somente sem perdas | Com ou sem perdas |
| Canal alfa | Nenhum | Sim, 8 bits | Sim, nos dois modos |
| Ideal para | Fotografias | Gráficos planos, pixel art, capturas de tela | Fotos na web, fotos transparentes |
| Fraco em | Texto, desenhos de linhas, transparência | Fotografias (arquivos muito grandes) | Arte plana com poucas cores versus PNG com paleta |
| Animação | Não | APNG, suporte irregular | Sim |
| Salvamentos repetidos | Perde qualidade a cada vez | Seguro | Perde qualidade no modo com perdas |
| Suporte dos navegadores | Universal | Universal | Universal desde aproximadamente 2020 |
| Ferramentas fora do navegador | Em toda parte | Em toda parte | Bom, mas não garantido |
Escolhendo conforme o conteúdo da imagem
Fotografias, sem transparência
WebP com perdas em qualidade 80 é a menor opção razoável, com JPG em qualidade 80 como alternativa compatível. Ambos funcionam bem; o WebP normalmente é um quarto menor. Um recurso com negociação de conteúdo <picture> elemento que serve WebP com JPG como alternativa oferece os dois, embora em 2026 essa alternativa seja principalmente uma precaução extra.
Gráficos planos, logotipos, pixel art, capturas de interface
PNG, e experimente o modo de paleta. É aqui que a regra "WebP para tudo" mais falha. Um logotipo de doze cores salvo como PNG com paleta pode ter poucos kilobytes; o mesmo logotipo em WebP com perdas na qualidade 80 costuma ser maior, porque a codificação com perdas gasta bits descrevendo detalhes por bloco que uma paleta codifica sem custo adicional — e ainda acrescenta artefatos a regiões perfeitamente chapadas. WebP sem perdas é competitivo e às vezes ganha, mas a diferença é pequena o suficiente para valer a pena exportar os dois e comparar.
Sprites e qualquer coisa que precise de alfa
PNG. É o formato que qualquer engine de jogos, editor e fluxo de produção de assets lê sem dificuldade. Ele é sem perdas, então edições repetidas não acumulam danos, e os sprites são pequenos o bastante para que o tamanho do arquivo raramente seja um limite. WebP sem perdas é um formato de distribuição razoável se sua engine o aceitar; de qualquer forma, mantenha o PNG como cópia de trabalho. Nunca JPG — sem alfa, seu sprite cuidadosamente recortado chega com uma caixa branca ao redor.
Fotografias com transparência
Esse é o território do WebP com perdas, e ele preenche uma lacuna real de capacidade. Uma foto de produto recortada sobre fundo transparente em PNG pode ter 800KB; em WebP com perdas e alfa na qualidade 80, pode ficar abaixo de 100KB sem diferença visível. PNG é a única alternativa se você precisar de uma, e será várias vezes maior.
Dois exemplos que vale conhecer
Números concretos facilitam entender as vantagens e desvantagens. Dois casos de processos reais de otimização:
- Um cartão para redes sociais em PNG de 606KB recodificado como JPG de 81KB. O cartão tinha um fundo fotográfico com texto sobreposto, exportado como PNG porque esse é o padrão da maioria das ferramentas de design. PNG não é adequado para conteúdo fotográfico, então o arquivo era enorme; em JPG na qualidade 82, a diferença visível é nula no tamanho em que alguém o vê. Isso representa uma redução de 87% apenas mudando um menu suspenso.
- As imagens de fundo da página diminuíram cerca de 57% ao converter PNG em WebP. Eram imagens grandes, suaves e cheias de degradês — conteúdo suave, sem bordas definidas nem transparência, exatamente o que a compressão com perdas trata melhor. Mesmo resultado visual, menos da metade dos bytes.
As duas vantagens vieram de adequar o formato ao conteúdo, em vez de aplicar uma regra geral. Faça o mesmo teste em um conjunto de ícones de cores planas, e PNG teria vencido nas duas vezes.
A exceção das imagens para redes sociais
Um lugar para evitar WebP deliberadamente: imagens Open Graph e cartões do Twitter. Essas URLs são buscadas por rastreadores e robôs de prévia de links — Slack, Discord, iMessage, WhatsApp, LinkedIn, leitores RSS, navegadores dentro de aplicativos e muitas ferramentas internas —, não pelos navegadores modernos descritos nas estatísticas de suporte a WebP.
A compatibilidade nesse conjunto é significativamente pior, e a falha é ruim de uma maneira específica: em vez de um erro visível, seu link simplesmente aparece sem imagem, e você descobre semanas depois, quando alguém comenta. O custo de usar JPG é talvez 30% mais bytes em um arquivo buscado pela infraestrutura, não por usuários com conexões limitadas.
O mesmo cuidado vale para e-mail. Os clientes de e-mail têm seu próprio universo de compatibilidade, e vários ainda não aceitam WebP. Anexos e imagens destinados a e-mail devem ser JPG ou PNG.
Um método para decidir
- Precisa de transparência? Se não, vá para a etapa 3. Se sim, JPG está completamente descartado.
- A imagem transparente é fotográfica? Conteúdo fotográfico com alfa → WebP com perdas. Arte chapada ou sprites com alfa → PNG.
- É uma fotografia? Sim → WebP com perdas, ou JPG quando a compatibilidade importa. Não → continue.
- Cores planas e bordas nítidas? Exporte PNG com paleta e WebP sem perdas, compare os dois arquivos e use o menor. Não presuma o resultado.
- É um cartão para redes sociais, uma imagem de e-mail ou um recurso para um processo desconhecido? Ignore todas as orientações acima e use JPG ou PNG.
A etapa 4 é a que as pessoas pulam. Exportar dois arquivos e comparar a quantidade de bytes leva quinze segundos e é mais confiável que qualquer regra prática, porque a resposta realmente depende da imagem específica.
Nosso Recortador de folhas de sprites exporta para PNG, JPG ou WebP com controle de qualidade para os formatos com perdas, então você pode recortar uma folha uma vez e experimentar dois formatos sem sair da página. Para sprites, PNG continua sendo o padrão seguro — o formato de exportação importa muito mais para os assets finais da web do que para os quadros intermediários.
Perguntas frequentes
Já é seguro usar WebP sem um formato alternativo?
Para navegadores, na prática, sim — todos os navegadores atuais o aceitam desde aproximadamente 2020, quando o Safari adicionou suporte. As lacunas restantes estão fora dos navegadores: aplicativos antigos de computador, alguns clientes de e-mail, robôs de rastreamento e prévia de links e certos validadores de envio de CMS. Avalie quem busca o arquivo, não apenas a tabela de suporte dos navegadores.
Converter PNG para WebP pode aumentar o arquivo?
Sim, com frequência, para gráficos chapados com poucas cores — especialmente em comparação com um PNG com paleta. WebP com perdas tem um mínimo de bits gastos por bloco, enquanto um PNG com paleta com longas sequências de uma cor se comprime a quase nada. Sempre compare a saída real, em vez de confiar na afirmação geral de que WebP é menor.
E quanto a AVIF e JPEG XL?
AVIF comprime melhor que WebP, especialmente em baixa qualidade, e hoje tem amplo suporte nos navegadores, embora a codificação seja mais lenta e as ferramentas fora dos navegadores sejam mais limitadas. JPEG XL é tecnicamente forte, mas seu suporte nos navegadores tem sido instável. WebP continua sendo o padrão pragmático; vale a pena adicionar AVIF como primeira <source> em um elemento picture quando os bytes realmente importam.
Salvar um JPG repetidamente realmente reduz sua qualidade?
Sim, quando a imagem é decodificada e recodificada, e o mesmo vale para WebP com perdas. Cada passagem quantiza dados já quantizados, e os artefatos se acumulam. Guarde um original sem perdas — PNG ou o formato nativo do editor — e exporte versões com perdas a partir dele, em vez de editar diretamente o arquivo com perdas.
Converta das duas formas e compare os bytes
A etapa 4 acima é a que vale executar de verdade, em vez de adivinhar. O Conversor de imagens converte entre PNG, JPG e WebP em todas as direções, em lotes, e preenche o fundo quando o alfa seria perdido na conversão para JPG. Exporte o mesmo arquivo duas vezes, compare os tamanhos e entregue o menor. Se o formato já está certo e você só precisa deixá-lo mais leve, o Compressor de imagens é a outra parte desse processo.
Abrir Conversor de imagensAbrir Compressor de imagens