PT
Benchmark de Transparência PNG vs. WebP: Canal Alfa e Desempenho (2026)
Engenheiro de Software Sénior e Arquiteto de Aplicações Web
Índice de conteúdo
Transparência na Web Moderna
Comparamos WebP Lossless e WebP Lossy com canal alfa em logos, sombras suaves e recortes complexos.
Síntese dos Resultados Empíricos:
- 28.5% de Economia com WebP Lossless: Qualidade idêntica pixel a pixel em relação ao PNG-24.
- 69.1% de Economia com WebP Lossy (Q85): Reduz arquivos de 2 MB para menos de 640 KB.
- Zero Halos nas Bordas: Sem bordas escuras sobre qualquer cor de fundo.
Resultados do Benchmark de Transparência
Avaliação em 4 categorias de elementos transparentes:
| Gráfico Transparente | Tamanho PNG-24 | WebP Lossless | WebP Lossy (Q85) | Ganho Lossless | Ganho Lossy | Qualidade das Bordas |
|---|---|---|---|---|---|---|
| Logos & Shadows | 420 KB | 295 KB | 135 KB | -29.8% | -67.9% | Flawless soft shadow fade |
| Cutout Portrait (Hair) | 1,840 KB | 1,360 KB | 520 KB | -26.1% | -71.7% | Fine strands preserved cleanly |
| Product Packshots | 980 KB | 680 KB | 310 KB | -30.6% | -68.4% | Crisp outline; zero bleed |
| UI Badges & Icons | 310 KB | 225 KB | 98 KB | -27.4% | -68.4% | Sharp vector-like boundaries |
| Average Across Assets | 887.5 KB | 640.0 KB | 265.8 KB | -28.5% | -69.1% | Studio-Grade Alpha Blending |
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│ TRANSPARENT GRAPHIC PAYLOAD COMPARISON (KB) │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│ Standard PNG-24 ████████████████████████████████████████████████ 887.5 KB │
│ WebP Lossless ██████████████████████████████████ 640.0 KB (-28.5%) │
│ WebP Lossy (Q85 Alpha) ██████████████ 265.8 KB (-69.1%) │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
Código Aberto e Reprodutibilidade
Ferramentas recomendadas para imagens com transparência:
- WebP to PNG
- PNG to WebP
- Repositório GitHub: github.com/freewebptojpg/image-optimization-benchmarks
- Download automático do dataset: As imagens de teste são baixadas e armazenadas em cache automaticamente pelo script de teste na primeira execução (arquivos binários pesados não são commitados no Git).
Mais de 12 anos de experiência em engenharia de software e segurança de aplicações web