Guia de formato

PNG ou WebP: qual você deve usar

Use WebP para imagens que um navegador vai exibir. Mantenha o PNG para arquivos master e para qualquer coisa que precise abrir em qualquer lugar. A parte interessante é o quanto o WebP realmente fica menor, e o que você perde por isso.

A diferença medida

O Google, que desenvolveu o formato, publica os números: imagens WebP sem perdas são 26% menores que PNGs, e imagens WebP com perdas são de 25% a 34% menores que JPEGs comparáveis na mesma qualidade. Essas são médias sobre um conjunto de teste, não uma promessa sobre o seu arquivo específico, mas definem a expectativa corretamente.

Lado a lado

PNG e WebP comparados
Propriedade PNG WebP
Modos de compressão Somente sem perdas Sem perdas e com perdas
Tamanho típico sem perdas Referência Cerca de 26% menor
Transparência Sim Sim, nos dois modos
Custo da transparência Incluído Cerca de 22% de bytes extras no modo sem perdas
Animação APNG, compatibilidade irregular Sim, amplamente compatível
Abre nos navegadores atuais Em qualquer lugar Em qualquer lugar
Abre em softwares antigos Em qualquer lugar Às vezes não

Os números de tamanho e transparência vêm da documentação do WebP do Google, que também afirma que o WebP com perdas e transparência costuma ser três vezes menor que o PNG equivalente.

Onde o WebP vence

  • Imagens em uma página que você administra Todo navegador atual exibe WebP. Um quarto a menos no peso da imagem é um ganho real de velocidade em conexões móveis.
  • Gráficos transparentes com conteúdo fotográfico Um logotipo sobre um fundo fotográfico é onde o WebP com perdas e alfa mais se destaca em relação ao PNG.
  • Capturas de tela grandes e capturas de interface Cores lisas e texto nítido comprimem bem no WebP sem perdas, então você mantém os pixels exatos e perde o volume.
  • Em qualquer lugar em que a largura de banda seja a limitação Newsletters por e-mail, sites de documentação e catálogos com muitas imagens.

Onde o PNG ainda é certo

Mantenha o PNG como a cópia master. Converta uma cópia de entrega. Essa única regra cobre a maioria dos casos abaixo.

  1. Arquivos que você vai editar de novo Passar repetidamente por um formato com perdas degrada uma imagem um pouco a cada vez. Um master sem perdas evita esse problema por completo.
  2. Fluxos de impressão e design Muitos softwares de layout e pré-impressão ainda esperam PNG ou TIFF. Entregar um WebP a uma gráfica é pedir um e-mail que você não quer receber.
  3. Qualquer coisa que um sistema antigo abra Ferramentas internas legadas, visualizadores de documentos mais antigos e alguns formulários de upload rejeitam o WebP de imediato.
  4. Arquivos que você envia para outras pessoas Um colega em uma máquina mais antiga pode não conseguir abrir com um duplo clique. Esse é o motivo pelo qual um conversor de WebP para PNG é usado.

WebP sem perdas ou com perdas

O WebP são dois formatos com uma única extensão de arquivo. O modo sem perdas mantém cada pixel exatamente. O modo com perdas descarta detalhes que o codificador julga que você não vai notar, e o arquivo fica bem menor.

Escolha sem perdas para logotipos, diagramas, capturas de tela e qualquer coisa com bordas nítidas ou texto. Escolha com perdas para fotografias e para fundos em que ninguém vai dar zoom. Texto em uma configuração com perdas ganha halos suaves ao redor das letras, o artefato que as pessoas notam primeiro.

O conversor do Vaultaire oferece os dois. No modo sem perdas, ele lê o novo arquivo de volta e bloqueia o download a menos que a saída seja realmente uma imagem VP8L sem perdas cujos pixels correspondam. Os valores de alfa precisam corresponder exatamente, com uma tolerância de no máximo 2 por canal pré-multiplicado de 8 bits para cor parcialmente transparente, porque os codificadores nativos do navegador arredondam esses valores.

O que a conversão faz com os metadados

Converter também é uma forma de descartar o que está anexado ao arquivo. O conversor não copia os registros de origem EXIF, ICC, texto, hora ou C2PA para o novo WebP, e depois escaneia o arquivo finalizado com um analisador independente, mantendo o download bloqueado se algum registro aparecer.

Isso importa quando o PNG vem de uma captura de tela do celular, uma exportação de câmera ou um gerador de imagem. Se você quiser ver o que está anexado antes de decidir, o inspetor de metadados lista isso. Tudo roda no worker do navegador, e o arquivo nunca é enviado.

Limites práticos do conversor: um PNG estático, até 20 MB, 4,096 pixels em cada lado e 16,000,000 de pixels no total. O PNG animado é rejeitado antes da decodificação em vez de ser exportado silenciosamente como seu primeiro quadro.

Perguntas frequentes sobre PNG e WebP

O WebP é melhor que o PNG?

Para imagens exibidas na web, geralmente sim. O Google mede o WebP sem perdas como 26% menor que o PNG. O PNG ainda é melhor quando uma ferramenta, uma gráfica ou um colega precisa do formato que tem suporte universal há décadas.

O WebP é compatível com transparência?

Sim, nos dois modos. O Google estima o alfa no WebP sem perdas em cerca de 22% de bytes extras, e diz que o WebP com perdas e transparência costuma ser três vezes menor que o PNG equivalente.

Converter PNG para WebP perde qualidade?

Não no modo sem perdas, que mantém cada pixel. O modo com perdas muda os pixels deliberadamente. O conversor lê o arquivo finalizado de volta e bloqueia o download a menos que uma conversão sem perdas produza uma imagem VP8L sem perdas de verdade.

Quando devo manter o PNG?

Para masters que você vai editar de novo, para softwares de impressão e design que esperam esse formato, para qualquer coisa que um sistema mais antigo precise abrir, e para capturas de tela arquivadas. Converta uma cópia de entrega em vez de substituir o original.

O WebP prejudica o SEO?

Não. Imagens menores carregam mais rápido, e a velocidade da página contribui para a classificação. Sirva um formato que o navegador do visitante aceite e mantenha o texto alternativo e a nomeação de arquivo como estavam.

Posso converter de volta para PNG depois?

Sim, e a codificação do PNG é sem perdas a partir dos pixels renderizados. Ela não consegue desfazer uma passagem com perdas anterior, então um WebP com perdas convertido de volta para PNG é um arquivo grande contendo pixels já degradados.