WebP vs PNG: Welches Bildformat solltest du verwenden?

Du baust eine Website oder bereitest Bilder für ein Projekt vor. Du hast gehört, dass WebP besser als PNG ist. Aber stimmt das immer? Und wann ist PNG die bessere Wahl?

Beide Formate unterstützen Transparenz. Beide liefern scharfe Bilder. Aber sie komprimieren unterschiedlich. Und das ändert alles bei der Frage, wann du welches Format nutzen solltest.

Hier ist eine klare Übersicht, damit du jedes Mal das richtige Format wählst.

Wie unterscheidet sich die Dateigröße bei WebP und PNG?

Hier liegt WebP klar vorne. Bei gleichem Bild sind WebP-Dateien deutlich kleiner.

Bildtyp	PNG-Größe	WebP (verlustbehaftet 85%)	WebP (verlustfrei)	Ersparnis
Produktfoto mit Transparenz	1,5 MB	180 KB	1,1 MB	27-88%
Logo	80 KB	22 KB	55 KB	31-73%
Screenshot	400 KB	120 KB	280 KB	30-70%
Icon-Spritesheet	200 KB	55 KB	140 KB	30-73%
Infografik	900 KB	250 KB	630 KB	30-72%

Selbst verlustfreies WebP (pixelgenau, kein Qualitätsverlust) schlägt PNG um 25-30%. Und verlustbehaftetes WebP bei 85% Qualität ist 70-88% kleiner und sieht fast identisch aus.

Bei einer Website mit 20 Bildern könnte der Wechsel von PNG zu WebP das Gesamtgewicht von 8 MB auf 2 MB senken. Das ist ein gewaltiger Geschwindigkeitsgewinn.

Unterstützt WebP Transparenz genauso wie PNG?

Ja. WebP kann Transparenz genauso gut wie PNG. Voller Alphakanal. Teiltransparenz. Glatte, geglättete Kanten. Alles funktioniert.

Der Unterschied liegt darin, wie effizient jedes Format die Transparenzdaten speichert. PNG behält jeden Pixel exakt bei. WebP komprimiert die Transparenzebene zusammen mit den Farbdaten. Das Ergebnis sieht gleich aus, aber die Datei ist viel kleiner.

Ein kleiner Haken: Verlustbehaftetes WebP kann bei niedrigen Qualitätseinstellungen manchmal sehr feine Artefakte an transparenten Kanten erzeugen. Ab 80% ist das unsichtbar. Falls du dir Sorgen machst, nutze verlustfreies WebP. Es ist trotzdem kleiner als PNG.

Welches Format hat die bessere Browser-Unterstützung?

PNG funktioniert überall. Jeder Browser, jeder E-Mail-Client, jede App, jedes Gerät. Es gibt es seit 1996. Universelle Unterstützung.

WebP funktioniert in allen modernen Browsern. Chrome, Firefox, Safari, Edge und Opera unterstützen es alle. Das deckt über 97% der Web-Nutzer ab. Safari war der letzte große Nachzügler und hat WebP-Unterstützung 2020 hinzugefügt.

Die einzige Lücke sind sehr alte Browser. Internet Explorer unterstützt kein WebP. Browser von vor 2020 auch nicht. Falls du diese unterstützen musst, kannst du das HTML-Element <picture> verwenden. Damit lieferst du WebP an moderne Browser und PNG als Fallback.

Für die meisten Projekte 2026 ist WebP-Unterstützung kein Problem. Aber wenn du Bilder für E-Mail-Newsletter erstellst, ist PNG sicherer. Viele E-Mail-Clients zeigen WebP nicht an. Falls du zurückwechseln musst, kannst du jederzeit WebP in PNG umwandeln.

Wann ist PNG die bessere Wahl?

PNG gewinnt in bestimmten Situationen, in denen seine Stärken wichtiger sind als die Dateigröße.

E-Mail. Die meisten E-Mail-Clients verarbeiten PNG perfekt. WebP-Unterstützung in E-Mails ist lückenhaft. Wenn dein Bild in eine E-Mail kommt, nutze PNG.

Favicons. Manche Browser erwarten immer noch PNG-Favicons. Das Standard-favicon.ico und Apple-Touch-Icons sollten PNG sein.

Quelldateien zum Bearbeiten. Wenn du das Bild später in Photoshop, GIMP oder Figma bearbeiten willst, behalte die Quelldatei als PNG. Die WebP-Unterstützung in Design-Tools hat sich verbessert, aber PNG ist zuverlässiger.

Maximale Qualität für Archive. PNG ist per Definition verlustfrei. Jeder Pixel bleibt exakt erhalten. Wenn du wichtige Bilder archivierst und dir nie Sorgen um Qualität machen willst, ist PNG die sicherste Wahl.

Plattformen, die kein WebP akzeptieren. Manche älteren CMS-Systeme, Druckservices und Dokumentvorlagen akzeptieren nur PNG. Prüfe die Anforderungen deiner Plattform.

Social-Media-Vorschaubilder. Open-Graph-Bilder für Facebook- und Twitter-Sharing-Cards funktionieren manchmal besser als PNG. Nicht alle Social-Crawler verarbeiten WebP gut.

Wann solltest du WebP statt PNG wählen?

WebP ist in den meisten Web-Szenarien die bessere Wahl.

Website-Bilder. Jedes Bild auf einer Webseite sollte WebP (oder AVIF) sein. Die kleineren Dateien verbessern direkt Ladezeiten, Core Web Vitals und die Nutzererfahrung. WebP schneidet auch im Vergleich mit JPG gut ab bei der Fotokomprimierung.

App-Assets. Mobile Apps und Web-Apps profitieren von kleineren Bildern. Weniger Bandbreite. Schnelleres Rendering. Bessere Leistung bei langsamen Verbindungen.

Transparente Grafiken fürs Web. Logos, Icons und UI-Elemente mit Transparenz sind perfekt für WebP. Gleiches visuelles Ergebnis wie PNG, 30-70% kleinere Dateien.

Hintergrundbilder in CSS. Große dekorative Bilder komprimieren gut in WebP. Ein 2 MB PNG-Hintergrund wird zu einem 400 KB WebP.

Produktfotos auf E-Commerce-Seiten. Produktbilder mit freigestelltem Hintergrund (transparent) sind oft die schwersten Bilder auf einer Seite. WebP bringt sie auf handliche Größe. Du kannst die Bilder vorher auch mit CompressIMG komprimieren, bevor du sie hochlädst.

Was ist mit AVIF als Alternative?

AVIF geht bei der Komprimierung noch weiter als WebP. Es erzeugt Dateien, die 20-30% kleiner als WebP bei gleicher Qualität sind. Es unterstützt Transparenz. Und die Browser-Unterstützung liegt jetzt bei etwa 93%.

Der Nachteil: AVIF ist langsamer beim Kodieren. Das Konvertieren eines Stapels von Bildern in AVIF dauert länger als die Umwandlung in WebP. Und 93% Browser-Unterstützung bedeutet, dass 7% der Nutzer AVIF-Bilder ohne Fallback nicht sehen.

Der ideale Ansatz für die Web-Auslieferung: AVIF als erste Wahl, WebP als Fallback und PNG als letzte Option. Das HTML-Element <picture> macht das einfach.

Wenn du nur ein Format wählen willst und auf Nummer sicher gehen möchtest, gewinnt WebP. Es hat breitere Unterstützung als AVIF und deutlich bessere Komprimierung als PNG. Es ist der goldene Mittelweg, der für fast alles funktioniert. Willst du mehr wissen? Unser AVIF vs WebP Vergleich liefert die komplette Aufschlüsselung der neuen Formate.

Einen vollständigen Überblick über alle Bildformate und ihre Einsatzbereiche finden Sie in unserem Ratgeber zu Bildformaten.

Wie konvertiert man zwischen WebP und PNG?

ConvertIMG funktioniert in beide Richtungen. Konvertiere PNG in WebP für die Web-Auslieferung. Konvertiere WebP in PNG, wenn du breitere Kompatibilität brauchst. Alles läuft in deinem Browser. Keine Dateien verlassen dein Gerät.

Wähle deine Qualitätsstufe, ziehe deine Dateien rein und lade sie herunter. Stapelkonvertierung wird für große Projekte unterstützt. Bereit zum Wechsel? Wandle deine PNGs in WebP um mit unserer Schritt-für-Schritt-Anleitung.