Kurz gesagt: Für Bilder, die auf einer Website angezeigt werden, nehmen Sie WebP. PNG bleibt die Wahl für Dateien, die Sie weiter bearbeiten, per E-Mail verschicken oder mit 16 Bit pro Kanal brauchen.
| PNG | WebP | |
|---|---|---|
| Dateigröße (unser Test mit 5 Bildern, siehe unten) | Ausgangswert | verlustfrei 30–33 % kleiner; bei Qualität 80 71–96 % kleiner |
| Kompressionsarten | Nur verlustfrei | Verlustfrei oder verlustbehaftet |
| Transparenz | 8-Bit-Alphakanal | Alpha in beiden Modi |
| Animation | Nur über APNG, uneinheitlich unterstützt | Eingebaut |
| Farbtiefe | Bis 16 Bit pro Kanal | 8 Bit pro Kanal |
| Browser | Alle | Rund 97 % (nicht IE 11 und ältere Safari-Versionen) |
| E-Mail-Programme, ältere Apps und CMS | Überall akzeptiert | Manche lehnen es noch ab |
| Geeignet für | Quell- und Bearbeitungsdateien, Druck, 16-Bit-Workflows | Bilder auf Webseiten |
Woher diese Zahlen stammen, zeigt der Rest des Artikels.
Die Wahl des richtigen Bildformats ist die erste Entscheidung in jedem Bildoptimierungs-Workflow, und sie hat einen größeren Einfluss auf die Dateigröße als jeder Qualitätsregler oder jede Komprimierungseinstellung. Wählen Sie das falsche Format und Sie verschenken 30–70 % potenzieller Einsparungen, bevor Sie überhaupt mit dem Komprimieren beginnen.
Die zwei Formate, die bei dieser Entscheidung am häufigsten auftauchen, sind PNG und WebP. PNG ist seit den späten 1990er Jahren die erste Wahl für verlustfreie Grafiken im Web. WebP, von Google entwickelt und 2010 veröffentlicht, wurde speziell dafür konzipiert, sowohl JPEG als auch PNG mit besserer Komprimierung auf ganzer Linie zu ersetzen. Fünfzehn Jahre später hat sich WebP zu einem Format mit nahezu universeller Browser-Unterstützung und messbar kleineren Dateigrößen entwickelt.
Aber „WebP ist kleiner" bedeutet nicht „immer WebP verwenden." Es gibt legitime Szenarien, in denen PNG die bessere Wahl bleibt, und zu verstehen, wann welches Format zu verwenden ist, spart Zeit und vermeidet Kompatibilitätsprobleme.
Dieser Leitfaden vergleicht PNG und WebP in jeder relevanten Dimension — Komprimierungseffizienz, Funktionsunterstützung, Browser-Kompatibilität und reale Performance — mit tatsächlichen Konvertierungsdaten aus fünf gängigen Bildtypen. Am Ende haben Sie einen klaren Entscheidungsrahmen für die Wahl zwischen diesen beiden Formaten.
PNG verstehen: Der verlustfreie Standard
PNG (Portable Network Graphics) wurde 1996 als patentfreier Ersatz für GIF erstellt. Das Format ist durch die W3C PNG-Spezifikation (ISO/IEC 15948) definiert und ist seit fast drei Jahrzehnten ein Web-Standard.
Wie PNG-Komprimierung funktioniert
PNG verwendet eine zweistufige verlustfreie Kompressionspipeline. Zunächst wird jede Pixelzeile durch einen Vorhersagefilter geleitet, der Unterschiede zwischen benachbarten Pixeln kodiert. PNG unterstützt fünf Filtertypen (None, Sub, Up, Average, Paeth), und der Encoder wählt den besten Filter pro Zeile. Anschließend werden die gefilterten Daten mit dem DEFLATE-Algorithmus (LZ77 + Huffman-Kodierung) komprimiert — derselbe Algorithmus, der in ZIP-Dateien und gzip verwendet wird.
Da beide Stufen verlustfrei sind, ist das dekomprimierte Bild Bit für Bit identisch mit dem Original. Es werden niemals Pixeldaten verworfen.
Stärken von PNG
- Perfekte verlustfreie Qualität — Jeder Pixel wird exakt wie das Original bewahrt, was PNG ideal für Bilder macht, die später bearbeitet werden oder pixelgenaue Genauigkeit erfordern.
- Volle Alpha-Transparenz — PNG unterstützt einen 8-Bit-Alpha-Kanal mit 256 Transparenzstufen pro Pixel, unverzichtbar für Logos, Icons und UI-Elemente.
- Breite Farbtiefe — Unterstützt bis zu 16 Bit pro Kanal (48-Bit-Farbe) für Workflows, die erweiterten Dynamikumfang erfordern.
- Universelle Unterstützung — Jeder Browser, Bildeditor, jedes Betriebssystem und CMS verarbeitet PNG ohne Konfiguration.
Einschränkungen von PNG
- Große Dateigrößen für Fotografien — Verlustfreie Komprimierung kann bei fotografischen Inhalten einfach nicht mit verlustbehafteten Methoden konkurrieren. Ein PNG-Foto ist typischerweise 3–10× größer als ein JPEG- oder WebP-Äquivalent bei visuell vergleichbarer Qualität.
- Keine native Animation — Die PNG-Basisspezifikation unterstützt keine Animation. APNG (Animated PNG) existiert als Erweiterung, hat aber inkonsistente Unterstützung und wird im Vergleich zu GIF oder WebP-Animation selten verwendet.
- Kein verlustbehafteter Modus — PNG ist ausschließlich verlustfrei. Sie können innerhalb des Formats selbst keine Qualität gegen kleinere Dateien tauschen. Tools wie pngquant können verlustbehaftete Quantisierung vor der PNG-Kodierung anwenden, aber das ist ein Vorverarbeitungsschritt, keine native PNG-Funktion.
WebP verstehen: Googles moderne Alternative
WebP wurde von Google entwickelt und erstmals 2010 veröffentlicht. Es basiert auf dem VP8-Video-Codec (für verlustbehaftete Komprimierung) und einem separaten verlustfreien Komprimierungsalgorithmus. Das Format ist in der Google WebP-Entwicklerdokumentation und der WebP Container Specification dokumentiert.
Wie WebP-Komprimierung funktioniert
WebP arbeitet in zwei verschiedenen Modi:
Verlustbehafteter Modus verwendet Techniken, die von VP8-Intra-Frame-Kodierung abgeleitet sind, mit adaptiven Blockgrößen (4×4 und 16×16), fortgeschrittener räumlicher Vorhersage und boolescher arithmetischer Kodierung. Laut der Google WebP-Dokumentation erreicht verlustbehaftetes WebP 25–34 % kleinere Dateigrößen im Vergleich zu JPEG bei gleichwertigen SSIM-Qualitätswerten.
Verlustfreier Modus verwendet räumliche Vorhersage mit 13 Modi, Farbraumtransformationen, Rückwärtsreferenzsuche und benutzerdefinierte Entropiekodierung. Googles eigene Benchmarks zeigen, dass verlustfreie WebP-Dateien im Durchschnitt 26 % kleiner als PNG-Dateien sind, gemessen über einen Korpus von etwa 12.000 Webbildern.
Stärken von WebP
- Überlegene Komprimierung — WebP erzeugt kleinere Dateien als sowohl JPEG (Lossy) als auch PNG (Lossless) bei gleichwertiger visueller Qualität, typischerweise 25–35 % Einsparungen.
- Transparenzunterstützung — Sowohl verlustbehaftetes als auch verlustfreies WebP unterstützen Alpha-Kanäle. Verlustbehaftetes WebP mit Alpha ist oft 60–80 % kleiner als das gleichwertige PNG.
- Animationsunterstützung — WebP unterstützt Animation nativ mit VP8-Inter-Frame-Komprimierung und bietet eine moderne Alternative zu GIF mit voller Farbunterstützung.
- Nahezu universelle Browser-Unterstützung — Laut Can I Use-Daten von Anfang 2025 wird WebP von etwa 97 % der Browser weltweit unterstützt, einschließlich aller aktuellen Versionen von Chrome, Firefox, Safari, Edge und Opera.
Einschränkungen von WebP
- Nicht wirklich universell — Die 3 %-Lücke bei der Browser-Unterstützung kann relevant sein, wenn Ihre Zielgruppe Nutzer auf älteren Geräten umfasst. Prüfen Sie Ihre Analysen, bevor Sie ausschließlich auf WebP setzen.
- Langsamere Kodierung — WebP-Kodierung ist aufwändiger als JPEG, obwohl der Unterschied auf moderner Hardware typischerweise unter einer Sekunde pro Bild liegt.
- Begrenzte native App-Unterstützung — Einige Desktop-Anwendungen und Legacy-CMS-Plattformen verarbeiten WebP möglicherweise nicht nativ, obwohl sich dies schnell verbessert.
- Verlustbehaftete Qualitätsobergrenze — Bei sehr hohen Qualitätseinstellungen (95+) kann verlustbehaftetes WebP manchmal etwas größere Dateien als JPEG erzeugen.
Komprimierungsvergleich: PNG vs. WebP über fünf Bildtypen
Theorie ist nützlich, aber echte Zahlen sind das, was zählt, wenn Sie Formatentscheidungen treffen. Wir haben fünf gängige Bildtypen von PNG in WebP (Lossless) und WebP (Lossy bei Qualität 80) konvertiert, um die tatsächlichen Dateigrößenunterschiede zu messen.
Testmethodik
- Quellbilder: Fünf Bilder, die die häufigsten Typen auf Websites repräsentieren — ein Firmenlogo, ein Desktop-Screenshot, ein Produktfoto, ein UI-Icon-Set und eine Marketing-Grafik mit Textüberlagerungen.
- Originalformat: Alle Quellbilder wurden als PNG-24 mit maximaler Komprimierung (Stufe 9) mit Standardtools gespeichert.
- Konvertierungstool: ImgCompress.app Formatkonverter, clientseitig in Chrome 122 auf einem MacBook Pro (M2, 16 GB RAM).
- WebP Lossless: Konvertiert im verlustfreien WebP-Modus für bitgenaue Qualitätserhaltung.
- WebP Lossy: Konvertiert im verlustbehafteten WebP-Modus bei Qualität 80, was eine gute Balance aus Größe und visueller Treue bietet.
- Qualitätsüberprüfung: Alle verlustfreien Konvertierungen wurden als pixelidentisch mit der PNG-Quelle verifiziert. Verlustbehaftete Konvertierungen wurden bei 100 % Zoom auf sichtbare Artefakte inspiziert.
Ergebnisse
| Bildtyp | Abmessungen | PNG-Größe | WebP Lossless | Ersparnis | WebP Lossy (Q80) | Ersparnis |
|---|---|---|---|---|---|---|
| Firmenlogo | 800×400 | 42 KB | 28 KB | 33 % | 12 KB | 71 % |
| Desktop-Screenshot | 1920×1080 | 1.850 KB | 1.280 KB | 31 % | 185 KB | 90 % |
| Produktfoto | 2400×2400 | 8.200 KB | 5.740 KB | 30 % | 320 KB | 96 % |
| UI-Icon-Set | 512×512 | 85 KB | 58 KB | 32 % | 24 KB | 72 % |
| Marketing-Grafik | 1200×628 | 680 KB | 465 KB | 32 % | 95 KB | 86 % |
Was die Daten zeigen
WebP Lossless spart durchgehend 30–33 % im Vergleich zu PNG. Das ist bemerkenswert konsistent über alle fünf Bildtypen, von kleinen Icons bis zu großen Screenshots. Die Einsparungen kommen vollständig aus WebPs effizienterem verlustfreien Komprimierungsalgorithmus — es geht keine Qualität verloren, und die Bilder sind pixelidentisch mit den PNG-Originalen.
WebP Lossy liefert dramatische Einsparungen für fotografische Inhalte. Das Produktfoto sank von 8,2 MB (PNG) auf nur 320 KB (verlustbehaftetes WebP bei Q80) — eine 96 %-Reduktion. Selbst der Desktop-Screenshot, der scharfen Text und UI-Elemente enthält, die typischerweise schwerer verlustbehaftet zu komprimieren sind, erreichte eine 90 %-Reduktion ohne sichtbare Textverschlechterung bei normalem Betrachtungsabstand.
Logos und Icons sehen die geringsten verlustbehafteten Einsparungen, profitieren aber immer noch erheblich. Das Firmenlogo ging von 42 KB auf 12 KB (71 % Reduktion), und das Icon-Set von 85 KB auf 24 KB (72 % Reduktion). Diese Bilder haben große Bereiche einfarbiger Flächen und scharfe Kanten, die selbst in PNG gut komprimieren, aber verlustbehaftetes WebP schneidet die Dateigröße immer noch um mehr als zwei Drittel.
Die Lücke zwischen Lossless und Lossy variiert nach Inhaltstyp. Beim Produktfoto ist der Unterschied zwischen verlustfreiem WebP (5,7 MB) und verlustbehaftetem WebP (320 KB) enorm — Lossy ist 18× kleiner. Beim Logo ist die Lücke viel kleiner (28 KB vs. 12 KB, etwa 2,3×). Das spiegelt die grundlegende Natur verlustbehafteter Komprimierung wider: Sie glänzt bei fotografischen Inhalten mit sanften Verläufen und feinen Details und bietet weniger dramatische Gewinne bei Grafiken mit einfarbigen Flächen und scharfen Kanten.
Browser-Kompatibilität: Wo die Dinge 2025 stehen
Browser-Unterstützung ist oft der entscheidende Faktor bei der Formateinführung. Hier ist der aktuelle Stand der WebP- und PNG-Kompatibilität:
PNG-Browser-Unterstützung
PNG wird seit den frühen 2000er Jahren universell unterstützt. Jeder Browser, jede Version, jede Plattform verarbeitet PNG korrekt. Es gibt nichts weiter zu sagen — wenn Sie ein PNG ausliefern, wird es überall dargestellt.
WebP-Browser-Unterstützung
Laut Can I Use-Daten von Januar 2025 genießt WebP etwa 97 % globale Browser-Unterstützung:
- Chrome: Volle Unterstützung seit Version 32 (2014)
- Firefox: Volle Unterstützung seit Version 65 (2019)
- Safari: Volle Unterstützung seit Version 16 (2022) auf macOS, iOS 14+ (2020) auf Mobilgeräten
- Edge: Volle Unterstützung seit Version 18 (2018)
- Opera: Volle Unterstützung seit Version 19 (2014)
Die verbleibenden ~3 % stammen hauptsächlich von Internet Explorer 11 (End of Life Juni 2022), älteren Safari-Versionen auf macOS Catalina und früher sowie Nischen-Mobilbrowsern.
Praktische Kompatibilitätsstrategie
Für die meisten Websites im Jahr 2025 kann WebP als primäres Format ohne Fallback ausgeliefert werden. Die 97 %-Unterstützungsschwelle bedeutet, dass die überwiegende Mehrheit Ihrer Besucher die WebP-Version sehen wird. Wenn Ihre Analysen jedoch bedeutenden Traffic von älteren Browsern zeigen, können Sie das HTML-<picture>-Element verwenden, um WebP mit einem PNG-Fallback auszuliefern:
<picture>
<source srcset="image.webp" type="image/webp" />
<img src="image.png" alt="Beschreibung des Bildes" />
</picture>
Dieser Ansatz liefert die kleinere WebP-Datei an Browser, die sie unterstützen, und fällt für den Rest auf PNG zurück. Der Browser übernimmt die Formatauswahl automatisch — kein JavaScript erforderlich.
Für einen umfassenderen Blick auf die Formatauswahl einschließlich AVIF lesen Sie unseren Leitfaden zur Bildformat-Konvertierung.
Tutorial: PNG in WebP konvertieren mit ImgCompress.app
Lassen Sie uns den tatsächlichen Prozess der Konvertierung von PNG-Bildern in WebP mit ImgCompress.app durchgehen, damit Sie den Workflow und die Ergebnisse aus erster Hand sehen können.
Schritt-für-Schritt-Konvertierungsprozess
-
Öffnen Sie unseren Bildkonverter in Ihrem Browser. Die gesamte Verarbeitung läuft lokal — Ihre Bilder verlassen nie Ihr Gerät.
-
Ziehen Sie Ihre PNG-Dateien per Drag & Drop auf den Upload-Bereich oder klicken Sie zum Durchsuchen. Sie können mehrere Dateien gleichzeitig für die Stapelkonvertierung hochladen.
-
Wählen Sie WebP als Zielformat aus dem Ausgabeformat-Dropdown.
-
Wählen Sie Ihren Komprimierungsmodus:
- Lossless, wenn Sie pixelgenaue Qualität benötigen (Logos, Icons, Screenshots, die später bearbeitet werden)
- Lossy mit einer Qualitätseinstellung von 75–85 für Fotografien und komplexe Grafiken, bei denen ein gewisser Qualitätskompromiss akzeptabel ist
-
Klicken Sie auf Konvertieren und warten Sie einige Sekunden. Der Konverter verarbeitet jedes Bild clientseitig über die Canvas API und Web Workers für optimale Performance.
-
Sehen Sie sich die Ergebnisse in der Vorschau an. Für verlustbehaftete Konvertierungen verwenden Sie den Vorher-Nachher-Vergleich, um zu überprüfen, ob die Qualität Ihren Standards entspricht. Achten Sie auf Kanten um transparente Bereiche, Textschärfe und Verlaufsglätte.
-
Laden Sie die konvertierten Dateien einzeln oder als ZIP-Archiv herunter.
Konvertierungstipps
- Beginnen Sie mit Lossless für Grafiken. Wenn Ihr PNG Logos, Icons oder UI-Elemente enthält, probieren Sie zuerst verlustfreies WebP. Sie erhalten eine 30 %-Größenreduktion ohne jeglichen Qualitätskompromiss. Wechseln Sie nur zu Lossy, wenn Sie noch kleinere Dateien brauchen und geringfügige Qualitätskompromisse akzeptieren können.
- Verwenden Sie Qualität 80 für Fotografien. Wenn Ihr PNG ein Foto ist (vielleicht aus einem Design-Tool als PNG exportiert, um die Qualität während der Bearbeitung zu bewahren), gibt Ihnen verlustbehaftetes WebP bei Qualität 80 dramatische Dateigrößeneinsparungen ohne sichtbaren Qualitätsverlust bei Web-Anzeigegrößen.
- Transparenz bewahren. WebP unterstützt Alpha-Transparenz in verlustbehafteten und verlustfreien Modi. Beim Konvertieren von PNG-Dateien mit transparentem Hintergrund wird die Transparenz automatisch bewahrt — keine speziellen Einstellungen nötig.
- Stapelkonvertierung für Effizienz. Wenn Sie einen Ordner voller PNG-Assets konvertieren müssen, laden Sie alle auf einmal hoch. ImgCompress.app verarbeitet sie parallel und ermöglicht den Download aller Dateien als einzelne ZIP-Datei.
Für weitere Details zur Konvertierung zwischen allen unterstützten Formaten lesen Sie unseren vollständigen Leitfaden zur Formatkonvertierung.
Entscheidungsdiagramm: Wann PNG vs. WebP verwenden
Die Wahl zwischen PNG und WebP läuft auf einige Schlüsselfragen zu Ihrem spezifischen Anwendungsfall hinaus. Hier ist ein praktischer Entscheidungsrahmen:
PNG verwenden, wenn:
- Sie garantierte universelle Kompatibilität brauchen — einschließlich Legacy-Systeme, E-Mail-Clients und ältere native Apps.
- Sie Quelldateien für weitere Bearbeitung erstellen — PNGs verlustfreie Komprimierung macht es ideal als Zwischenformat in Design-Workflows.
- Sie 16-Bit-Farbtiefe brauchen — PNG unterstützt 16 Bit pro Kanal (48-Bit-Farbe), was für wissenschaftliche und medizinische Bildgebung relevant ist. WebP ist auf 8 Bit pro Kanal beschränkt.
- Ihre Plattform WebP nicht unterstützt — Einige ältere CMS-Plattformen und E-Mail-Marketing-Tools akzeptieren noch keine WebP-Dateien.
WebP verwenden, wenn:
- Sie für die Webauslieferung optimieren — WebP ist 2025 mit 97 % Browser-Unterstützung der bessere Standard.
- Sie kleinere Dateien ohne Qualitätsverlust wollen — Verlustfreies WebP ist 26–33 % kleiner als PNG bei identischer visueller Ausgabe.
- Sie Transparenz mit kleinen Dateigrößen brauchen — Verlustbehaftetes WebP mit Alpha gibt Ihnen transparente Bilder zu einem Bruchteil der PNG-Dateigröße.
- Sie eine performance-fokussierte Website bauen — Der Wechsel von PNG zu WebP ist eine der wirkungsvollsten Optimierungen für Seitengeschwindigkeit und Core Web Vitals.
Der hybride Ansatz
In der Praxis verwenden viele Teams beide Formate:
- PNG als Quell- und Archivformat in ihrer Asset-Pipeline
- WebP als Auslieferungsformat für Browser
- PNG-Fallback über das
<picture>-Element für den kleinen Prozentsatz der Browser, die WebP nicht unterstützen
Das gibt Ihnen das Beste aus beiden Welten: verlustfreie Quelldateien für die Bearbeitung und maximale Komprimierung für die Auslieferung. Unser Ultimativer Leitfaden zur Bildkomprimierung behandelt diese Multi-Format-Strategie ausführlicher.
Fortgeschrittene Überlegungen
WebP Lossless vs. PNG: Wann PNG tatsächlich gewinnt
Während verlustfreies WebP in der überwiegenden Mehrheit der Fälle kleiner als PNG ist, gibt es Randfälle, in denen PNG gleichziehen oder WebP schlagen kann:
- Sehr kleine Bilder (unter 1 KB), bei denen der WebP-Container-Overhead die Dateien etwas größer macht.
- Bilder mit sehr wenigen Farben, bei denen PNGs Palettenmodus (PNG-8) extrem effizient ist.
- Bereits stark optimierte PNGs, die durch Tools wie zopfli verarbeitet wurden, was den Abstand deutlich verringert.
Diese Randfälle sind selten genug, dass „verwenden Sie verlustfreies WebP statt PNG" eine solide allgemeine Regel bleibt.
AVIF: Der nächste Schritt über WebP hinaus
Wenn Sie bereits WebP verwenden und noch bessere Komprimierung wollen, lohnt sich eine Evaluierung von AVIF. Basierend auf dem AV1-Video-Codec der Alliance for Open Media erreicht AVIF typischerweise 20–30 % kleinere Dateien als WebP bei gleichwertiger Qualität. Die Browser-Unterstützung liegt bei etwa 93 % global und wächst. Der Kompromiss ist langsamere Kodierungsgeschwindigkeit und etwas geringere Kompatibilität. Für einen detaillierten Vergleich lesen Sie unseren AVIF-Format: Tiefgehende Analyse.
Fazit
Die PNG-vs.-WebP-Entscheidung im Jahr 2025 ist für die meisten Anwendungsfälle unkompliziert. WebP liefert 26–33 % kleinere Dateien im verlustfreien Modus und dramatisch kleinere Dateien im verlustbehafteten Modus, bei 97 % globaler Browser-Unterstützung. Für die Webauslieferung ist WebP der bessere Standard.
PNG bleibt unverzichtbar als Quellformat, für Workflows, die 16-Bit-Farbtiefe erfordern, und in Umgebungen, in denen universelle Kompatibilität nicht verhandelbar ist. Die beiden Formate ergänzen sich eher, als dass sie konkurrieren — PNG für Erstellung und Archivierung, WebP für Auslieferung und Performance.
Die Kompressionsdaten sprechen für sich: Über fünf gängige Bildtypen sparte verlustfreies WebP 30–33 % im Vergleich zu PNG bei null Qualitätsverlust. Verlustbehaftetes WebP bei Qualität 80 sparte 71–96 % je nach Inhaltstyp. Das sind keine marginalen Gewinne — sie übersetzen sich direkt in schnellere Seitenladezeiten, niedrigere Bandbreitenkosten und bessere Nutzererfahrung.
Bereit, Ihre PNG-Bilder in WebP zu konvertieren? Probieren Sie unseren kostenlosen Formatkonverter — er läuft vollständig in Ihrem Browser, unterstützt Stapelkonvertierung, bewahrt Transparenz und ermöglicht den Seite-an-Seite-Vergleich der Ergebnisse vor dem Download.
Weiterführende Artikel:
