WebP produz arquivos 25 a 35 por cento menor que PNG para a mesma imagem e mantém o fundo transparente pelo qual o PNG é famoso. Esse único fato explica por que o Google criou o WebP e por que a maioria dos sites modernos agora o oferece. O contra-argumento do PNG é o alcance: ele abre em todos os programas já escritos, incluindo software que nunca ouviu falar de WebP. Portanto, a escolha não é sobre qual formato é tecnicamente superior, porque o WebP claramente o é. É uma questão de saber se você está otimizando para um site moderno ou para compatibilidade garantida em qualquer lugar. Este guia compara os dois em profundidade em termos de compactação, transparência, modos de qualidade, suporte do navegador, animação e velocidade da página e fornece uma regra clara para a escolha.

O que é WebP e por que o Google o criou

WebP é um formato de imagem lançado pelo Google em 2010, baseado na tecnologia de compressão de seu codec de vídeo VP8. O objetivo era contundente: diminuir as imagens da web para que as páginas carregassem mais rápido. O Google tinha os dados para saber que as imagens dominam o peso da página e que cortar um terço de cada imagem aceleraria de forma mensurável a web. O WebP foi projetado desde o início para substituir três formatos ao mesmo tempo, combinando Transparência de PNG, compressão fotográfica de JPG e animação de GIF em um único recipiente. Essa ambição é a razão pela qual ela pode fazer coisas que a PNG não pode.

O que é PNG e por que ele perdura

PNG chegou em 1996 como um substituto livre de patente para GIF, usando compressão DEFLATE sem perdas e adicionando um canal alfa completo. Tornou-se o padrão para logotipos, ícones, capturas de tela e qualquer gráfico que precisasse de um fundo transparente. Quase três décadas de apoio universal são o seu fosso. Cada navegador, sistema operacional, cliente de e-mail, pacote de escritório e editor de imagens lê PNG sem configuração. Quando uma imagem precisa ser aberta em algum lugar desconhecido, PNG é o formato que nunca falha.

Tamanho do arquivo: WebP vence claramente

O WebP compacta melhor que o PNG em praticamente todos os cenários. Para um logotipo típico ou gráfico de UI com transparência, espere um Redução de 25 a 35 por cento mudando de PNG para WebP sem perdas. Entre no modo com perdas do WebP e a economia aumentará dramaticamente, geralmente de 60 a 70 por cento, enquanto ainda mantém o canal alfa. PNG não tem nenhuma opção com perdas, portanto não pode competir no segmento inferior. Em um site com dezenas de ativos de imagem, essa diferença chega a centenas de kilobytes por carregamento de página.

A lacuna vem de uma compactação mais inteligente. O algoritmo DEFLATE do PNG é um método de uso geral emprestado do ZIP, bom para encontrar repetições literais. O WebP usa codificação preditiva construída especificamente para imagens, adivinhando cada bloco a partir de seus vizinhos e armazenando apenas a diferença. Essa abordagem consciente da imagem encontra poupanças que o DEFLATE não consegue ver, e é por isso que um formato de 2010 supera um de 1996 de forma tão consistente.

Transparência: ambos têm, WebP faz mais

Ao contrário do JPG, ambos os formatos possuem um canal alfa completo, de modo que o logotipo permanece transparente em ambos. Mas o WebP adiciona algo que o PNG não pode igualar: transparência em modo com perdas. A transparência do PNG só vem com compactação sem perdas, portanto, um gráfico semitransparente deve ser armazenado com peso total sem perdas. O WebP permite que você tenha um fundo transparente e uma compactação agressiva ao mesmo tempo, que é exatamente o que um logotipo PNG pesado precisa. Para ativos de UI e recortes de produtos que devem permanecer transparentes e pesar menos, essa combinação é o argumento mais forte do WebP.

Qualidade: modos sem perdas e com perdas

O WebP oferece os dois modos, o que o torna flexível de uma forma que o PNG não é:

WebP sem perdas corresponde exatamente ao PNG, pixel por pixel, enquanto produz um arquivo menor. Não há compensação de qualidade, apenas uma vitória de tamanho.
WebP com perdas descarta detalhes como o JPG, reduzindo ainda mais os arquivos e, ao contrário do JPG, ainda pode manter a transparência.

PNG oferece apenas sem perdas, e é por isso que permanece grande. Se você precisa de uma cópia perfeita, o WebP sem perdas oferece uma cópia menor. Se você pode aceitar perdas invisíveis, o WebP com perdas oferece uma fração do tamanho. De qualquer forma, existe uma configuração WebP que supera o PNG.

Suporte a navegador e software

Esta é a única vantagem real da PNG e está diminuindo. Todo navegador moderno oferece suporte a WebP, incluindo Chrome, Firefox, Safari e Edge, portanto, na web aberta a questão da compatibilidade está essencialmente resolvida. As lacunas estão em outro lugar: alguns softwares de desktop mais antigos, certos clientes de e-mail, versões mais antigas do Office e plataformas legadas ainda rejeitam o WebP. Os formulários de upload são a outra armadilha, já que muitos aceitam apenas JPG e PNG e recusarão imediatamente um arquivo WebP.

Portanto, o resumo honesto é que o WebP é seguro para o seu site e arriscado para arquivos que você entrega a sistemas desconhecidos. PNG continua sendo o substituto universal para qualquer coisa que saia do seu controle.

Animação: WebP também substitui GIF

Um recurso que simplesmente falta ao PNG é a animação. O PNG padrão contém um único quadro e, embora exista a extensão APNG, o suporte sempre foi inconsistente. Suporte WebP animação nativamente com alfa completo, produzindo arquivos muito menores do que o GIF equivalente, ao mesmo tempo que mostra milhões de cores em vez dos 256 GIFs. Se você estiver escolhendo entre formatos para um gráfico de loop curto, o WebP supera PNG e GIF de forma decisiva.

Por que o WebP acelera sites

O peso da página é alimentado diretamente Maior pintura com conteúdo, um dos Core Web Vitals do Google e um sinal de classificação confirmado. As imagens geralmente são a coisa mais pesada em uma página, portanto, cortar um terço de cada uma delas tem um efeito mensurável no tempo de carregamento, na pontuação do LCP e na taxa de rejeição. Páginas mais rápidas também convertem melhor, e é por isso que o trabalho de desempenho compensa duas vezes.

O padrão prático que a maioria dos sites usa é progressivo: servir WebP para navegadores que o suportam e recorrer a PNG ou JPG para o resto. O HTML moderno lida com isso automaticamente com o elemento picture, e a maioria dos sistemas de gerenciamento de conteúdo e serviços de imagem fazem isso para você. Você obtém o ganho de velocidade sem quebrar nada para clientes mais antigos.

Quando usar cada formato

Usar WebP para imagens de sites, principalmente logotipos e ícones com transparência, onde arquivos menores significam páginas mais rápidas.
Usar WebP quando você precisa de transparência e tamanho pequeno, já que é o único formato comum que oferece ambos.
Usar png quando a imagem deve ser aberta em qualquer programa, incluindo software antigo e clientes de e-mail.
Usar png para formulários de upload e sistemas que listam explicitamente os formatos aceitos e omitem WebP.
Usar png como seu mestre de arquivamento, já que o suporte universal é mais importante do que o tamanho de um arquivo que você guarda para sempre.

Como converter PNG para WebP

A conversão não requer instalação. Abra nosso conversor, adicione seu PNG e escolha a opção que mantém a transparência, que exporta WebP. O processamento é executado localmente por meio da API HTML5 Canvas, portanto, nada é carregado e você pode agrupar vários arquivos de uma vez. O fundo transparente permanece intacto enquanto o arquivo fica significativamente mais claro. O passo a passo completo está no Guia PNG para WebP.

E o AVIF?

Vale a pena conhecer o contexto: AVIF é um formato mais recente que compacta ainda melhor que o WebP, geralmente 20% menor, e também suporta transparência e animação. O suporte ao navegador agora é bom, mas um pouco atrás do WebP, e o suporte ao software está ainda mais atrás. Para a maioria dos sites hoje, o WebP é a escolha pragmática com o melhor equilíbrio entre economia e suporte, e vale a pena observar o AVIF à medida que a adoção cresce. PNG continua sendo o substituto para ambos.

O veredicto

O WebP vence de forma abrangente nos méritos técnicos: arquivos menores, transparência nos modos sem e com perdas, animação e suporte completo a navegadores modernos. PNG vence em uma coisa que ainda importa, que é abrir em todos os lugares sem questionar. Use WebP para o seu site e PNG para qualquer coisa que você enviar para o desconhecido e sirva WebP com um substituto PNG quando desejar ambos. Para a imagem de formato mais amplo, o Guia PNG vs JPG capas onde cabem as fotografias.

Exemplos de tamanho do mundo real

As porcentagens abstratas ajudam menos do que os números reais, então aqui está a aparência da lacuna em ativos típicos:

Um Logotipo de 500 por 500 pixels com transparência: cerca de 45 KB como PNG-24, cerca de 30 KB como WebP sem perdas e menos de 12 KB como WebP com perdas com o canal alfa intacto.
Um gráfico de herói de largura total com sombras suaves: geralmente 400 KB ou mais como PNG, aproximadamente 260 KB como WebP sem perdas e bem menos de 100 KB como WebP com perdas.
Um Conjunto de ícones da interface do usuário de vinte pequenos gráficos: todo o conjunto pode cair de cerca de 200 KB para 130 KB sem perdas, antes de qualquer ajuste com perdas.

Multiplique o exemplo do herói por uma dúzia de páginas e a economia se transforma em segundos de tempo de carregamento em uma conexão lenta, que é exatamente o tipo de diferença que o Core Web Vitals mede.

Convertendo uma biblioteca PNG existente

A maioria dos sites não começa limpo; eles já têm centenas de PNGs implantados. Três abordagens funcionam, dependendo da sua configuração. Se o seu site for executado em uma estrutura ou CMS moderno, o pipeline de imagens provavelmente converte e veicula WebP automaticamente, portanto, você altera uma configuração em vez de arquivos. Se você usa um CDN ou serviço de imagem, a maioria oferece negociação automática de formato, entregando WebP para navegadores que o aceitam e PNG para aqueles que não o aceitam, a partir do mesmo arquivo de origem. E se você estiver gerenciando arquivos manualmente, a conversão em lote dos ativos e a atualização das referências funcionam, embora seja mais trabalhoso.

Qualquer que seja o caminho que você seguir, mantenha os PNGs originais. Eles são seus mestres e você pode precisar deles para um sistema que rejeita WebP posteriormente.

Erros comuns de WebP a serem evitados

Algumas armadilhas pegam as pessoas migrando para o WebP:

Convertendo seus mestres de arquivo: converta cópias para entrega e mantenha os originais PNG, já que o suporte WebP é mais restrito em software de desktop.
Usando WebP com perdas em gráficos de texto: a compactação com perdas mancha letras nítidas, assim como o JPG. Use WebP sem perdas para capturas de tela e imagens com muito texto.
Ignorando o substituto: servir WebP sem alternativa PNG ou JPG quebra a imagem para clientes mais antigos e alguns contextos de e-mail.
Enviando WebP para fazer upload de formulários: muitos aceitam apenas JPG e PNG e rejeitarão o arquivo imediatamente.

Nada disso é motivo para evitar o WebP. São razões para usá-lo onde ele pertence, que é a entrega aos navegadores modernos, mantendo o PNG para mestres e para qualquer coisa que saia do seu controle.

Como os navegadores realmente escolhem o formato

Servir dois formatos parece complicado, mas o mecanismo é simples e automático. Cada navegador envia um cabeçalho Accept com cada solicitação de imagem, listando os formatos que ele entende. Um servidor ou CDN lê esse cabeçalho e retorna WebP para um navegador que anuncia suporte, ou PNG para outro que não o faz, a partir do mesmo URL. Em HTML, você pode fazer a mesma coisa explicitamente com o elemento picture, listando primeiro uma fonte WebP e depois um substituto PNG; o navegador escolhe o primeiro que pode ler e ignora o resto. De qualquer maneira, nenhum visitante jamais vê uma imagem quebrada, e os navegadores modernos obtêm silenciosamente o arquivo menor, enquanto os mais antigos obtêm o compatível.

Perguntas frequentes

O WebP é melhor que o PNG?

Tecnicamente sim. Os arquivos WebP são 25 a 35 por cento menores, mantenha a transparência e adicione modos com perdas e animação que faltam ao PNG. PNG vence apenas em compatibilidade universal.

O WebP oferece suporte a transparência como PNG?

Sim, e mais além. WebP mantém um canal alfa nos modos sem perdas e com perdas, enquanto o PNG oferece apenas transparência com compactação sem perdas.

Quão menor é o WebP do que o PNG?

Normalmente 25 a 35 por cento menor sem perdas, e 60 a 70 por cento menor no modo com perdas, mantendo a transparência.

Todos os navegadores suportam WebP?

Todo navegador moderno oferece suporte a WebP, incluindo Chrome, Firefox, Safari e Edge. Alguns softwares de desktop e formulários de upload mais antigos ainda o rejeitam.

Quais formatos suportam transparência e animação?

WebP faz as duas coisas. PNG tem transparência, mas não tem animação confiável, e GIF é animado, mas é limitado a 256 cores com transparência grosseira.

WebP ou PNG são melhores para um site?

WebP, para velocidade. Arquivos menores melhoram a pintura com maior conteúdo, um sinal de classificação do Core Web Vitals. Sirva um substituto PNG para clientes mais antigos.

Devo usar WebP ou AVIF?

WebP, por enquanto. AVIF compacta cerca de 20% melhor, mas tem suporte mais restrito, então o WebP é o equilíbrio pragmático entre economia e compatibilidade hoje.

Posso fazer upload de um arquivo WebP para um formulário?

Muitas vezes não. Muitos formulários de upload aceitam apenas JPG e PNG, portanto, converta para um deles quando um sistema listar seus formatos aceitos e omitir WebP.

Devo converter meus arquivos PNG existentes para WebP?

Converta cópias para entrega, não suas masters. Mantenha os PNGs originais, já que o suporte a WebP é mais restrito em software de desktop e formulários de upload.

O WebP com perdas é bom para capturas de tela com texto?

Não. A compressão com perdas mancha letras nítidas, exatamente como o JPG faz. Use WebP sem perdas para gráficos e capturas de tela com muito texto.

Ainda preciso de um substituto PNG com WebP?

Para máxima segurança, sim. Todos os navegadores modernos leem WebP, mas softwares de desktop mais antigos, alguns clientes de e-mail e muitos formulários de upload ainda não o fazem.

Como um navegador sabe se deve carregar WebP ou PNG?

Através do Aceite o cabeçalho enviado com cada solicitação, que lista os formatos suportados. Servidores e CDNs leem e retornam WebP ou PNG automaticamente.