WebP, PNG ou JPG: qual formato o seu site deve usar?

WebP vs PNG depende de onde a imagem vai parar. Em um site, o WebP geralmente vence: o Google informa que o WebP sem perdas é cerca de 26% menor que o PNG, com suporte a transparência, e todos os principais navegadores atuais o exibem. Para arquivos que você manda por e-mail, sobe em formulários ou envia a outras pessoas, PNG e JPG são mais seguros, porque o suporte fora dos navegadores ainda é irregular.

O que é o formato WebP?

WebP é um formato de imagem desenvolvido pelo Google, anunciado pela primeira vez em 2010. Um único formato cobre várias funções que antes exigiam arquivos diferentes:

• Compressão com perdas para fotos, parecida com a do JPG.
• Compressão sem perdas para gráficos e capturas de tela, parecida com a do PNG.
• Transparência (um canal alfa) nos dois modos.
• Animação, como substituto mais leve do GIF.

Os arquivos terminam em .webp. Chrome, Edge, Firefox e Safari exibem esses arquivos, com o Safari aderindo na versão 14. Qualquer visitante com um navegador atualizado vê imagens WebP sem você precisar fazer nada especial.

Você provavelmente já esbarrou no WebP. Muitos sites o entregam automaticamente, e é por isso que uma imagem salva de uma página às vezes baixa como .webp, mesmo parecendo uma foto comum. Nosso guia sobre o que é um arquivo WebP explica como abrir e editar esses arquivos.

WebP vs PNG: qual é menor e quando usar cada um

Pelos números do Google, o WebP sem perdas é cerca de 26% menor que o PNG. Os dois são sem perdas, então você tem os mesmos pixels em menos espaço. Para gráficos com transparência, o WebP com perdas pode ir bem além: o Google diz que ele normalmente gera arquivos cerca de três vezes menores que o PNG equivalente.

Use WebP em vez de PNG quando:

• A imagem fica no seu próprio site, como um logotipo, ilustração, recorte de produto ou captura de tela.
• Você quiser transparência sem o peso de um PNG.
• A velocidade da página importar e a imagem for grande.

Fique com o PNG quando:

• Você vai enviar o arquivo para outra pessoa, anexá-lo a um documento ou subi-lo em um formulário que lista os tipos aceitos.
• Você precisar de uma cópia mestre para editar em um software que pode não abrir WebP.
• O gráfico for um logotipo ou ícone que você poderia entregar como SVG, que muitas vezes é ainda menor e fica nítido em qualquer tamanho.

O WebP com perdas e com transparência combina bem com recortes de produtos e ilustrações de bordas suaves. Para capturas de tela com precisão de pixel e mockups de interface, o WebP sem perdas mantém o texto nítido, igual ao PNG. Saiba mais sobre os pontos fortes do PNG em o que é um arquivo PNG.

WebP ou JPG para fotos

Para fotos, o Google mediu o WebP com perdas entre 25 e 34% menor que JPGs comparáveis, com a mesma nota de qualidade SSIM. Em uma página com uma dúzia de fotos de produto ou uma imagem de destaque grande, isso soma e resulta em um carregamento mais rápido, principalmente com dados móveis.

O JPG ainda tem duas vantagens. Ele abre em qualquer lugar, de visualizadores de fotos antigos a impressoras, e é a resposta segura para qualquer portal de upload. Além disso, os codificadores de JPG modernos são bons, então um JPG bem comprimido nas dimensões certas chega bem perto. Se você só puder fazer uma coisa, dimensionar a foto corretamente vale mais do que trocar de formato. Uma foto de 4000 pixels exibida com 800 pixels de largura desperdiça muito mais bytes do que a escolha do formato.

Uma abordagem prática para um site: guarde os originais em JPG ou PNG e publique versões WebP dimensionadas para a largura de exibição. A comparação mais ampla entre PNG e JPG ajuda na hora de escolher o formato do arquivo mestre.

Comparação rápida

• Tamanho do arquivo na web: o WebP geralmente é o menor, depois o JPG para fotos ou o PNG para gráficos.
• Transparência: WebP e PNG sim, JPG não.
• Animação: WebP sim, PNG e JPG não (use GIF ou vídeo).
• Compatibilidade fora dos navegadores: JPG é o melhor, PNG vem logo atrás, WebP é o mais fraco em apps antigos e formulários de upload.
• Edição sem perdas: PNG ou WebP sem perdas.

Como converter PNG ou JPG em WebP

Para poucos arquivos, uma ferramenta no navegador é o caminho mais rápido. O conversor de imagem para WebP funciona localmente no navegador, então as imagens não são enviadas para lugar nenhum.

1. Redimensione antes se a imagem for maior do que o tamanho em que será exibida. A ferramenta Redimensionar imagem define uma largura exata e mantém a proporção.
2. Abra o conversor de WebP e adicione seus arquivos JPG ou PNG.
3. Converta e baixe. Confira se as áreas transparentes continuam transparentes e se o texto das capturas de tela está nítido.
4. Se o WebP ainda estiver mais pesado do que você quer, comprima de novo com um tamanho alvo em KB.
5. Envie o WebP para o seu site e atualize as referências das imagens.

Para fotos, uma configuração de qualidade com perdas entre 75 e 85 é um bom ponto de partida. Compare o resultado com o original em tamanho real e só baixe mais a qualidade se não notar diferença.

Muitos sistemas de gerenciamento de conteúdo e CDNs de imagem criam cópias WebP automaticamente. Se o seu faz isso, talvez você só precise enviar um bom JPG ou PNG e deixar o resto com ele.

Como verificar se o seu site está entregando WebP

Seu CMS ou CDN pode dizer que cria WebP, mas vale confirmar. No Chrome ou no Edge, abra a página, pressione F12 para abrir as ferramentas de desenvolvedor e vá para a guia Rede. Recarregue a página e filtre por Img. A coluna Tipo mostra o formato em que cada imagem chegou, e a coluna Tamanho mostra quantos bytes ela ocupou.

Se ainda aparecerem arquivos JPG ou PNG grandes ali, as cópias WebP não estão sendo entregues. Causas comuns são um plugin de cache entregando HTML antigo, imagens adicionadas por código personalizado que passa por fora do CMS ou um tema com URLs de imagem fixas no código. Corrija essas páginas primeiro, começando pelas imagens mais pesadas.

Todas as imagens do seu site devem ser WebP?

A maioria pode ser. Algumas exceções valem a pena conhecer:

• Logotipos e ícones simples costumam ficar melhores como SVG.
• Arquivos que as pessoas devem baixar, como uma foto de press kit ou um gráfico para imprimir, são mais amigáveis em JPG ou PNG.
• Imagens de compartilhamento em redes sociais (a imagem Open Graph mostrada quando um link é compartilhado) ficam mais seguras em JPG ou PNG, já que você não controla todos os apps que as leem.
• Se você precisa dar suporte a um navegador muito antigo, entregue uma alternativa em JPG ou PNG com o HTML picture .

Você também pode ver o AVIF sendo citado. É um formato mais novo, que pode ser ainda menor que o WebP e tem amplo suporte nos navegadores atuais. O WebP continua sendo o padrão mais fácil porque mais ferramentas e plataformas o aceitam.

Como abrir ou converter um arquivo WebP que você baixou

As versões atuais do Fotos do Windows e da Pré-Visualização do Mac abrem arquivos WebP, e qualquer navegador exibe um se você arrastá-lo para uma aba. O problema começa quando você sobe o arquivo em algum lugar que só aceita JPG ou PNG, ou o edita em um programa mais antigo.

A solução é uma conversão rápida. O conversor de WebP para PNG ou JPG lida com arquivos avulsos ou lotes. Escolha PNG se a imagem tiver transparência ou texto nítido, e JPG para uma foto em que você quer um arquivo menor. Renomear a extensão não converte nada, então sempre exporte uma cópia de verdade.

Perguntas frequentes