Einleitung
Du hast hochauflösende PNG-Bilder auf deiner Webseite, und obwohl sie scharf und transparent sind, laden sie quälend langsam. PNG ist ein hervorragendes Format für Qualität und Transparenz, aber bei Fotos und komplexen Grafiken werden die Dateien riesig, was die Ladezeit deiner Seite vergrößert und Besucher abschreckt. WebP ist ein modernes Format von Google, das ähnliche Qualität wie PNG bei deutlich kleineren Dateien bietet und Transparenz unterstützt. In diesem Guide zeigen wir, wie du PNG zu WebP umwandelst, ohne Qualität oder Transparenz zu verlieren, und wie du beide Formate auf deiner Webseite kombinierst.
Warum das passiert
PNG nutzt verlustfreie Kompression, die jeden Pixel exakt erhält. Das ist ideal für Logos, Screenshots und Grafiken mit scharfen Kanten, aber bei Fotografie ineffizient, da jeder Pixel eine leicht andere Farbe hat und kaum Muster wiederkehren. Ein hochauflösendes PNG-Foto kann 5 bis 20 MB gross sein, was die Ladezeit einer Webseite massiv verlangsamt, besonders auf mobilen Verbindungen. WebP hingegen nutzt einen moderneren Kompressionsalgorithmus, der auf dem VP8-Codec basiert und sowohl verlustbehaftete als auch verlustfreie Modi unterstützt. Eine WebP-Datei ist bei vergleichbarer visueller Qualität typischerweise 25 bis 35 Prozent kleiner als ein JPG und bis zu 70 Prozent kleiner als ein PNG. Ausserdem unterstützt WebP Transparenz und Animationen, was es zu einem vielseitigen Allround-Format für das Web macht.
3 Lösungen
Lösung 1: PNG online zu WebP konvertieren. Der piczen Bildkonverter wandelt PNG-Dateien direkt im Browser zu WebP um. Ziehe deine PNGs auf die Seite, wähle WebP als Ausgabeformat und lade die optimierten Dateien herunter. Das ist der schnellste Weg, denn die Konvertierung läuft serverseitig und du brauchst keine Software. Bei verlustfreiem Modus bleibt jeder Pixel exakt erhalten, bei verlustbehaftetem Modus wählst du die Qualität und erzielst dramatisch kleinere Dateien.
Lösung 2: Ein Build-Tool wie Squoosh oder imagemin nutzen. Wenn du eine Webseite entwickelst und regelmässig Bilder optimierst, lohnt sich ein Build-Tool. Squoosh ist eine Web-App von Google, die detaillierte Kontrolle über Kompression und Qualität bietet. Imagemin ist ein npm-Paket, das sich in Webpack-, Vite- oder Gulp-Workflows integrieren lässt und automatisch WebP-Versionen deiner Bilder erzeugt. Der Vorteil ist die Automatisierung, der Nachteil die Einrichtung.
Lösung 3: Ein CDN nutzen, das automatische WebP-Auslieferung bietet. Cloudflare, imgix und Cloudinary können automatisch WebP-Versionen deiner PNG-Uploads erzeugen und an kompatible Browser ausliefern, während ältere Browser das Original-PNG erhalten. Das ist die bequemste Lösung, da du nichts manuell konvertieren musst, aber meist kostenpflichtig für hohe Volumina.
Schritt-für-Schritt-Anleitung
Für eine einmalige Konvertierung öffne den Bildkonverter im Browser. Sammle alle PNGs, die du für deine Webseite optimieren willst, in einem Ordner. Ziehe die Dateien auf die Konverter-Seite, du kannst Dutzende gleichzeitig auswählen. Wähle WebP als Ausgabeformat. Für Grafiken mit Transparenz und scharfen Kanten wähle den verlustfreien Modus, der jeden Pixel exakt erhält und trotzdem 20 bis 40 Prozent kleiner als das PNG wird. Für Fotos wähle den verlustbehafteten Modus bei Qualität 85, was die Datei um 60 bis 80 Prozent schrumpft, ohne sichtbaren Qualitätsverlust. Klicke auf Umwandeln und warte wenige Minuten. Lade den Zip herunter und ersetze die PNGs auf deiner Webseite durch die WebP-Dateien. Nutze das HTML-picture-Element, um WebP an moderne Browser und PNG als Fallback an ältere auszuliefern, damit alle Besucher ein funktionierendes Bild sehen. Teste die Ladezeit vor und nach der Umstellung, du solltest eine deutliche Verbesserung sehen.
Vor- und Nachteile
WebP reduziert die Dateigrösse deutlich gegenüber PNG, was Ladezeiten verkürzt, mobile Datenvolumen spart und das Nutzererlebnis verbessert. Die verlustfreie Variante bewahrt jeden Pixel und die Transparenz, was sie ideal für Logos und Grafiken macht. Die verlustbehaftete Variante erreicht bei Fotos dramatisch kleinere Dateien als PNG. Der Nachteil ist, dass WebP nicht von ganz alten Browsern wie IE11 unterstützt wird, weshalb du Fallbacks brauchst. Ausserdem ist WebP für die Langzeitarchivierung weniger etabliert als PNG, das ein garantierter Standard ist. Der clevere Ansatz ist, PNG als Master zu archivieren und WebP für die Webbereitstellung zu generieren, mit PNG-Fallback im picture-Element. So bekommst du kleine Dateien für schnelle Ladezeiten und bewahrst die volle Qualität für die Zukunft.