WebP erzeugt Dateien 25 bis 35 Prozent kleiner als PNG für das gleiche Bild, und der transparente Hintergrund, für den PNG bekannt ist, bleibt erhalten. Diese einzelne Tatsache erklärt, warum Google WebP entwickelt hat und warum die meisten modernen Websites es jetzt anbieten. Das Gegenargument von PNG ist Reichweite: Es öffnet sich in jedem jemals geschriebenen Programm, auch in Software, die noch nie von WebP gehört hat. Bei der Wahl kommt es also nicht darauf an, welches Format technisch überlegen ist, denn WebP ist es eindeutig. Es geht darum, ob Sie für eine moderne Website oder für garantierte Kompatibilität überall optimieren. Dieser Leitfaden vergleicht die beiden Aspekte Komprimierung, Transparenz, Qualitätsmodi, Browserunterstützung, Animation und Seitengeschwindigkeit ausführlich und gibt Ihnen dann eine klare Regel für die Auswahl.

Was WebP ist und warum Google es entwickelt hat

WebP ist ein 2010 von Google veröffentlichtes Bildformat, das auf der Komprimierungstechnologie seines VP8-Videocodecs basiert. Das Ziel war klar: Webbilder kleiner machen, damit Seiten schneller geladen werden. Google verfügte über die Daten, um zu wissen, dass Bilder das Seitengewicht dominieren und dass die Einsparung eines Drittels bei jedem Bild das Web messbar beschleunigen würde. WebP wurde von Anfang an entwickelt, um drei Formate gleichzeitig zu ersetzen Die Transparenz von PNG, die fotografische Komprimierung von JPG und die Animation von GIF in einem einzigen Behälter. Dieser Ehrgeiz ist der Grund, warum es Dinge tun kann, die PNG nicht kann.

Was PNG ist und warum es so bleibt

PNG kam 1996 als patentfreier Ersatz für GIF auf den Markt und nutzte die verlustfreie DEFLATE-Komprimierung und fügte einen vollständigen Alphakanal hinzu. Es wurde zum Standard für Logos, Symbole, Screenshots und alle Grafiken, die einen durchsichtigen Hintergrund benötigen. Fast drei Jahrzehnte universeller Unterstützung sind ihr Graben. Jeder Browser, jedes Betriebssystem, jeder E-Mail-Client, jede Office-Suite und jeder Bildeditor liest PNG ohne Einrichtung. Wenn ein Bild unbedingt an einem unbekannten Ort geöffnet werden muss, ist PNG das Format, das niemals versagt.

Dateigröße: WebP gewinnt deutlich

WebP komprimiert in praktisch jedem Szenario besser als PNG. Erwarten Sie für ein typisches Logo oder eine UI-Grafik mit Transparenz Folgendes: 25 bis 35 Prozent Reduzierung Verlustfreier Wechsel von PNG zu WebP. Wenn Sie in den verlustbehafteten Modus von WebP wechseln, steigt die Einsparung dramatisch an, oft um 60 bis 70 Prozent, während der Alpha-Kanal weiterhin erhalten bleibt. PNG hat überhaupt keine verlustbehaftete Option und kann daher im unteren Preissegment nicht mithalten. Auf einer Website mit Dutzenden von Bildressourcen summiert sich dieser Unterschied auf Hunderte Kilobyte pro Seitenladevorgang.

Die Lücke entsteht durch eine intelligentere Komprimierung. Der DEFLATE-Algorithmus von PNG ist eine von ZIP entlehnte Allzweckmethode, die sich gut dazu eignet, wörtliche Wiederholungen zu finden. WebP verwendet prädiktive Codierung, die speziell für Bilder entwickelt wurde, indem es jeden Block anhand seiner Nachbarn errät und nur die Differenz speichert. Dieser bildbewusste Ansatz führt zu Einsparungen, die DEFLATE nicht erkennen kann, weshalb ein Format aus dem Jahr 2010 eines aus dem Jahr 1996 so konsequent übertrifft.

Transparenz: Beide haben sie, WebP bietet mehr

Im Gegensatz zu JPG verfügen beide Formate über einen vollständigen Alphakanal, sodass ein Logo in beiden Formaten durchsichtig bleibt. Aber WebP fügt etwas hinzu, mit dem PNG nicht mithalten kann: Transparenz im verlustbehafteten Modus. Die Transparenz von PNG wird nur durch verlustfreie Komprimierung erreicht, daher muss eine halbtransparente Grafik mit vollem verlustfreiem Gewicht gespeichert werden. WebP ermöglicht Ihnen einen transparenten Hintergrund und gleichzeitig eine aggressive Komprimierung, was genau das ist, was ein umfangreiches PNG-Logo benötigt. Für UI-Assets und Produktausschnitte, die transparent bleiben und gleichzeitig weniger wiegen müssen, ist diese Kombination das stärkste Argument von WebP.

Qualität: verlustfreie und verlustbehaftete Modi

WebP bietet beide Modi, was es in einer Weise flexibel macht, wie es PNG nicht ist:

Verlustfreies WebP entspricht PNG genau, Pixel für Pixel, und erzeugt gleichzeitig eine kleinere Datei. Es gibt keinen Qualitätskompromiss, sondern nur einen Größenvorteil.
Verlustbehaftetes WebP verwirft Details wie JPG, verkleinert die Dateien dadurch noch weiter und kann im Gegensatz zu JPG immer noch Transparenz bewahren.

PNG bietet nur verlustfrei, weshalb es groß bleibt. Wenn Sie eine perfekte Kopie benötigen, erhalten Sie diese mit verlustfreiem WebP kleiner. Wenn Sie unsichtbare Verluste akzeptieren können, erhalten Sie mit verlustbehaftetem WebP einen Bruchteil der Größe. In beiden Fällen gibt es eine WebP-Einstellung, die PNG übertrifft.

Browser- und Softwareunterstützung

Dies ist der einzige wirkliche Vorteil von PNG, und er verringert sich. Jeder moderne Browser unterstützt WebP, einschließlich Chrome, Firefox, Safari und Edge, sodass die Kompatibilitätsfrage im offenen Web im Wesentlichen geklärt ist. Die Lücken bestehen an anderer Stelle: Einige ältere Desktop-Software, bestimmte E-Mail-Clients, ältere Office-Versionen und ältere Plattformen lehnen WebP immer noch ab. Upload-Formulare sind die andere Falle, da viele nur JPG und PNG akzeptieren und eine WebP-Datei komplett ablehnen.

Die ehrliche Zusammenfassung lautet also, dass WebP sicher für Ihre Website und riskant für Dateien ist, die Sie an unbekannte Systeme weitergeben. PNG bleibt der universelle Fallback für alles, was sich Ihrer Kontrolle entzieht.

Animation: WebP ersetzt auch GIF

Eine Fähigkeit, die PNG einfach fehlt, ist die Animation. Standard-PNG enthält einen einzelnen Frame, und obwohl die APNG-Erweiterung existiert, war die Unterstützung immer inkonsistent. WebP unterstützt Animation nativ mit voller AlphaDadurch werden Dateien erzeugt, die weitaus kleiner als das entsprechende GIF sind und gleichzeitig Millionen von Farben anstelle der 256 von GIF anzeigen. Wenn Sie zwischen Formaten für eine Grafik mit kurzer Schleife wählen, schlägt WebP sowohl PNG als auch GIF deutlich.

Warum WebP Websites beschleunigt

Das Seitengewicht fließt direkt ein Größte inhaltsreiche Farbe, eines der Core Web Vitals von Google und ein bestätigtes Ranking-Signal. Bilder sind normalerweise das schwerste Element auf einer Seite. Daher hat die Reduzierung jedes Bildes um ein Drittel einen messbaren Einfluss auf die Ladezeit, den LCP-Score und die Absprungrate. Schnellere Seiten werden auch besser konvertiert, weshalb sich Performance-Arbeit doppelt auszahlt.

Das praktische Muster, das die meisten Websites verwenden, ist progressiv: Stellen Sie WebP für Browser bereit, die es unterstützen, und greifen Sie für den Rest auf PNG oder JPG zurück. Modernes HTML übernimmt dies automatisch mit dem Bildelement, und die meisten Content-Management-Systeme und Bilddienste erledigen dies für Sie. Bei älteren Kunden erhalten Sie einen Geschwindigkeitsgewinn, ohne dass etwas kaputt geht.

Wann jedes Format verwendet werden soll

Benutzen WebP für Website-Bilder, insbesondere Logos und Symbole mit Transparenz, bei denen kleinere Dateien schnellere Seiten bedeuten.
Benutzen WebP wenn Sie Transparenz und geringe Größe benötigen, da es das einzige gängige Format ist, das beides bietet.
Benutzen PNG wenn das Bild in einem beliebigen Programm geöffnet werden muss, einschließlich alter Software und E-Mail-Clients.
Benutzen PNG für Upload-Formulare und Systeme, die explizit akzeptierte Formate auflisten und WebP weglassen.
Benutzen PNG als Ihr Archivmaster, da die universelle Unterstützung wichtiger ist als die Größe einer Datei, die Sie für immer behalten.

So konvertieren Sie PNG in WebP

Für die Konvertierung ist keine Installation erforderlich. Öffnen Sie unser Konverter, fügen Sie Ihr PNG hinzu und wählen Sie die Option, die die Transparenz beibehält und WebP exportiert. Die Verarbeitung erfolgt lokal über die HTML5-Canvas-API, sodass nichts hochgeladen wird und Sie mehrere Dateien gleichzeitig stapeln können. Der transparente Hintergrund bleibt erhalten, während die Datei deutlich heller wird. Die vollständige Komplettlösung finden Sie im PNG-zu-WebP-Anleitung.

Was ist mit AVIF?

Wissenswert für den Kontext: AVIF ist ein neueres Format, das noch besser komprimiert als WebP, oft noch einmal 20 Prozent kleiner, und außerdem Transparenz und Animation unterstützt. Die Browserunterstützung ist mittlerweile gut, liegt aber leicht hinter WebP zurück, und die Softwareunterstützung liegt noch weiter zurück. Für die meisten Websites ist WebP heute die pragmatische Wahl mit der besten Balance zwischen Einsparungen und Support, wobei AVIF mit zunehmender Akzeptanz im Auge zu behalten ist. PNG bleibt bei beiden der Fallback.

Das Urteil

WebP überzeugt in technischer Hinsicht umfassend: kleinere Dateien, Transparenz sowohl im verlustfreien als auch im verlustbehafteten Modus, Animation und vollständige Unterstützung moderner Browser. PNG gewinnt bei einer Sache, die immer noch wichtig ist, nämlich der Öffnung absolut überall ohne Frage. Verwenden Sie WebP für Ihre Website und PNG für alles, was Sie ins Unbekannte senden, und stellen Sie WebP mit einem PNG-Fallback bereit, wenn Sie beides möchten. Für das Bild im größeren Format gilt: PNG vs. JPG-Anleitung Abdeckungen, in die Fotos hineinpassen.

Beispiele aus der Praxis

Abstrakte Prozentsätze helfen weniger als tatsächliche Zahlen, daher sieht die Lücke bei typischen Vermögenswerten wie folgt aus:

A 500 x 500 Pixel großes Logo mit Transparenz: etwa 45 KB als PNG-24, etwa 30 KB als verlustfreies WebP und unter 12 KB als verlustbehaftetes WebP mit intaktem Alphakanal.
A Heldengrafik in voller Breite mit weichen Schatten: oft 400 KB oder mehr als PNG, etwa 260 KB als verlustfreies WebP und deutlich unter 100 KB als verlustbehaftetes WebP.
A UI-Icon-Set von zwanzig kleinen Grafiken: Der gesamte Satz kann verlustfrei von etwa 200 KB auf 130 KB sinken, ohne dass eine verlustbehaftete Optimierung erforderlich ist.

Multiplizieren Sie das Heldenbeispiel auf ein Dutzend Seiten und die Einsparung beträgt Sekunden Ladezeit bei einer langsamen Verbindung, was genau die Art von Unterschied ist, die Core Web Vitals misst.

Konvertieren einer vorhandenen PNG-Bibliothek

Die meisten Websites starten nicht sauber. Sie haben bereits Hunderte von PNGs im Einsatz. Abhängig von Ihrem Setup funktionieren drei Ansätze. Wenn Ihre Site auf einem modernen Framework oder CMS läuft, konvertiert die Bildpipeline WebP wahrscheinlich automatisch und stellt es bereit, sodass Sie eine Einstellung und nicht Dateien ändern. Wenn Sie einen CDN- oder Image-Dienst nutzen, bieten die meisten dies an automatische Formataushandlung, Bereitstellung von WebP an Browser, die es akzeptieren, und PNG an diejenigen, die dies nicht akzeptieren, aus derselben Quelldatei. Und wenn Sie Dateien manuell verwalten, funktioniert die Batch-Konvertierung der Assets und die Aktualisierung der Referenzen, obwohl dies am meisten Arbeit bedeutet.

Welchen Weg Sie auch wählen, behalten Sie die Original-PNGs. Sie sind Ihre Meister, und Sie benötigen sie möglicherweise später für ein System, das WebP ablehnt.

Häufige WebP-Fehler, die Sie vermeiden sollten

Es gibt ein paar Fallen, mit denen man Leute erwischt, die zu WebP wechseln:

Konvertieren Ihrer Archivmaster: Konvertieren Sie Kopien für die Auslieferung und behalten Sie die PNG-Originale, da die WebP-Unterstützung in Desktop-Software eingeschränkter ist.
Verwendung von verlustbehaftetem WebP für Textgrafiken: Bei der verlustbehafteten Komprimierung werden scharfe Buchstaben verwischt, genau wie bei JPG. Verwenden Sie verlustfreies WebP für Screenshots und textlastige Bilder.
Den Fallback überspringen: Die Bereitstellung von WebP ohne PNG- oder JPG-Alternative beeinträchtigt das Bild für ältere Clients und einige E-Mail-Kontexte.
Senden von WebP zum Hochladen von Formularen: Viele akzeptieren nur JPG und PNG und lehnen die Datei sofort ab.

Das sind keine Gründe, WebP zu meiden. Sie sind Gründe dafür, es dort zu verwenden, wo es hingehört, nämlich bei der Bereitstellung in modernen Browsern, während PNG für Master und alles, was sich Ihrer Kontrolle entzieht, beibehalten bleibt.

Wie Browser tatsächlich das Format auswählen

Die Bereitstellung zweier Formate klingt kompliziert, aber der Mechanismus ist einfach und automatisch. Jeder Browser sendet bei jeder Bildanfrage einen Accept-Header, der die Formate auflistet, die er versteht. Ein Server oder CDN liest diesen Header und gibt WebP von derselben URL an einen Browser zurück, der Unterstützung ankündigt, oder das PNG an einen Browser, der dies nicht tut. In HTML können Sie dasselbe explizit mit dem Bildelement tun, indem Sie zuerst eine WebP-Quelle und dann ein PNG-Fallback auflisten; Der Browser wählt die erste aus, die er lesen kann, und ignoriert den Rest. So oder so, Kein Besucher sieht jemals ein kaputtes Bild, und moderne Browser erhalten stillschweigend die kleinere Datei, während ältere die kompatible Datei erhalten.

Häufig gestellte Fragen

Ist WebP besser als PNG?

Technisch gesehen ja. WebP-Dateien sind 25 bis 35 Prozent kleiner, behalten Sie die Transparenz bei und fügen Sie verlustbehaftete und Animationsmodi hinzu, die in PNG fehlen. PNG gewinnt nur bei universeller Kompatibilität.

Unterstützt WebP Transparenz wie PNG?

Ja und weiter. WebP behält einen Alphakanal sowohl im verlustfreien als auch im verlustbehafteten Modus bei, während PNG nur Transparenz bei verlustfreier Komprimierung bietet.

Wie viel kleiner ist WebP als PNG?

Typischerweise 25 bis 35 Prozent kleiner verlustfreiund im verlustbehafteten Modus um 60 bis 70 Prozent kleiner, während die Transparenz erhalten bleibt.

Unterstützen alle Browser WebP?

Jeder moderne Browser unterstützt WebP, einschließlich Chrome, Firefox, Safari und Edge. Einige ältere Desktop-Software und Upload-Formulare lehnen dies immer noch ab.

Welche Formate unterstützen Transparenz und Animation?

WebP macht beides. PNG hat Transparenz, aber keine zuverlässige Animation, und GIF animiert, ist aber auf 256 Farben mit grober Transparenz beschränkt.

Ist WebP oder PNG besser für eine Website?

WebP, für Geschwindigkeit. Kleinere Dateien verbessern Largest Contentful Paint, ein Core Web Vitals-Ranking-Signal. Stellen Sie einen PNG-Fallback für ältere Clients bereit.

Soll ich WebP oder AVIF verwenden?

WebP, vorerst. AVIF komprimiert etwa 20 Prozent besser, bietet aber eine engere UnterstützungDaher ist WebP heute die pragmatische Balance zwischen Einsparungen und Kompatibilität.

Kann ich eine WebP-Datei in ein Formular hochladen?

Oft nicht. Viele Upload-Formulare akzeptieren nur JPG und PNG, also in eines davon konvertieren, wenn ein System seine akzeptierten Formate auflistet und WebP weglässt.

Soll ich meine vorhandenen PNG-Dateien in WebP konvertieren?

Konvertieren Sie Kopien für die Auslieferung, nicht Ihre Master. Behalten Sie die Original-PNGs, da die WebP-Unterstützung in Desktop-Software und Upload-Formularen eingeschränkter ist.

Eignet sich verlustbehaftetes WebP für Screenshots mit Text?

Nein. Bei der verlustbehafteten Komprimierung werden scharfe Buchstaben verwischt, genau wie JPG es tut. Verwenden Sie verlustfreies WebP für textlastige Grafiken und Screenshots.

Benötige ich weiterhin einen PNG-Fallback mit WebP?

Für maximale Sicherheit, ja. Moderne Browser lesen alle WebP, aber ältere Desktop-Software, einige E-Mail-Clients und viele Upload-Formulare tun dies immer noch nicht.

Woher weiß ein Browser, ob WebP oder PNG geladen werden soll?

Durch die Akzeptieren Sie den Header, der bei jeder Anfrage gesendet wird, das die unterstützten Formate auflistet. Server und CDNs lesen es und geben automatisch WebP oder das PNG-Fallback zurück.