DE
PNG vs. WebP Transparenz-Benchmark: Alpha-Kanal & Dateigrößen-Vergleich (2026)
Senior Software Engineer & Webanwendungsarchitekt
Inhaltsverzeichnis
Einleitung: Transparenz im modernen Web
PNG ist seit Jahrzehnten der Standard für transparente Bilder (Logos, Icons, Produktfreisteller). Mit WebP gibt es jedoch zwei moderne Alternativen:
- WebP Lossless: 100% bitgenaue Alpha- und RGB-Erhaltung.
- WebP Lossy mit Alpha: Verlustbehaftete RGB-Farbkompression kombiniert mit 8-Bit-Alpha-Maske.
Wichtigste Erkenntnisse:
- 28,5% Ersparnis mit WebP Lossless: Bietet exakt dieselbe Pixelqualität wie 24-Bit-PNG bei spürbar kleinerer Datei.
- 69,1% Ersparnis mit WebP Lossy (Q85): Reduziert 2-MB-PNGs auf unter 640 KB.
- Keine Farbsäume (Edge Halos): Weder auf weißem noch auf dunklem Hintergrund treten unschöne dunkle Kanten auf.
3-Wege Transparenz-Benchmark
| Transparent Graphic | PNG-24 Size | WebP Lossless | WebP Lossy (Q85) | Lossless % | Lossy % | Edge Quality |
|---|---|---|---|---|---|---|
| Logos & Shadows | 420 KB | 295 KB | 135 KB | -29.8% | -67.9% | Weiche Schattenübergänge |
| Cutout Portrait (Hair) | 1,840 KB | 1,360 KB | 520 KB | -26.1% | -71.7% | Feine Haarsträhnen erhalten |
| Product Packshots | 980 KB | 680 KB | 310 KB | -30.6% | -68.4% | Scharfe Konturen |
| UI Badges & Icons | 310 KB | 225 KB | 98 KB | -27.4% | -68.4% | Vektorscharfe Kanten |
| Average Across Assets | 887.5 KB | 640.0 KB | 265.8 KB | -28.5% | -69.1% | Studio-Grade Alpha |
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│ DATEIGRÖSSEN-VERGLEICH TRANSPARENTER BILDER (KB) │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│ Standard PNG-24 ████████████████████████████████████████████████ 887.5 KB │
│ WebP Lossless ██████████████████████████████████ 640.0 KB (-28.5%) │
│ WebP Lossy (Q85 Alpha) ██████████████ 265.8 KB (-69.1%) │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
Kostenlose Transparenz-Tools
- WebP zu PNG Konverter — Transparente WebP-Bilder für Photoshop & Illustrator umwandeln.
- PNG zu WebP Konverter — PNG-Dateien um bis zu 70% komprimieren.
- GitHub-Repository:
github.com/freewebptojpg/image-optimization-benchmarks - Automatischer Datensatz-Download: Testbilder werden beim ersten Ausführen des Test-Runners automatisch heruntergeladen und zwischengespeichert (Rohbilder sind nicht in Git committed, um das Repository schlank zu halten).
Über 12 Jahre Erfahrung in Softwareentwicklung und Webanwendungssicherheit