WebP vs PNG e JPG: formatos modernos para a web

Na disputa WebP vs PNG e JPG, o WebP vence no seu próprio site: ele pode comprimir como um JPG ou sem perdas como um PNG, aceita transparência e gera arquivos menores com a mesma qualidade visual. Todos os navegadores atuais o aceitam. PNG e JPG ainda ganham em todo lugar fora do seu site: envios para Instagram e LinkedIn, anexos de e-mail, arquivos para clientes e gráficas. A regra prática é simples. Crie e guarde os originais em PNG e sirva WebP (ou AVIF) aos visitantes.

O que é o WebP

O WebP é um formato de imagem desenvolvido pelo Google e documentado no web.dev. Um formato só cobre o que antes exigia três: fotos com perdas como o JPG, gráficos sem perdas e com transparência como o PNG e animações curtas como o GIF. A economia vem de uma compressão mais inteligente, que prevê cada bloco de pixels a partir dos vizinhos e guarda só a diferença.

WebP vs PNG para gráficos e transparência

Para logotipos, imagens de interface e recortes, o WebP sem perdas mantém cada pixel como o PNG e costuma ser menor. O WebP com perdas e transparência é a vitória maior: um recorte de produto que precisa de uma borda suave e translúcida pode ficar com uma fração do tamanho do PNG, sem diferença visível.

Gradientes são a exceção que pede cuidado. Uma transição escura e suave pode formar faixas no WebP com perdas, como acontece no JPG. Se a sua imagem principal é quase só gradiente, compare o modo com perdas em alta qualidade com o sem perdas e pergunte-se se ela precisa mesmo ser uma imagem: um gradiente em CSS não custa download nenhum.

WebP vs JPG para fotos

Para fotografias, o WebP com perdas em qualidade de 75 a 80 costuma igualar um JPG em 85 sendo menor. A diferença se soma em páginas com muitas imagens: grades de produtos, portfólios, blogs. Em uma única foto principal o ganho é real, mas menos dramático, e acertar as dimensões em pixels importa mais do que o formato.

1. 1

   Primeiro o tamanho

   Exporte a foto no maior tamanho em que ela realmente aparece. Um topo de site de 1920×1080 nunca precisa de um original de 6000 pixels.

2. 2

   Escolha uma qualidade

   Comece o WebP com perdas em 80. Olhe pele, céus e cantos escuros com zoom de 100%, depois vá baixando até algo mudar e volte um passo.

3. 3

   Faça versões menores

   Exporte larguras de 640, 1280 e 1920 pixels para que os celulares baixem a pequena.

4. 4

   Sirva com srcset

   Deixe o navegador escolher a largura certa com srcset e sizes, como no código abaixo.

AVIF vs WebP

O AVIF é mais novo e costuma comprimir mais do que o WebP, sobretudo em fotografias e tons suaves. Ele é aceito em todos os principais navegadores atuais. Seus custos são a codificação mais lenta, o que importa se você converte imagens na hora, e menos ferramentas que o abrem. Muitos sites servem AVIF primeiro, WebP em segundo e JPG por último, e deixam o navegador usar o primeiro que entende.

<picture>
  <source type="image/avif" srcset="hero-1280.avif 1280w, hero-1920.avif 1920w" sizes="100vw">
  <source type="image/webp" srcset="hero-1280.webp 1280w, hero-1920.webp 1920w" sizes="100vw">
  <img src="hero-1920.jpg" alt="Evening light over the harbour" width="1920" height="1080" fetchpriority="high">
</picture>

Se você usa um framework ou uma CDN de imagens, ele pode fazer tudo isso sozinho a partir de um único original enviado. Confira o que ele gera antes de converter qualquer coisa à mão.

Onde PNG e JPG ainda ganham

As redes sociais convertem os envios sozinhas, e algumas rejeitam ou tratam mal o WebP. Os rastreadores de prévia de link também variam, então mantenha sua imagem Open Graph como PNG ou JPG de 1200×630. E um WebP enviado a um cliente muitas vezes abre no app errado ou não abre.

Como converter PNG em WebP

A ferramenta de linha de comando gratuita cwebp, do Google, converte um arquivo ou uma pasta inteira, e a maioria dos editores de imagem e ferramentas de design hoje exporta WebP direto.

# lossy, good for photos
cwebp -q 80 photo.png -o photo.webp

# lossless, good for logos and interface graphics
cwebp -lossless logo.png -o logo.webp

# a whole folder
for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

Seus arquivos originais de design podem continuar em PNG: o Gradiently exporta designs em PNG e JPG, que são as entradas certas para esta etapa e os arquivos certos para qualquer envio a redes sociais. Para entender a lógica dos ajustes de qualidade, leia compressão de imagem sem estragar gradientes; para o par mais antigo, PNG vs JPG; e para a lista completa de velocidade, otimização de imagens para a web.