WebP vs PNG vs JPG: como escolher o formato de imagem certo
JPG é para fotos que precisam abrir em qualquer lugar, PNG é para pixels exatos, e o WebP faz os dois trabalhos na web com arquivos menores.
Escolher um formato de imagem se resume a três perguntas: o codificador pode descartar detalhes? A imagem precisa de áreas transparentes? Onde o arquivo vai ser aberto? JPG, PNG e WebP respondem a cada uma de um jeito. O WebP costuma ser a melhor escolha para imagens de um site, mas o PNG e o JPG ainda levam vantagem em alguns casos, e saber quais são evita logotipos borrados, fundos brancos em volta de recortes e formulários de upload que recusam o seu arquivo.
Os formatos lado a lado
| JPG (JPEG) | PNG | WebP | |
|---|---|---|---|
| Compressão | Com perdas | Sem perdas | Com ou sem perdas |
| Transparência | Não | Sim, canal alfa completo | Sim, nos dois modos |
| Animação | Não | Via APNG | Sim |
| Profundidade de cor | 8 bits por canal, na prática | Até 16 bits por canal | 8 bits por canal |
| Tamanho máximo | 65.535 × 65.535 pixels | Mais de 2 bilhões de pixels por lado | 16.383 × 16.383 pixels |
| Abre em | Praticamente tudo | Praticamente tudo | Todos os principais navegadores atuais; nem todo aplicativo ou formulário de upload |
| Ideal para | Fotos que precisam funcionar em qualquer lugar | Capturas de tela, interfaces, gráficos com bordas nítidas | A maioria das imagens de um site |
Com perdas e sem perdas: a diferença real
A compressão com perdas descarta detalhes que o olho dificilmente vai notar, e uma configuração de qualidade decide quanto. Ela combina com fotografias, em que ruído e degradês escondem pequenas mudanças. E prejudica texto, linhas finas e áreas de cor chapada, que ganham bordas suaves e manchas discretas. Cada novo salvamento perde um pouco mais, então sempre converta a partir do original, e não de um JPG anterior.
A compressão sem perdas preserva cada pixel exatamente. É a escolha certa para capturas de tela, diagramas, pixel art e qualquer coisa que você ainda vá editar. Em uma fotografia ela gera um arquivo bem maior, porque o ruído da câmera custa caro para ser guardado de forma exata.
O JPG é só com perdas e o PNG é só sem perdas. O WebP tem os dois modos em um único formato, e essa é a sua principal vantagem prática: uma foto e uma captura de tela podem ser WebP, cada uma comprimida do jeito adequado.
Quanto menor é o WebP?
O Google, que desenvolveu o formato, publica esta comparação: imagens WebP sem perdas são 26% menores que PNGs, e imagens WebP com perdas são 25–34% menores que JPEGs comparáveis com qualidade SSIM equivalente. São médias sobre as imagens de teste do Google, não uma promessa para cada arquivo.
Os seus resultados podem ser melhores ou piores. O FAQ do WebP do Google observa que um WebP pode ficar maior que o original, normalmente quando um PNG com poucas cores é convertido para WebP com perdas, ou quando uma imagem que já passou por compressão com perdas é salva como WebP sem perdas. O WebP com perdas também usa sempre subamostragem de croma 4:2:0, guardando a cor com metade da resolução horizontal e vertical do brilho, então bordas de vermelho ou azul saturado em gráficos podem parecer levemente borradas onde um PNG continua nítido. O caminho confiável é converter e comparar: o Conversor de Imagens mostra o tamanho original e o novo de cada arquivo, para você ver a economia real antes de ficar com o resultado.
Transparência e animação
O JPG não tem canal alfa. Converter um logotipo transparente para JPG preenche a área transparente com uma cor sólida; o conversor deste site usa branco. O PNG guarda o alfa completo sem perdas, o que deixa pesadas as fotos com transparência, como recortes de produtos. O WebP aceita alfa também no modo com perdas, então uma foto recortada pode manter as bordas suaves com uma fração do tamanho do PNG. É nesse caso que o PNG para WebP economiza mais.
Quanto à animação, o JPG não tem, o PNG tem a extensão APNG e o WebP já traz animação embutida. Segundo o Google, arquivos WebP animados podem ser menores que a mesma animação em GIF ou APNG. Para clipes longos ou complexos, um vídeo MP4 ou WebM sem som costuma ser mais leve que qualquer formato de imagem.
Qual formato usar
| Imagem | Use | Por quê |
|---|---|---|
| Fotos em um site | WebP, com perdas | A opção menor com amplo suporte |
| Fotos para e-mail, impressão ou formulários de upload | JPG | Abre em qualquer programa e passa em qualquer formulário |
| Capturas de tela com texto, mockups de interface | PNG ou WebP sem perdas | O texto fica nítido e nada borra |
| Logotipos e ícones | SVG se você tem os vetores; senão, PNG ou WebP | Mantém bordas nítidas e transparência |
| Foto de produto com fundo transparente | WebP, com perdas e alfa | Bordas suaves com uma fração do tamanho do PNG |
| Animação curta | WebP animado, ou MP4/WebM para clipes mais longos | Bem mais leve que GIF |
| Arquivos mestres que você vai editar de novo | PNG, ou o arquivo original da câmera | Sem perda de geração |
Migrar as imagens que você já tem é rápido: JPG para WebP para fotos, PNG para WebP para gráficos e recortes. Quando um WebP não abre em um software mais antigo, o WebP para JPG resolve, e o PNG para JPG reduz fotos que foram salvas como PNG por engano.
Suporte nos navegadores e fallback com picture
As versões atuais do Chrome, Edge, Firefox e Safari exibem WebP, então para a maioria dos sites um WebP em uma tag <img> comum é suficiente. Se você também precisa atender navegadores antigos, ou quer oferecer primeiro um formato mais novo, use o elemento <picture>. O navegador pega o primeiro <source> cujo tipo ele suporta e recorre ao <img> se nenhum servir; é ele que também leva o texto alternativo e as dimensões:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Harbour at sunset" width="1600" height="900">
</picture>Um servidor ou CDN pode fazer o mesmo trabalho sem marcação extra, olhando o cabeçalho Accept da requisição da imagem e devolvendo WebP quando ele aparece na lista. Se fizer isso, envie Vary: Accept para que os caches mantenham as versões separadas.
Onde entra o AVIF
O AVIF é baseado no codec de vídeo AV1 e é suportado pelas versões atuais do Chrome, Edge, Firefox e Safari. Muitas vezes gera arquivos menores que o WebP com qualidade visual parecida, mas a codificação é mais lenta e menos ferramentas, editores e formulários de upload o aceitam. Uma configuração comum é AVIF primeiro, WebP em segundo e JPG por último, como no exemplo acima. O conversor deste site consegue ler arquivos AVIF quando o seu navegador sabe decodificá-los, mas grava WebP, PNG, JPG e ICO, não AVIF.
Converter no navegador: um alerta sobre o Safari
Conversores que rodam no navegador desenham a imagem em um canvas e pedem ao navegador que a codifique. Chrome, Edge e Firefox conseguem codificar WebP dessa forma. O Safari exibe WebP, mas não consegue codificá-lo a partir de um canvas e devolve um PNG sem avisar; por isso, o conversor deste site para com uma mensagem em vez de salvar um PNG com nome .webp. No Mac, faça conversões para WebP no Chrome, Edge ou Firefox. No iPhone ou iPad, os outros navegadores em geral também usam o motor do Safari, então converta em um computador ou escolha PNG ou JPG.
Mais duas coisas valem a pena saber. No Chrome, qualidade 100 gera um WebP sem perdas, enquanto valores menores geram WebP com perdas; confirmamos isso inspecionando os arquivos codificados. E a codificação via canvas não copia metadados, então dados EXIF como o modelo da câmera e a posição de GPS ficam de fora do arquivo convertido.