PNG-zu-WebP-Konverter
PNG ist verlustfrei, aber für das Web sperrig. WebP unterstützt Transparenz und liefert oft viel kleinere Dateien für Logos, Symbole und Illustrationen. Konvertieren Sie PNG-Assets lokal, bevor Sie sie in der Produktion bereitstellen.
So konvertieren Sie PNG in WebP
1. Lade dein PNG hoch (mit oder ohne Alpha).
2. Wähle verlustbehaftete oder verlustfreie WebP-Einstellungen, sofern angeboten.
3. Vergleiche die Ausgabegröße mit dem Original-PNG.
4. Lade die WebP-Datei herunter.
Examples
Logo auf der Marketingseite
Aus einem 120-KB-PNG-Logo kann ein 40-KB-WebP mit identischer Transparenz werden — schnellere Header-Ladevorgänge.
Spiel-Sprite-Blatt
Sprites mit flacher Farbe werden im verlustfreien WebP-Modus im Vergleich zu PNG stark komprimiert.
App-Store-Grafiken
Ersetzen Sie große PNG-Screenshots in gebündelten Assets, wenn die Laufzeit WebP unterstützt.
Wenn PNG zu WebP hilft
• Wenn du Alpha-Transparenz im Web mit kleineren Bytes benötigen.
• Bei der Migration von PNG-lastigen Frontends in moderne Formate.
• Wenn Lighthouse übergroße PNG-Assets meldet.
Wann sollte man PNG behalten?
• Wenn Zielumgebungen nur PNG akzeptieren (einige E-Mail- und PDF-Pipelines).
• Wenn Designer einen universellen verlustfreien Bearbeitungsaustausch benötigen.
• Wenn die Unterstützung von Safari auf alten iOS-Geräten eine zwingende Voraussetzung ohne Rückgriffe ist.
PNG vs. WebP für UI-Assets
Designer exportieren PNG aus Gewohnheit. Bei Produktionswebseiten halbiert WebP mit Transparenz häufig die Übertragungsgröße. Automatisieren Sie die Konvertierung in CI oder verwenden Sie dieses Tool für Ad-hoc-Assets.
Fallback-Strategien
Nutze Bild-/Quellensätze: zuerst WebP, dann PNG. Oder erkennen Sie die serverseitige Unterstützung über Accept-Header. Stellen Sie WebP nicht an Clients bereit, die es nicht dekodieren können.
Bearbeitungsworkflow
Behalten Sie PNG-Master in Design-Repos. Generieren Sie WebP nur für die Bereitstellung von Artefakten — das Rückgängigmachen von Änderungen ist aus verlustfreien PNG-Quellen einfacher.
Häufige Fragen
Bleibt die Transparenz erhalten?
Ja — WebP unterstützt einen Alphakanal ähnlich wie PNG.
Verlustfreies oder verlustbehaftetes WebP?
Grafiken mit flachen Farben eignen sich oft für verlustfreies WebP. In PNG eingebettete Fotos verwenden möglicherweise verlustbehaftetes WebP für kleinere Größen.
Werden sich die Farben verändern?
Der verlustfreie Modus sollte genau mit PNG übereinstimmen. Der verlustbehaftete Modus kann leichte Unterschiede in den Farbverläufen aufweisen.
Kann ich WebP im CSS-Hintergrundbild verwenden?
Ja, in allen modernen Browsern. Stellen Sie PNG-Fallback nur bereit, wenn Analysen Legacy-Traffic anzeigen.
Lokale Verarbeitung?
Ja — Dateien verlassen niemals deinen Browser.
Besser als SVG?
Bei einfachen Logos ist SVG oft am kleinsten und lässt sich unendlich skalieren. WebP eignet sich für Rastergrafiken und Fotos mit Alpha.