PNG in WebP umwandeln

Warum WebP das bessere PNG fürs Web ist

PNG war lange das Format der Wahl, sobald ein Bild auf einer Website transparent sein oder gestochen scharfe Kanten haben sollte. Der Haken: PNG-Dateien sind groß, vor allem bei Screenshots, Illustrationen mit Verläufen und freigestellten Fotos. WebP kann alles, was PNG im Web leisten muss – Transparenz, scharfe Kanten, verlustfreie Speicherung – und braucht dafür meist deutlich weniger Platz.

Der Grund: WebP kann Bildinhalte vorhersagen und nur die Abweichungen speichern. Außerdem erlaubt es eine verlustbehaftete Kompression mit Transparenz. Das gibt es bei PNG nicht, und genau diese Kombination macht freigestellte Produktfotos als WebP so viel kleiner.

Was unsere Messung zeigt

Die Tabelle zeigt zweierlei. Bei Screenshots ist WebP ein enormer Gewinn: Ein Bildschirmfoto wurde um 79 % kleiner. Beim Logo dagegen war das mit pngquant komprimierte PNG sogar etwas kleiner als das WebP. Für einfache Grafiken mit wenigen Farben ist ein optimiertes PNG also oft genauso gut oder besser.

Deshalb unser Rat: Wenn du nicht sicher bist, stell die Ausgabe auf „Alle Formate vergleichen“. TinyThis rechnet dann PNG, WebP und JPG und zeigt dir die Größen nebeneinander. So entscheidest du pro Bild statt aus dem Bauch heraus.

So wandelst du PNG in WebP um

1. Zieh deine PNGs ins Feld, wähle sie aus oder füge einen Screenshot direkt mit Strg+V ein.
2. TinyThis vergleicht JPG, PNG und WebP – „WebP“ ist für den Download vorausgewählt. Für Screenshots und Grafiken ist „Ausgewogen“ ein guter Start.
3. Bei Grafiken probiert TinyThis zusätzlich verlustfreies WebP aus und nimmt automatisch das kleinere Ergebnis.
4. Prüfe Schrift und transparente Kanten im Vorher/Nachher-Vergleich.
5. Lade die WebP-Dateien einzeln oder alle als ZIP herunter.

Transparenz, Kanten und Farben

Der Alphakanal wird vollständig übernommen, auch halbtransparente Pixel wie Schlagschatten oder geglättete Kanten. Ein freigestelltes Produkt bleibt also freigestellt und liegt sauber auf jedem Hintergrund deines Shops.

Damit farbige Kanten nicht ausfransen, nutzt TinyThis bei der Umrechnung „sharp YUV“. Das ist besonders bei roter oder blauer Schrift in Screenshots und bei bunten Icons sichtbar. Farbprofile werden nach sRGB umgerechnet, Metadaten entfernt.

Wo PNG besser bleibt

• Außerhalb des Browsers: E-Mail-Programme, ältere Office-Versionen und manche Druckdienste können mit WebP wenig anfangen. Für Dokumente und den Austausch bleib bei PNG – dann aber komprimiert.
• Bearbeitungsvorlagen: Für Dateien, die noch in Grafikprogrammen weiterbearbeitet werden, ist PNG das robustere Arbeitsformat.
• Einfache Logos: Wie die Messung zeigt, ist ein mit pngquant optimiertes PNG hier oft gleichauf.
• Fotos ohne Transparenz: Die funktionieren als WebP prima, aber wenn du sie ohnehin als JPG brauchst, nimm direkt PNG in JPG.

Für Website, Shop und WordPress

Gerade Shops profitieren: Produktfotos mit transparentem Hintergrund sind als PNG oft mehrere hundert Kilobyte groß, und davon gibt es auf einer Kategorieseite schnell dreißig Stück. Als WebP lädt dieselbe Seite merklich schneller, ohne dass sich an der Optik etwas ändert.

Achte zusätzlich auf die Pixelmaße. Ein Produktbild, das in der Kategorieansicht 400 Pixel breit erscheint und in der Detailansicht 1000 Pixel, braucht keine 3000 Pixel Kantenlänge. Mit „Größe ändern“ begrenzt du die längste Kante beim Umwandeln gleich mit, etwa auf 1600 Pixel – so bleiben auch Zoom-Ansichten scharf, ohne dass die Datei unnötig wächst.

Für WordPress übernimmt das TinyThis-Plugin die Umwandlung auf Wunsch automatisch beim Hochladen. Wie du Bilder in WordPress insgesamt schlank hältst, erklärt der Ratgeber Bilder für WordPress optimieren.