PNG in WebP umwandeln – für schnellere Seiten

PNG ist hervorragend für scharfe Grafiken und Transparenz, aber schwer. Ein einziger Screenshot in voller Breite kann mehrere Megabyte wiegen – das bremst Seiten und kostet Besucher mobile Daten. Google hat WebP entwickelt, um denselben Eindruck auf einem Bruchteil des Platzes zu erhalten, und alle großen Browser unterstützen es seit 2020.

Wenn Sie die PNG-Dateigröße reduzieren möchten, ohne zu skalieren oder zuzuschneiden, bringt der Formatwechsel oft den größten Gewinn. Grafiken mit Farbflächen und als PNG gespeicherte Fotos schrumpfen häufig um 50 bis 80 Prozent, und der Unterschied ist am Bildschirm kaum zu sehen.

Die beiden Formate im Vergleich

Beim Vergleich WebP vs. PNG gilt: Beide unterstützen Transparenz, beide bieten einen verlustfreien Modus. PNG wird von älterer Desktop-Software und in Druckabläufen breiter akzeptiert. WebP bietet zusätzlich einen verlustbehafteten Modus, aus dem die meiste Ersparnis kommt, und kann auch Animation. Für alles, was im Browser angezeigt wird, ist WebP meist das bessere Auslieferungsformat.

Ihr Browser dekodiert jedes PNG, malt es mit intaktem Alphakanal auf eine versteckte Zeichenfläche und kodiert diese mit der gewählten Einstellung als WebP. All das passiert im Tab. Kein Server erhält Ihre Bilder – es gibt also keine Warteschlange und keine Dateigrenze außer dem Speicher Ihres Geräts.

Chrome, Edge und Firefox können auf diese Weise WebP-Dateien erstellen. Manche Safari-Versionen können WebP anzeigen, aber nicht kodieren; nutzen Sie Safari auf dem Mac, sagt Ihnen das Tool Bescheid und schlägt einen anderen Browser vor.

PNG stapelweise in WebP umwandeln

Ein ganzer Ordner? Wählen Sie bis zu 50 Dateien auf einmal aus oder ziehen Sie sie hinein. Sie werden nacheinander mit Fortschrittsbalken verarbeitet, und die Ergebnisse lassen sich einzeln oder zusammen speichern. Die Namen bleiben erhalten – aus header.png wird header.webp, was den Austausch im Projekt einfach macht.

Einstellungen für verlustbehaftete Qualität

Der Regler steuert die Qualität beim Umwandeln von PNG in WebP auf einer Skala von 50 bis 100. Die Voreinstellung 85 passt für die meisten Fotos und Illustrationen. Bei Screenshots mit kleiner Schrift hält 90 oder mehr die Buchstaben scharf. Bei großen Titelbildern sieht 75 bis 80 am Bildschirm oft gleich aus, bei viel geringerem Gewicht. Beobachten Sie die Größenspalte und vergleichen Sie die Vorschau, bis Sie Ihre Balance gefunden haben.

PNG in WebP verlustfrei

Aktivieren Sie „Verlustfrei“, wenn jedes Pixel genau so bleiben muss, wie es war – etwa bei Pixel-Art, UI-Entwürfen oder Bildern, die Sie weiterbearbeiten. Verlustfreies WebP ist typischerweise etwa ein Viertel kleiner als ein optimiertes PNG. Es schrumpft weniger als der verlustbehaftete Modus, aber nichts geht verloren.

Durchsichtige Bereiche behalten

Logos, Icons und freigestellte Produkte brauchen transparente Hintergründe. Dieses Tool wandelt PNG in WebP mit Transparenz um – im verlustbehafteten wie im verlustfreien Modus –, sodass sich das Ergebnis sauber auf jede Seitenfarbe legt. Brauchen Sie das Gegenteil, einen einfarbigen Hintergrund für einen Marktplatz, helfen unsere Hintergrund-Tools.

Wenn Sie PNG für Ihre Website in WebP umwandeln, ist der einfachste Weg, die Dateinamen zu behalten und nur die Endung in HTML oder CSS anzupassen. Viele Entwickler nutzen ein picture-Element mit einer WebP-Quelle und dem Original-PNG als Rückfallebene, auch wenn die Rückfallebene bei heutiger Browserunterstützung selten nötig ist.

Für WordPress laden Sie die umgewandelten Dateien direkt in die Mediathek; WordPress akzeptiert WebP seit Version 5.8, sofern die Bildbibliothek Ihres Hosters es unterstützt. Shopify, Wix, Squarespace und die meisten modernen Website-Baukästen akzeptieren WebP-Uploads ebenfalls.

E-Mail, Social Media und Dokumente

WebP ist für Browser gemacht – überlegen Sie also zweimal, bevor Sie es außerhalb des Webs nutzen. Mehrere E-Mail-Programme, ältere Office-Pakete und manche sozialen Netzwerke wandeln es noch um oder lehnen es ab, und Druckereien erwarten meist JPG, PNG oder PDF. Für diese Ziele behalten Sie das Original-PNG oder erstellen mit unserem Konverter eine JPG-Kopie. Setzen Sie WebP dort ein, wo es glänzt: auf Seiten und in Apps, die Sie selbst betreiben, wo jedes gesparte Kilobyte das Erlebnis für jeden Besucher auf jedem Gerät und jeder Verbindung schneller macht.

Hilft es bei den Core Web Vitals?

Bilder sind oft das größte Element einer Seite, daher verbessern leichtere Dateien den Largest Contentful Paint und senken den Datenverbrauch mobiler Besucher. Kombinieren Sie den Formatwechsel mit korrekten width- und height-Attributen und Lazy Loading für Bilder unterhalb des sichtbaren Bereichs – und Sie beseitigen zwei der häufigsten Geschwindigkeitswarnungen.

Erst skalieren, dann umwandeln

Das Format ist nur die halbe Miete. Ein Screenshot mit 4.000 Pixeln in einer 800 Pixel breiten Spalte verschwendet auch als WebP Bandbreite. Skalieren Sie Bilder auf etwa die doppelte Anzeigebreite – so bleiben sie auf hochauflösenden Bildschirmen scharf – und wandeln Sie sie dann um. Unser Tool zum Ändern der Bildgröße erledigt den ersten Schritt auf dieselbe private Art im Browser.

Text und feine Linien prüfen

Verlustbehaftete Kompression kann dünne Linien und kleine Schrift weicher machen. Zoomen Sie nach dem Umwandeln eines Screenshots, Diagramms oder einer Grafik in die Vorschau und vergleichen Sie mit dem Original. Wirken Kanten unscharf, erhöhen Sie den Regler um fünf oder zehn Punkte oder wechseln Sie zu verlustfrei. Fotos sind viel gutmütiger und brauchen selten mehr als die Voreinstellung.

Dateien sinnvoll benennen

Suchmaschinen lesen Dateinamen als kleinen Relevanzhinweis, und Menschen sehen sie, wenn sie Ihre Bilder herunterladen. Ein beschreibender Name wie rote-laufschuhe.webp ist daher besser als IMG_2041.webp. Benennen Sie Ihre PNGs vor dem Umwandeln um, dann übernehmen die neuen Dateien diese Namen und es gibt hinterher nichts nachzubessern. Fügen Sie beim Einbinden aussagekräftigen Alt-Text hinzu und setzen Sie Breite und Höhe, damit das Layout beim Laden nicht springt.

Wenn eine Datei nicht umgewandelt wird

Wird eine Datei abgelehnt, prüfen Sie, ob es wirklich ein PNG ist; das Tool prüft die Dateisignatur, nicht nur die Endung. Teilweise heruntergeladene oder beschädigte Bilder lassen sich nicht dekodieren – laden Sie sie erneut herunter. Scheitert jede Datei, kann Ihr Browser vermutlich kein WebP kodieren; ein Wechsel zu Chrome, Edge oder Firefox löst das.

Um PNG auf dem Mac in WebP umzuwandeln, öffnen Sie diese Seite in Chrome, Edge oder Firefox und ziehen die Dateien direkt aus dem Finder. Unter Windows und auf dem Chromebook funktionieren dieselben Browser ohne Installation. Um PNG unter Android in WebP umzuwandeln, öffnen Sie die Seite in Chrome, tippen auf das Ablagefeld, wählen Bilder aus Galerie oder Dateien und speichern die Ergebnisse unter Downloads.

Ist WebP kleiner als PNG? Fast immer, besonders im verlustbehafteten Modus, und am größten ist der Abstand bei Fotos, die als PNG gespeichert wurden. Die seltene Ausnahme ist ein winziges, flächiges Icon, das PNG bereits gut komprimiert; die Größenspalte zeigt Ihnen das, und Sie behalten dann einfach das Original.

Und WebP vs. AVIF? AVIF kann noch kleiner sein, aber das Kodieren dauert länger, die Browserunterstützung für das Erstellen ist lückenhafter, und viele CMS-Plattformen und E-Mail-Programme lehnen es noch ab. WebP ist der verlässliche Mittelweg: breit unterstützt, schnell erzeugt und viel leichter als PNG. Behalten Sie Ihre PNG-Originale als Master, falls Sie sie später bearbeiten oder drucken müssen.