O que o WebP sem perdas realmente poupa em relação ao PNG

A versão curta

O WebP sem perdas é muitas vezes menor do que o PNG para os mesmos píxeis. Essa é a razão prática pela qual as pessoas o usam.

Mas a palavra "muitas vezes" é importante. O WebP sem perdas não é um substituto mágico para todos os PNG. Tende a poupar mais em imagens com transparência, capturas de ecrã, capturas de UI e conteúdos mistos de gráfico/fotografia. Pode poupar pouco, ou ocasionalmente perder, em recursos muito pequenos, PNG com paleta altamente otimizados e ícones simples.

Se está a otimizar um site real, a pergunta certa não é "O WebP é melhor do que o PNG?" É: "Quais dos meus PNG ficam significativamente menores como WebP sem perdas, sem criar problemas de compatibilidade ou de fluxo de trabalho?"

Essa é uma pergunta mais estreita e muito mais fácil de responder.

O que "sem perdas" significa aqui

Sem perdas significa que os píxeis descodificados correspondem exatamente aos píxeis de origem. Se um PNG for convertido para WebP sem perdas e descodificado novamente, os píxeis da imagem devem ser idênticos.

Não significa que o ficheiro seja o mesmo. Metadados, gestão de perfis de cor, blocos auxiliares do PNG, informação de gama, carimbos de data/hora e blocos específicos de ferramentas podem ser alterados, removidos ou representados de forma diferente, dependendo do seu pipeline de conversão.

Esta distinção é importante se estiver a lidar com imagens de arquivo, fluxos de impressão, imagiologia científica, prova legal ou qualquer situação em que o contentor do ficheiro transporte informação importante que não é composta por píxeis. Para entrega web comum, a maioria das equipas preocupa-se sobretudo com píxeis visuais, transparência, dimensões e consistência de cor.

Se publica imagens fornecidas por utilizadores, os metadados também são uma questão de privacidade. Abordámos esse tema mais amplo em como remover metadados EXIF antes de partilhar fotografias online, mas o mesmo princípio aplica-se aqui: a otimização de imagens deve ser explícita sobre o que preserva e o que remove.

Porque o PNG comprime bem, e onde deixa de o fazer

O PNG é um formato muito bom. Tornou-se um padrão na web por bons motivos:

• É sem perdas.
• Suporta transparência alfa.
• É amplamente suportado.
• É previsível e simples de trabalhar.
• É excelente para gráficos planos, capturas de ecrã, logótipos e recursos de UI.

A compressão PNG funciona filtrando linhas da imagem e depois aplicando compressão DEFLATE. Essa combinação é eficaz, especialmente quando píxeis próximos são semelhantes.

O problema não é que o PNG seja mau. O problema é que o PNG é antigo. O seu modelo de compressão tem menos truques disponíveis do que formatos mais recentes. Depois de otimizar um PNG com um bom codificador, ainda pode estar a deixar bytes por poupar porque o próprio formato não consegue representar alguns padrões com tanta eficiência como o WebP sem perdas.

É aqui que entra o WebP sem perdas.

O que o WebP sem perdas faz de forma diferente

O WebP sem perdas usa um sistema de compressão concebido especificamente para imagens, em vez de uma camada de compressão de uso geral acoplada a linhas filtradas. Por baixo, pode usar técnicas como codificação preditiva, transformações de cor, paletas, referências para trás e codificação entrópica para representar de forma compacta padrões de píxeis repetidos ou previsíveis.

Não precisa de memorizar os detalhes de implementação. O modelo mental útil é este:

O PNG comprime bem linhas. O WebP sem perdas tem mais formas de descrever a estrutura da imagem.

Essa flexibilidade adicional é a razão pela qual o WebP sem perdas consegue frequentemente produzir ficheiros menores a partir da mesma imagem de origem.

Historicamente, a Google descreveu as imagens WebP sem perdas como sendo, em média, cerca de 26% menores do que PNG nos seus próprios estudos. Trate isso como uma referência direcional, não como uma promessa. As suas imagens não são uma média. O seu sistema de design, capturas de ecrã, fotografias de produto, ilustrações, recursos exportados e uploads do CMS terão o seu próprio comportamento.

Onde o WebP sem perdas costuma poupar mais

Imagens transparentes

O PNG é usado frequentemente por causa da transparência alfa. O WebP sem perdas também suporta alfa e muitas vezes comprime-o de forma eficiente.

Isto é útil para:

• Recortes de produto
• Autocolantes e selos
• Sobreposições de interface
• Diagramas com fundos transparentes
• Logótipos exportados maiores do que o necessário

As poupanças podem ser percetíveis quando o canal alfa contém grandes regiões previsíveis, contornos suaves ou formas repetidas. Se tem um catálogo cheio de imagens de produto transparentes, vale a pena testar WebP sem perdas cedo.

Capturas de ecrã e capturas de UI

As capturas de ecrã contêm muitas vezes grandes áreas planas, componentes de interface repetidos, texto, ícones, sombras e algumas regiões fotográficas. Essa mistura pode ser difícil para o PNG, especialmente em grandes dimensões.

O WebP sem perdas costuma lidar bem com estas imagens. Uma captura de ecrã de UI de página inteira que tenha 900 KB como PNG otimizado pode passar para 500–700 KB como WebP sem perdas. Às vezes a poupança é maior. Às vezes é menor. Mas a categoria é promissora.

Se essas capturas aparecerem em documentação, páginas de marketing, fluxos de onboarding ou estudos de caso, o efeito acumulado pode ser real.

Conteúdo misto de ilustração e imagem

Muitos gráficos web modernos não são nem ilustrações puras nem fotografias puras. Pense numa imagem hero com UI de produto, gradientes, pequenos ícones, rótulos de texto e fotografias incorporadas.

O PNG pode preservá-la perfeitamente, mas gerar um ficheiro grande. WebP com perdas ou AVIF podem criar artefactos em torno de texto e contornos se forem forçados demasiado. O WebP sem perdas pode ser um meio-termo sensato quando contornos exatos são importantes.

Para uma árvore de decisão mais ampla sobre formatos de imagem, incluindo AVIF e WebP com perdas, veja Formatos de imagem em 2026: quando o AVIF supera o WebP e quando não supera.

Onde o PNG ainda pode ser melhor

Ícones minúsculos e recursos simples

Para ficheiros muito pequenos, o overhead do formato importa. Um ícone PNG de 650 bytes não é um candidato óbvio à conversão. O WebP pode poupar 80 bytes, ou pode ficar maior.

Nessa escala, a complexidade operacional pode superar o benefício. Se o ficheiro já é minúsculo, não bloqueia a renderização e fica em cache durante muito tempo, provavelmente tem coisas melhores para corrigir.

PNG com paleta cuidadosamente otimizados

Alguns PNG são muito menores do que as pessoas esperam porque usam uma paleta limitada. Um bom PNG de cor indexada pode ser difícil de superar em gráficos simples.

Isto é especialmente verdadeiro para:

• Logótipos pequenos
• Pixel art
• Ícones planos
• Diagramas simples
• Gráficos com poucas cores

Tenha cuidado ao comparar WebP com exportações PNG descuidadas. Se o PNG veio diretamente de uma ferramenta de design com metadados desnecessários e definições de compressão fracas, o WebP pode parecer dramaticamente melhor. Isso não significa que o WebP tenha superado um PNG bem otimizado pela mesma margem.

Um teste justo compara WebP sem perdas com PNG otimizado, não com qualquer ficheiro que tenha sido carregado por acaso.

Imagens que deveriam ser com perdas

Este é o erro silencioso: equipas convertem PNG para WebP sem perdas quando a imagem não deveria ter sido PNG em primeiro lugar.

As fotografias são o caso habitual. Uma fotografia a cores completa guardada como PNG pode ser enorme. Convertê-la para WebP sem perdas pode reduzir o ficheiro, mas normalmente continuará a ser muito maior do que um WebP ou AVIF com perdas de alta qualidade.

Se o utilizador não consegue perceber a diferença, sem perdas é muitas vezes o objetivo errado. Fotografia de produto, imagens editoriais, fundos e retratos normalmente pertencem a um formato com perdas com definições de qualidade sensatas.

Sem perdas deve ser reservado para casos em que píxeis exatos importam: capturas de UI, diagramas, gráficos com muito texto, transparência, gráficos gerados e recursos que se degradam visivelmente com compressão com perdas.

O que poupa além de bytes

A poupança óbvia é o tamanho de transferência. Ficheiros de imagem menores normalmente significam menos largura de banda, downloads mais rápidos e melhor comportamento em ligações lentas.

Mas há benefícios secundários:

• Menos dados usados por visitantes em planos tarifados por consumo
• Preenchimento mais rápido da cache de imagens
• Redução da largura de banda da CDN
• Menor volume de armazenamento e backups em escala
• Menos pressão sobre orçamentos de desempenho

Estas poupanças não são distribuídas de forma uniforme. Um único PNG de 2 MB convertido para um WebP de 900 KB importa mais do que cinquenta ícones reduzidos em 100 bytes cada.

É por isso que a otimização de imagens deve ser priorizada pelo impacto na página, não por ideologia de formato. Se o Lighthouse sinalizar a entrega de imagens, leia isso como uma pista, não como um veredito. O nosso guia sobre como ler um relatório Lighthouse sem entrar em pânico explica como separar problemas de desempenho significativos de diagnósticos ruidosos.

O compromisso do custo de descodificação

Ficheiros menores não são a única variável de desempenho. Os navegadores também precisam de descodificar imagens antes de as pintar.

A descodificação PNG é madura e normalmente rápida. A descodificação WebP também é amplamente suportada e eficiente, mas pode custar mais CPU em alguns casos. Em dispositivos modernos, isto raramente é um bloqueador, mas em telemóveis de gama baixa, páginas com muitas imagens ou grandes recursos visíveis sem rolagem, vale a pena medir.

A regra prática: se o WebP sem perdas reduz um PNG grande em 30–50%, a poupança de rede normalmente domina. Se reduz um PNG pequeno em 3%, provavelmente não vale a pena preocupar-se com o compromisso.

O trabalho de desempenho está cheio destas decisões de limiar. Não otimize cada byte com a mesma intensidade.

Um método de teste simples

Use um lote representativo, não uma única imagem.

Crie uma pasta com exemplos do seu site real:

• Logótipos e ícones
• Capturas de ecrã
• Recortes de produto
• Diagramas
• PNG carregados no CMS
• Imagens de pré-visualização social
• Grandes gráficos hero

Depois compare três coisas:

1. O PNG original conforme carregado
2. Um PNG otimizado
3. Uma versão WebP sem perdas

Para fluxos de trabalho de linha de comandos, as equipas costumam usar ferramentas como oxipng, pngcrush, zopflipng ou cwebp -lossless. A ferramenta exata importa menos do que a disciplina de comparar coisas equivalentes.

Acompanhe:

• Tamanho do ficheiro
• Igualdade de píxeis após descodificação
• Renderização visual nos navegadores-alvo
• Correção da transparência
• Aparência da cor
• Tempo de build
• Atrito no fluxo de trabalho do CMS ou de design

Uma folha de cálculo simples é suficiente. Adicione o tamanho do ficheiro original, o tamanho do PNG otimizado, o tamanho do WebP sem perdas, a percentagem poupada e a página onde a imagem aparece.

Depois ordene pelo total de bytes poupados. Essa ordenação normalmente dir-lhe-á o que fazer.

Entrega: não quebre clientes antigos casualmente

O suporte a WebP é agora amplo nos navegadores modernos. Para a maioria dos sites públicos, é seguro usá-lo. Ainda assim, se tiver webviews incorporadas, clientes de email, navegadores empresariais legados, apps nativas ou crawlers invulgares na mistura, teste antes de substituir PNG diretamente.

O padrão conservador é manter PNG como fallback e servir WebP onde houver suporte:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Esta abordagem é aborrecida, e aborrecido é bom. Utilizadores com suporte a WebP recebem o ficheiro menor. Todos os outros recebem o PNG.

Se o seu sistema de build aplica fingerprints aos recursos e a sua CDN os coloca em cache corretamente, isto não é difícil de manter. Se o seu CMS torna formatos alternativos penosos, comece pelas imagens maiores e mais repetidas em vez de tentar converter toda a biblioteca de media num único sprint.

Privacidade e processamento local

A conversão de imagens acontece muitas vezes em pipelines de build ou serviços de media do lado do servidor. Isso é adequado para muitas equipas. Mas se estiver a lidar com capturas de ecrã sensíveis, uploads de clientes ou documentos internos, tenha atenção a onde os ficheiros são processados.

As ferramentas de imagem do lado do navegador tornaram-se suficientemente boas para muitas conversões simples, pré-visualizações e verificações de metadados. Há limites, mas o processamento local pode reduzir o envio desnecessário de imagens privadas. Abordámos estes compromissos em porque processar imagens no navegador é uma vitória para a privacidade.

Para recursos internos, o ponto principal é a clareza da política. Saiba se as imagens saem do dispositivo, onde as versões transformadas são armazenadas e se os metadados são preservados.

Uma regra prática

Use WebP sem perdas quando as três condições forem verdadeiras:

• A origem é atualmente PNG.
• Píxeis exatos ou transparência limpa importam.
• O WebP sem perdas poupa uma quantidade significativa depois de comparado com um PNG otimizado.

Mantenha PNG quando:

• O ficheiro é minúsculo.
• O PNG já está otimizado por paleta e é competitivo.
• As restrições de compatibilidade são invulgares.
• A complexidade operacional não justifica os bytes poupados.

Use WebP com perdas ou AVIF quando:

• A imagem é fotográfica.
• Píxeis exatos não importam.
• Uma definição de qualidade consegue reduzir drasticamente o tamanho sem dano visível.

A melhor estratégia de imagem raramente é um formato em todo o lado. É um pequeno conjunto de regras aplicado de forma consistente.

<!-- tool-cta:start -->

💡 Experimente isto: Passe o mesmo PNG pelo Image Converter para produzir uma versão WebP sem perdas e compare diretamente os tamanhos dos arquivos.

<!-- tool-cta:end -->

Então, o que é que o WebP sem perdas realmente poupa?

Poupa bytes onde o PNG ficou sem truques de compressão. Às vezes isso significa uns modestos 10%. Às vezes significa reduzir uma grande imagem transparente quase para metade. Num site real, as poupanças normalmente concentram-se numa minoria de recursos.

Essa é a parte importante. O WebP sem perdas não é uma evolução moral face ao PNG. É uma opção prática para uma tarefa específica: imagens web sem perdas menores, com transparência e amplo suporte em navegadores modernos.

Use-o onde os números o justificarem. Deixe o PNG em paz onde não justificarem.