WebP vs PNG e JPG: formatos modernos para a web

Na questão WebP vs PNG e JPG, o WebP ganha no teu próprio site: pode comprimir como um JPG ou sem perdas como um PNG, suporta transparência e produz ficheiros mais pequenos com a mesma qualidade visual. Todos os navegadores atuais o suportam. Onde o PNG e o JPG continuam a ganhar é em todo o lado fora do teu site: carregamentos no Instagram e no LinkedIn, anexos de email, ficheiros para clientes e gráficas. Por isso a regra prática é simples. Faz e guarda os originais em PNG, serve WebP (ou AVIF) aos visitantes.

O que é o WebP

O WebP é um formato de imagem desenvolvido pela Google e documentado em web.dev. Um só formato cobre o que antes exigia três: fotografias com perdas como o JPG, gráficos sem perdas com transparência como o PNG e pequenas animações como o GIF. A poupança vem de uma compressão mais inteligente, que prevê cada bloco de píxeis a partir dos vizinhos e guarda apenas a diferença.

WebP vs PNG para gráficos e transparência

Para logótipos, imagens de interface e recortes, o WebP sem perdas mantém cada píxel como o PNG e costuma ser mais pequeno. O WebP com perdas e transparência é o maior ganho: um recorte de produto que precisa de uma margem suave e translúcida pode ficar numa fração do tamanho do PNG sem diferença visível.

Os gradientes são a exceção que pede cuidado. Uma mistura escura e suave pode formar bandas em WebP com perdas, tal como no JPG. Se a tua imagem de cabeçalho é sobretudo gradiente, compara com perdas em alta qualidade contra sem perdas, e pensa se devia sequer ser uma imagem: um gradiente em CSS não custa nenhuma transferência.

WebP vs JPG para fotografias

Para fotografias, o WebP com perdas a uma qualidade de cerca de 75 a 80 costuma igualar um JPG a 85 sendo mais pequeno. A diferença soma-se em páginas com muitas imagens: grelhas de produtos, portefólios, blogues. Numa única fotografia de cabeçalho o ganho é real mas menos dramático, e acertar nas dimensões em píxeis importa mais do que o formato.

1. 1

   Primeiro o tamanho

   Exporta a fotografia no maior tamanho em que realmente é mostrada. Um cabeçalho de site de 1920×1080 nunca precisa de um original de 6000 píxeis.

2. 2

   Escolhe uma qualidade

   Começa com WebP com perdas a 80. Olha para a pele, os céus e os cantos escuros com zoom a 100% e depois vai baixando até algo mudar, e volta um passo atrás.

3. 3

   Faz versões mais pequenas

   Exporta larguras de 640, 1280 e 1920 píxeis para os telemóveis descarregarem a pequena.

4. 4

   Serve com srcset

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

AVIF vs WebP

O AVIF é mais recente e costuma comprimir mais do que o WebP, sobretudo em fotografias e tons suaves. É suportado em todos os grandes navegadores atuais. Os seus custos são uma codificação mais lenta, que pesa se converteres imagens em tempo real, e menos ferramentas que o abram. 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 usas uma framework ou uma CDN de imagens, ela pode fazer tudo isto automaticamente a partir de um só original carregado. Confirma o que ela produz antes de converteres o que quer que seja à mão.

Onde o PNG e o JPG ainda ganham

As plataformas sociais convertem elas próprias os carregamentos, e algumas rejeitam ou tratam mal o WebP. Os rastreadores de pré-visualização de ligações também variam, por isso mantém a tua imagem Open Graph como PNG ou JPG de 1200×630. E um WebP enviado a um cliente abre muitas vezes na aplicação errada ou não abre de todo.

Como converter PNG em WebP

A ferramenta de linha de comandos gratuita da Google, cwebp, converte um ficheiro ou uma pasta inteira, e a maioria dos editores de imagem e ferramentas de design já exporta WebP diretamente.

# 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

Os teus ficheiros de design originais podem ficar em PNG: o Gradiently exporta designs em PNG e JPG, que são as entradas certas para este passo e os ficheiros certos para todos os carregamentos sociais. Para perceber as definições de qualidade, lê compressão de imagens sem estragar gradientes; para o par mais antigo, PNG vs JPG; e para a lista completa de velocidade, otimizar imagens para a web.