Bhinish Dhiman
Quanto se economiza convertendo PNG para WebP, medido em onze imagens
Traduzido do original em inglês. Ler o original
Converter PNG para WebP com qualidade 0.82 no Chromium 153 reduziu quatro fotografias de 1600 × 900 em 92.5% a 96.5%, um logo chapado de 800 px em 68.7% e um recorte fotográfico com transparência em 94.2%. Os ícones foram no sentido contrário: o de 64 px cresceu 32.7%, o de 32 px 68.5% e o de 16 px 116%. Em arte chapada, o WebP empata com um PNG de paleta.
O número que todo mundo cita para o WebP contra o PNG vem do estudo do Google sobre WebP sem perda. O nosso conversor não grava WebP sem perda (nenhum navegador faz isso a partir de um canvas por padrão), então esse número não descreve o que ele produz. Eis o que ele produz.
A medição
Preparamos onze PNGs: quatro fotografias de 1600 × 900, uma fotografia com máscara de transparência radial suave, um logo chapado de 800 × 800 sobre um fundo e o mesmo logo sobre transparência, e um ícone de visto de 32 unidades rasterizado em 16, 32, 64 e 128 px. Cada um foi convertido no Chromium 153.0.8010 headless pelas mesmas chamadas do convertOne() em src/lib/convert/image.ts: createImageBitmap, desenho num canvas, canvas.toBlob('image/webp', 0.82), sendo 0.82 o padrão do conversor. Também salvamos de novo cada PNG com a libpng no esforço máximo, e como PNG de paleta, para ter uma base justa para a arte chapada. Executado em 1º de outubro de 2026.
| Imagem | PNG como recebido | PNG otimizado | WebP 0.82 | Variação sobre o recebido |
|---|---|---|---|---|
| Fotografia A, 1600 × 900 | 1 568 028 B | 698 559 B | 55 498 B | −96.5% |
| Fotografia B | 2 327 903 B | 903 228 B | 142 062 B | −93.9% |
| Fotografia C | 3 140 320 B | 834 110 B | 148 002 B | −95.3% |
| Fotografia D | 2 959 239 B | 932 712 B | 221 848 B | −92.5% |
| Fotografia, máscara alfa suave | 3 314 685 B | 521 151 B | 192 402 B | −94.2% |
| Logo chapado, opaco | 35 475 B | 11 849 B (paleta) | 11 108 B | −68.7% |
| Logo chapado, transparente | 27 876 B | 11 352 B (paleta) | 13 992 B | −49.8% |
| Ícone 128 px | 2 097 B | 1 635 B (paleta) | 2 042 B | −2.6% |
| Ícone 64 px | 1 020 B | 917 B (paleta) | 1 354 B | +32.7% |
| Ícone 32 px | 559 B | 518 B (paleta) | 942 B | +68.5% |
| Ícone 16 px | 332 B | 330 B (paleta) | 718 B | +116.3% |
Fotografias
Uma fotografia guardada como PNG é o caso para o qual o formato nunca foi pensado, e a economia é enorme porque o ponto de partida é absurdo: um arquivo de 1.5 MB a 3.1 MB que um codificador com perda consegue representar em 55 KB a 222 KB. Mesmo contra um PNG devidamente otimizado, a economia é de 76% a 92%. Contra o JPEG na mesma configuração 0.82, o WebP foi menor nas quatro (55 KB contra 105 KB na fotografia A), embora um número de qualidade seja um ajuste particular de cada codificador, e isso seja uma comparação entre dois resultados, não entre duas configurações.
Arte chapada, com uma base honesta
Os 68.7% do logo são reais, mas favorecem o WebP, porque o PNG recebido era uma exportação não otimizada. Contra um PNG de paleta (que é o que um otimizador de PNG grava para um gráfico de quatro cores, e o que o nosso compressor de imagens produz sem perda), o WebP é 6% menor no logo opaco e 23% maior no transparente. Em gráficos chapados, os dois formatos empatam, e o PNG mantém as bordas nítidas exatas.
Os ícones
Abaixo de cerca de 128 px o WebP perde, e a perda cresce à medida que a imagem encolhe: o formato carrega um custo fixo de contêiner e cabeçalhos que um PNG de 332 bytes não tem como diluir. Em 16 px, o WebP tem mais que o dobro do PNG. Um conjunto de favicons deve continuar em PNG, e o nosso gerador de favicon grava PNG por esse motivo.
A transparência perde pixels em qualquer formato
Também pedimos ao Chromium WebP com qualidade 1.0, que ele grava sem perda: as quatro fotografias opacas e o logo opaco voltaram, na decodificação, idênticos bit a bit ao original. Nenhuma imagem com transparência parcial voltou assim. Na fotografia com máscara suave, 39.77% dos pixels mudaram depois da ida e volta; no ícone de 16 px, 8.59%. Não é culpa do codificador WebP. Um canvas guarda alfa pré-multiplicado, então um pixel semitransparente é arredondado na entrada e não pode ser recuperado na saída. Qualquer conversor que passe por um canvas, o nosso incluído, faz isso com bordas suaves, em qualquer qualidade, em qualquer formato de saída. Para um gráfico cuja transparência precisa sobreviver exatamente, não o recodifique por um canvas.
O que fazer com a tabela
Fotografias: converta e espere mais de 90%. Gráficos chapados: otimize o PNG primeiro e converta só se o resultado ainda estiver grande demais. Ícones abaixo de 128 px: deixe como estão. Qualquer coisa com transparência suave que precise continuar exata: deixe também.