Das Problem mit PNG
PNG ist das Go-to-Format wenn Transparenz benötigt wird — und das seit fast 30 Jahren. Verlustfreie Qualität, voller Alpha-Kanal, breite Kompatibilität. Aber PNG hat ein ernstes Problem: die Dateigröße.
Ein Logo mit transparentem Hintergrund als PNG kann schnell 200–500 KB oder mehr wiegen. Für eine einfache Grafik die auf einer Website nur 150 × 80 px angezeigt wird, ist das viel zu groß. PNG wurde für eine andere Ära entwickelt — eine Zeit ohne Gigabit-Internet, aber auch ohne die modernen Komprimierungsalgorithmen die wir heute haben.
WebP als PNG-Ersatz
WebP unterstützt seit seiner Einführung verlustfreie Komprimierung und volle Alpha-Transparenz — also alles, was PNG kann. Und es macht es kompakter:
- Verlustfreies WebP ist typischerweise 26% kleiner als PNG bei identischer Qualität
- Verlustbehaftetes WebP mit Transparenz ist bis zu 50% kleiner als PNG
- WebP unterstützt wie PNG 8-bit Alpha-Kanal mit weichen Kanten
- Animations-Unterstützung (PNG hat APNG, WebP ist effizienter)
Direkter Vergleich: PNG vs WebP
| Eigenschaft | PNG | WebP (verlustfrei) | WebP (verlustbehaftet) |
|---|---|---|---|
| Transparenz | ✅ Voller Alpha | ✅ Voller Alpha | ✅ Voller Alpha |
| Qualität | Verlustfrei | Verlustfrei | Verlustbehaftet |
| Dateigröße | Basis (100%) | ~74% | ~30–50% |
| Scharfe Kanten | ✅ Perfekt | ✅ Perfekt | ✅ Fast perfekt |
| Browser-Support | 100% | 96%+ | 96%+ |
| E-Mail-Support | ✅ Universal | ❌ Kaum | ❌ Kaum |
| Tool-Support | Universal | Gut | Gut |
Anwendungsfälle im Detail
Logos und Brand-Assets
Für Logos auf modernen Websites ist SVG die erste Wahl — es skaliert perfekt auf allen Bildschirmauflösungen und ist oft nur wenige Kilobytes groß. Wenn SVG nicht verfügbar ist (z.B. bei komplexen Logos mit vielen Details), dann WebP über PNG.
Icons und UI-Elemente
Icons sollten SVG sein, wann immer möglich. Für Pixel-Icons gilt: WebP verlustfrei ist kleiner als PNG, bei identischer Darstellung. Für Icons die über JavaScript animiert oder manipuliert werden: PNG bleibt einfacher zu handhaben.
Screenshots mit Transparenz
App-Screenshots, UI-Mockups und Präsentations-Assets mit transparentem Hintergrund: WebP verlustfrei spart hier 20–30% gegenüber PNG ohne jeden Qualitätsunterschied. Perfekter Anwendungsfall für den Format-Wechsel.
Produktbilder im E-Commerce
Freigestellte Produktfotos auf transparentem Hintergrund sind ein häufiger PNG-Anwendungsfall. WebP verlustbehaftet mit Transparenz (Qualität 85–90%) liefert hier die besten Ergebnisse: scharfe Produktkonturen, halbe Dateigröße.
Grafikdesign-Assets zum Download
Wenn Nutzer Assets herunterladen und weiterverarbeiten (z.B. Social Media Templates, Sticker, Clipart): PNG beibehalten. Maximale Software-Kompatibilität ist hier wichtiger als Dateigröße. Nicht jeder Nutzer hat eine App die WebP öffnen kann.
Wann PNG wählen, wann WebP?
| Szenario | Empfehlung |
|---|---|
| Logo auf moderner Website | SVG > WebP > PNG |
| Produktbild freigestellt | WebP (verlustbehaftet, 85%+) |
| Screenshot / UI-Mockup | WebP verlustfrei |
| Download-Asset für Nutzer | PNG (Kompatibilität) |
| E-Mail-Grafik | PNG (E-Mail-Support) |
| Icon auf Website | SVG > WebP |
| Ältere Browser unterstützen | PNG als Fallback |
💡 Next.js / React-Tipp: Mit der next/image-Komponente werden PNG-Dateien automatisch in WebP konvertiert. Du kannst deine bestehenden PNGs behalten — Next.js optimiert sie zur Laufzeit.
Migration: Von PNG zu WebP
Die einfachste Migrationsstrategie für Websites:
- Lade deine PNG-Dateien bei JNRT Pixel hoch
- Wähle WebP als Ausgabeformat
- Setze Qualität auf 90% für verlustbehaftetes WebP mit nahezu perfekter Transparenz
- Tausche die Dateien auf deiner Website aus
- Füge
<meta name="viewport" content="...">und einen<picture>-Tag mit PNG-Fallback für ältere Browser hinzu, falls nötig
Fazit
Für neue Webprojekte ist WebP die bessere Wahl als PNG — kleinere Dateien, gleiche Qualität, volle Transparenz. Die 4% Browser ohne WebP-Support sind 2025 vernachlässigbar. PNG bleibt relevant für Downloads, E-Mails und wenn maximale Tool-Kompatibilität wichtig ist. Für alles andere: WebP.