Was verlustfreies WebP gegenüber PNG tatsächlich einspart

Die Kurzfassung

Verlustfreies WebP ist bei denselben Pixeln oft kleiner als PNG. Das ist der praktische Grund, warum es verwendet wird.

Aber das Wort „oft“ ist wichtig. Verlustfreies WebP ist kein magischer Ersatz für jedes PNG. Die größten Einsparungen erzielt es tendenziell bei Bildern mit Transparenz, Screenshots, UI-Aufnahmen und gemischten Grafik-/Fotoinhalten. Bei sehr kleinen Assets, stark optimierten Palette-PNGs und einfachen Icons kann es wenig sparen oder gelegentlich sogar größer ausfallen.

Wenn Sie eine echte Website optimieren, lautet die richtige Frage nicht: „Ist WebP besser als PNG?“ Sie lautet: „Welche meiner PNGs werden als verlustfreies WebP spürbar kleiner, ohne Kompatibilitäts- oder Workflow-Probleme zu erzeugen?“

Das ist eine engere Frage und deutlich leichter zu beantworten.

Was „verlustfrei“ hier bedeutet

Verlustfrei bedeutet, dass die dekodierten Pixel exakt den Quellpixeln entsprechen. Wenn ein PNG in verlustfreies WebP konvertiert und wieder dekodiert wird, sollten die Bildpixel identisch sein.

Es bedeutet nicht, dass die Datei dieselbe ist. Metadaten, Farbprofilbehandlung, zusätzliche PNG-Chunks, Gamma-Informationen, Zeitstempel und werkzeugspezifische Chunks können je nach Konvertierungs-Pipeline verändert, entfernt oder anders dargestellt werden.

Diese Unterscheidung ist wichtig, wenn Sie mit Archivbildern, Druck-Workflows, wissenschaftlichen Bildern, Beweismaterial oder anderen Situationen arbeiten, in denen der Dateicontainer wichtige Nicht-Pixel-Informationen enthält. Für die gewöhnliche Webauslieferung interessieren sich die meisten Teams vor allem für sichtbare Pixel, Transparenz, Abmessungen und Farbkonsistenz.

Wenn Sie von Nutzern bereitgestellte Bilder veröffentlichen, sind Metadaten auch ein Datenschutzthema. Dieses größere Thema haben wir in EXIF-Metadaten vor dem Online-Teilen von Fotos entfernen behandelt, aber derselbe Grundsatz gilt auch hier: Bildoptimierung sollte klar benennen, was sie beibehält und was sie entfernt.

Warum PNG gut komprimiert und wo es an Grenzen stößt

PNG ist ein sehr gutes Format. Es wurde aus guten Gründen zu einem Webstandard:

• Es ist verlustfrei.
• Es unterstützt Alpha-Transparenz.
• Es wird breit unterstützt.
• Es ist vorhersehbar und einfach zu handhaben.
• Es eignet sich hervorragend für flache Grafiken, Screenshots, Logos und UI-Assets.

PNG-Komprimierung funktioniert, indem Bildzeilen gefiltert und anschließend per DEFLATE komprimiert werden. Diese Kombination ist wirkungsvoll, besonders wenn benachbarte Pixel ähnlich sind.

Das Problem ist nicht, dass PNG schlecht wäre. Das Problem ist, dass PNG alt ist. Sein Kompressionsmodell hat weniger Tricks zur Verfügung als neuere Formate. Selbst wenn Sie ein PNG mit einem guten Encoder optimiert haben, lassen Sie möglicherweise noch Bytes liegen, weil das Format selbst manche Muster nicht so effizient darstellen kann wie verlustfreies WebP.

An dieser Stelle kommt verlustfreies WebP ins Spiel.

Was verlustfreies WebP anders macht

Verlustfreies WebP verwendet ein Kompressionssystem, das speziell für Bilder entwickelt wurde, statt eine allgemeine Kompressionsschicht auf gefilterte Zeilen aufzusetzen. Unter der Haube kann es Techniken wie prädiktive Kodierung, Farbtransformationen, Paletten, Rückverweise und Entropiekodierung nutzen, um wiederholte oder vorhersehbare Pixelmuster kompakt darzustellen.

Sie müssen sich die Implementierungsdetails nicht merken. Das hilfreiche Denkmodell ist dieses:

PNG komprimiert Zeilen gut. Verlustfreies WebP hat mehr Möglichkeiten, Bildstruktur zu beschreiben.

Diese zusätzliche Flexibilität ist der Grund, warum verlustfreies WebP aus demselben Quellbild häufig kleinere Dateien erzeugen kann.

Google hat verlustfreie WebP-Bilder in eigenen Studien historisch als im Durchschnitt etwa 26% kleiner als PNG beschrieben. Betrachten Sie das als richtungsweisende Benchmark, nicht als Versprechen. Ihre Bilder sind kein Durchschnitt. Ihr Designsystem, Ihre Screenshots, Produktfotos, Illustrationen, exportierten Assets und CMS-Uploads werden ihr eigenes Verhalten zeigen.

Wo verlustfreies WebP meist am meisten spart

Transparente Bilder

PNG wird häufig wegen Alpha-Transparenz verwendet. Verlustfreies WebP unterstützt ebenfalls Alpha und komprimiert es oft effizient.

Das ist nützlich für:

• Freisteller von Produkten
• Sticker und Badges
• Interface-Overlays
• Diagramme mit transparentem Hintergrund
• Logos, die größer als nötig exportiert wurden

Die Einsparungen können spürbar sein, wenn der Alpha-Kanal große vorhersehbare Bereiche, weiche Kanten oder wiederholte Formen enthält. Wenn Sie einen Katalog voller transparenter Produktbilder haben, lohnt es sich, verlustfreies WebP früh zu testen.

Screenshots und UI-Aufnahmen

Screenshots enthalten oft große einfarbige Flächen, wiederholte Interface-Komponenten, Text, Icons, Schatten und einige fotografische Bereiche. Diese Mischung kann für PNG schwierig sein, besonders bei großen Abmessungen.

Verlustfreies WebP kommt mit solchen Bildern häufig gut zurecht. Ein ganzseitiger UI-Screenshot, der als optimiertes PNG 900 KB groß ist, kann als verlustfreies WebP auf 500–700 KB schrumpfen. Manchmal ist die Einsparung größer. Manchmal kleiner. Aber die Kategorie ist vielversprechend.

Wenn solche Screenshots in Dokumentation, Marketingseiten, Onboarding-Flows oder Fallstudien erscheinen, kann der Gesamteffekt real sein.

Gemischte Illustrations- und Bildinhalte

Viele moderne Webgrafiken sind weder reine Illustrationen noch reine Fotos. Denken Sie an ein Hero-Bild mit Produkt-UI, Verläufen, kleinen Icons, Textlabels und eingebetteten Fotos.

PNG bewahrt es möglicherweise perfekt, erzeugt aber eine große Datei. Verlustbehaftetes WebP oder AVIF kann bei zu starker Kompression Artefakte um Text und Kanten erzeugen. Verlustfreies WebP kann ein sinnvoller Mittelweg sein, wenn exakte Kanten wichtig sind.

Für einen breiteren Entscheidungsbaum zu Bildformaten, einschließlich AVIF und verlustbehaftetem WebP, siehe Bildformate im Jahr 2026: wann AVIF WebP schlägt und wann nicht.

Wo PNG weiterhin besser sein kann

Winzige Icons und einfache Assets

Bei sehr kleinen Dateien spielt Format-Overhead eine Rolle. Ein 650-Byte-PNG-Icon ist kein offensichtlicher Kandidat für eine Konvertierung. WebP spart vielleicht 80 Byte, oder es wird größer.

In dieser Größenordnung kann die betriebliche Komplexität den Nutzen überwiegen. Wenn die Datei bereits winzig ist, das Rendering nicht blockiert und lange gecacht wird, haben Sie wahrscheinlich wichtigere Dinge zu verbessern.

Sorgfältig optimierte Palette-PNGs

Manche PNGs sind viel kleiner, als man erwartet, weil sie eine begrenzte Palette verwenden. Ein gutes Indexed-Color-PNG kann bei einfachen Grafiken schwer zu schlagen sein.

Das gilt besonders für:

• Kleine Logos
• Pixel Art
• Flache Icons
• Einfache Diagramme
• Grafiken mit wenigen Farben

Seien Sie vorsichtig, wenn Sie WebP mit schlampig exportierten PNGs vergleichen. Wenn das PNG direkt aus einem Designtool mit unnötigen Metadaten und schlechten Kompressionseinstellungen stammt, kann WebP dramatisch besser wirken. Das bedeutet nicht, dass WebP ein gut optimiertes PNG im gleichen Maß schlägt.

Ein fairer Test vergleicht verlustfreies WebP mit optimiertem PNG, nicht mit irgendeiner Datei, die zufällig hochgeladen wurde.

Bilder, die stattdessen verlustbehaftet sein sollten

Das ist der stille Fehler: Teams konvertieren PNG in verlustfreies WebP, obwohl das Bild von Anfang an kein PNG hätte sein sollen.

Fotos sind der typische Fall. Ein Vollfarbfoto, das als PNG gespeichert wird, kann enorm groß sein. Die Konvertierung in verlustfreies WebP kann die Datei verkleinern, sie bleibt aber meist deutlich größer als ein hochwertiges verlustbehaftetes WebP oder AVIF.

Wenn Nutzer den Unterschied nicht wahrnehmen können, ist Verlustfreiheit oft das falsche Ziel. Produktfotografie, redaktionelle Bilder, Hintergründe und Porträts gehören normalerweise in ein verlustbehaftetes Format mit vernünftigen Qualitätseinstellungen.

Verlustfreiheit sollte Fällen vorbehalten bleiben, in denen exakte Pixel wichtig sind: UI-Screenshots, Diagramme, textlastige Grafiken, Transparenz, generierte Charts und Assets, die unter verlustbehafteter Kompression sichtbar leiden.

Was es außer Bytes einspart

Die offensichtliche Einsparung ist die Übertragungsgröße. Kleinere Bilddateien bedeuten in der Regel weniger Bandbreite, schnellere Downloads und besseres Verhalten bei langsamen Verbindungen.

Es gibt aber sekundäre Vorteile:

• Weniger Datenverbrauch für Besucher mit volumenbasierten Tarifen
• Schnellere Befüllung des Bild-Caches
• Reduzierte CDN-Bandbreite
• Geringeres Speicher- und Backup-Volumen im großen Maßstab
• Weniger Druck auf Performance-Budgets

Diese Einsparungen sind nicht gleichmäßig verteilt. Ein einzelnes 2-MB-PNG, das in ein 900-KB-WebP konvertiert wird, ist wichtiger als fünfzig Icons, die jeweils um 100 Byte reduziert werden.

Deshalb sollte Bildoptimierung nach Seitenwirkung priorisiert werden, nicht nach Formatideologie. Wenn Lighthouse die Bildauslieferung markiert, lesen Sie das als Hinweis, nicht als Urteil. Unser Leitfaden einen Lighthouse-Bericht lesen, ohne in Panik zu geraten erklärt, wie man sinnvolle Performance-Probleme von lauten Diagnosen trennt.

Der Kompromiss bei den Dekodierungskosten

Kleinere Dateien sind nicht die einzige Performance-Variable. Browser müssen Bilder außerdem dekodieren, bevor sie sie zeichnen.

PNG-Dekodierung ist ausgereift und meist schnell. WebP-Dekodierung wird ebenfalls breit unterstützt und ist effizient, kann in manchen Fällen aber mehr CPU kosten. Auf modernen Geräten ist das selten ein Hindernis, aber auf einfachen Smartphones, bildlastigen Seiten oder großen Above-the-fold-Assets lohnt sich eine Messung.

Die praktische Regel: Wenn verlustfreies WebP ein großes PNG um 30–50% verkleinert, dominiert meist die Netzwerkeinsparung. Wenn es ein kleines PNG um 3% verkleinert, ist der Kompromiss wahrscheinlich nicht der Rede wert.

Performance-Arbeit ist voll von solchen Schwellenentscheidungen. Optimieren Sie nicht jedes Byte mit derselben Intensität.

Eine einfache Testmethode

Verwenden Sie eine repräsentative Sammlung, nicht nur ein Bild.

Erstellen Sie einen Ordner mit Beispielen von Ihrer tatsächlichen Website:

• Logos und Icons
• Screenshots
• Produktfreisteller
• Diagramme
• Über das CMS hochgeladene PNGs
• Social-Preview-Bilder
• Große Hero-Grafiken

Vergleichen Sie dann drei Dinge:

1. Das ursprüngliche PNG, wie es hochgeladen wurde
2. Ein optimiertes PNG
3. Eine verlustfreie WebP-Version

Für Kommandozeilen-Workflows nutzen Teams oft Tools wie oxipng, pngcrush, zopflipng oder cwebp -lossless. Das konkrete Tool ist weniger wichtig als die Disziplin, Gleiches mit Gleichem zu vergleichen.

Erfassen Sie:

• Dateigröße
• Pixelgleichheit nach dem Dekodieren
• Visuelle Darstellung in Zielbrowsern
• Korrekte Transparenz
• Farbwiedergabe
• Build-Zeit
• Reibung im CMS- oder Design-Workflow

Eine einfache Tabelle reicht aus. Fügen Sie die ursprüngliche Dateigröße, die optimierte PNG-Größe, die verlustfreie WebP-Größe, die prozentuale Einsparung und die Seite hinzu, auf der das Bild erscheint.

Sortieren Sie dann nach insgesamt eingesparten Bytes. Diese Sortierung sagt Ihnen meist, was zu tun ist.

Auslieferung: Ältere Clients nicht leichtfertig kaputtmachen

WebP wird inzwischen in modernen Browsern breit unterstützt. Für die meisten öffentlichen Websites ist die Nutzung sicher. Wenn jedoch eingebettete Webviews, E-Mail-Clients, alte Enterprise-Browser, native Apps oder ungewöhnliche Crawler im Spiel sind, testen Sie, bevor Sie PNG vollständig ersetzen.

Das konservative Muster besteht darin, PNG als Fallback zu behalten und WebP dort auszuliefern, wo es unterstützt wird:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Dieser Ansatz ist langweilig, und langweilig ist gut. Nutzer mit WebP-Unterstützung erhalten die kleinere Datei. Alle anderen erhalten das PNG.

Wenn Ihr Build-System Assets mit Fingerprints versieht und Ihr CDN sie korrekt cached, ist das nicht schwer zu warten. Wenn Ihr CMS alternative Formate mühsam macht, beginnen Sie mit den größten und am häufigsten wiederholten Bildern, statt zu versuchen, die gesamte Mediathek in einem Sprint zu konvertieren.

Datenschutz und lokale Verarbeitung

Bildkonvertierung findet oft in Build-Pipelines oder serverseitigen Mediendiensten statt. Für viele Teams ist das in Ordnung. Wenn Sie jedoch sensible Screenshots, Kunden-Uploads oder interne Dokumente verarbeiten, sollten Sie wissen, wo Dateien verarbeitet werden.

Browserseitige Bildwerkzeuge sind für viele einfache Konvertierungen, Vorschauen und Metadatenprüfungen gut genug geworden. Es gibt Grenzen, aber lokale Verarbeitung kann das unnötige Hochladen privater Bilder reduzieren. Die Abwägungen haben wir in warum Bildverarbeitung im Browser ein Datenschutzgewinn ist behandelt.

Bei internen Assets geht es vor allem um klare Richtlinien. Wissen Sie, ob Bilder das Gerät verlassen, wo transformierte Versionen gespeichert werden und ob Metadaten erhalten bleiben.

Eine praktische Faustregel

Verwenden Sie verlustfreies WebP, wenn alle drei Punkte zutreffen:

• Die Quelle ist derzeit PNG.
• Exakte Pixel oder saubere Transparenz sind wichtig.
• Verlustfreies WebP spart nach dem Vergleich mit einem optimierten PNG eine relevante Menge ein.

Behalten Sie PNG bei, wenn:

• Die Datei winzig ist.
• Das PNG bereits palette-optimiert und konkurrenzfähig ist.
• Die Kompatibilitätsanforderungen ungewöhnlich sind.
• Die betriebliche Komplexität die eingesparten Bytes nicht wert ist.

Verwenden Sie verlustbehaftetes WebP oder AVIF, wenn:

• Das Bild fotografisch ist.
• Exakte Pixel keine Rolle spielen.
• Eine Qualitätseinstellung die Größe drastisch reduzieren kann, ohne sichtbare Schäden zu verursachen.

Die beste Bildstrategie ist selten ein Format für alles. Sie ist ein kleiner Satz von Regeln, der konsequent angewendet wird.

<!-- tool-cta:start -->

💡 Probieren Sie Folgendes aus: Lassen Sie dasselbe PNG durch den Image Converter laufen, um eine verlustfreie WebP-Version zu erstellen, und vergleichen Sie die Dateigrößen direkt.

<!-- tool-cta:end -->

Was spart verlustfreies WebP also tatsächlich?

Es spart Bytes dort, wo PNG keine Kompressionstricks mehr übrig hat. Manchmal bedeutet das moderate 10%. Manchmal bedeutet es, ein großes transparentes Bild nahezu zu halbieren. Auf einer echten Website konzentrieren sich die Einsparungen meist auf eine Minderheit der Assets.

Das ist der wichtige Punkt. Verlustfreies WebP ist kein moralisches Upgrade gegenüber PNG. Es ist eine praktische Option für eine bestimmte Aufgabe: kleinere verlustfreie Webbilder mit Transparenz und breiter Unterstützung in modernen Browsern.

Setzen Sie es dort ein, wo die Zahlen es rechtfertigen. Lassen Sie PNG in Ruhe, wo sie es nicht tun.