PNG vs. WebP: der Generationenkampf
Fast 20 Jahre lang war die goldene Regel des Webdesigns einfach: JPG für Fotos, PNG für Bilder, die einen transparenten Hintergrund (Alphakanal) benötigen. Doch das WebP-Format, von Google seit 2010 vorangetrieben und ab 2020 massiv übernommen, hat die Karten neu gemischt.
Sollten wir das PNG heute vollständig von unseren Websites verbannen? Die Antwort ist differenziert — aber das Urteil fällt sehr klar aus.
Das Problem des PNG: ein strukturelles Schwergewicht
Das PNG (Portable Network Graphics) nutzt eine verlustfreie Komprimierung (lossless). Das ist perfekt, um die absolute Schärfe von Texten, Vektorlinien und Farbflächen zu bewahren, erzeugt aber extrem große Dateien.
Einige in der Praxis beobachtete Größenordnungen:
- ein illustriertes Banner 1920×600 mit Farbverläufen in PNG: 800 KB bis 1,4 MB;
- ein komplexes Logo mit Schlagschatten: 180 bis 350 KB;
- ein Interface-Screenshot in 1440p: 2,5 bis 4 MB.
In einem mobilen 4G-Netz (Median ~12 Mbit/s) entsprechen diese Größen 0,5 bis 2,5 Sekunden Ladezeit pro Bild. Multiplizieren Sie das mit 15 Bildern auf einer Produktseite, und Ihr LCP explodiert.
Der erdrückende Vorteil von WebP
WebP ist das ultimative Schweizer Taschenmesser:
- es beherrscht Transparenz (wie PNG);
- es kann eine verlustbehaftete Komprimierung nutzen (mit für das Auge unsichtbaren Verlusten, wie JPG) oder eine verlustfreie (nach Wahl);
- es unterstützt Animation (als Alternative zu schweren GIFs);
- bei gleichwertiger Bildqualität ist eine WebP-Datei im Schnitt 26 % leichter als ein PNG, und der Abstand kann bei Illustrationen mit komplexen Verläufen bis zu 80 % betragen.
Detaillierter Vergleich: 1 Bild, 3 Formate
Ausgangsbild: Vektorillustration, exportiert in 1200×800 Pixel, mit Transparenz und Farbverläufen.
| Format | Größe | Komprimierung | Transparenz | Kompatibilität |
|---|---|---|---|---|
| PNG-24 | 612 KB | Verlustfrei | Ja (Alpha 8 Bit) | 100 % |
| WebP lossless | 312 KB | Verlustfrei | Ja (Alpha 8 Bit) | 96 % |
| WebP lossy 85 | 88 KB | Verlustbehaftet | Ja (Alpha 8 Bit) | 96 % |
| AVIF 80 | 54 KB | Verlustbehaftet | Ja (Alpha 10 Bit) | 92 % |
In diesem Beispiel spart der Wechsel von PNG zu WebP lossy 524 KB, also 85 % — ohne wahrnehmbaren visuellen Unterschied.
Browser-Kompatibilität: das Ende der Debatte
Heute wird WebP von 96 % der Browser weltweit unterstützt (Quelle: caniuse.com, Mai 2026). Die Ausrede der Inkompatibilität gilt nicht mehr:
- Chrome ≥ 32 (2014)
- Firefox ≥ 65 (2019)
- Safari ≥ 14 (macOS Big Sur, iOS 14 — September 2020)
- Edge ≥ 18 (2018)
Der einzige wirklich blockierende Fall bleibt der Internet Explorer, dessen weltweiter Marktanteil unter 0,3 % gefallen ist und den Microsoft im Juni 2022 offiziell eingestellt hat.
Das Urteil: wann was verwenden?
- Behalten Sie PNG ausschließlich für:
- sehr kleine Grafikelemente (einfache Pixel-Art-Icons, Favicons), bei denen die Größe bereits im Bereich weniger Kilobyte liegt;
- Quelldateien, die an eine Druckerei geliefert werden (die oft PNG, TIFF oder PSD verlangt);
-
Exporte aus Designsoftware (Figma, Sketch) vor der Veröffentlichung im Web.
-
Wechseln Sie zu WebP für alles andere:
- komplexe Logos mit Schatten oder Freistellung;
- Blog-Illustrationen;
- Marketing-Banner;
- Produktfotos (als Alternative zu JPG ist WebP bei gleicher Qualität ~30 % leichter);
- Interface-Screenshots.
Und was ist mit AVIF?
Wenn Sie maximale Optimierung anstreben, ist AVIF (~50 % leichter
als WebP im verlustbehafteten Modus) die Zukunft. Aber seine
Kompatibilität liegt noch bei 92 %, und seine Kodierung ist deutlich
langsamer. Die beste Praxis 2026: AVIF mit einem WebP-Fallback über
das <picture>-Tag ausliefern:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="…" loading="lazy">
</picture>
Bereinigen Sie Ihre Assets ohne Datenleck
Wenn Sie die Website eines Kunden betreuen, ist das Hochladen seiner Grafik-Assets (mitunter unter NDA, mitunter als Vorabversion eines Produktlaunchs) auf einen fremden Online-Konverter ein Sicherheitsleck und ein DSGVO-Risiko.
Wandeln Sie Ihre PNG mit einem Klick in WebP um mit MediaBay. Der Code läuft direkt in Ihrem Browser: Das Betriebsgeheimnis Ihrer Kunden bleibt auf Ihrem Arbeitsplatz. Keine Datei berührt einen fremden Server, kein Leck ist möglich.
Geschrieben von Nikola Markovic · veröffentlicht am 17. Mai 2026.