WebP, PNG und JPG im Vergleich: Welches Format für deine Bilder?
„Verwende für alles WebP“ ist der häufigste Ratschlag, und er ist oft genug falsch, um ins Gewicht zu fallen. Die drei Formate komprimieren grundlegend unterschiedlich. Welches am besten abschneidet, hängt vom Bildinhalt ab – manchmal unterscheiden sich die Dateigrößen um ein Vielfaches. Hier erfährst du, wie die einzelnen Formate funktionieren und wie du für jede Datei entscheidest.
Wie die einzelnen Formate komprimieren
JPG: verlustbehaftet, auf Fotos abgestimmt
JPG teilt das Bild in 8×8-Blöcke, wandelt jeden in Frequenzkomponenten um und verwirft hochfrequente Details, die dein Auge am wenigsten bemerkt. Der Qualitätsregler steuert, wie stark verworfen wird. Bei Fotos funktioniert das hervorragend, weil Details fein und unregelmäßig sind und kleine Fehler im Rauschen verschwinden.
Bei allem mit scharfen Kanten funktioniert es schlecht. Eine schwarze Linie auf Weiß ist reine hochfrequente Information, genau das, was das Format verwirft. Deshalb entstehen die typischen Ringing-Säume um Text und Konturen. JPG hat außerdem überhaupt keinen Alphakanal, nicht bloß einen schwachen. Speichere ein transparentes Bild als JPG, und die Transparenz wird dauerhaft durch eine Vollfarbe ersetzt, meist Schwarz oder Weiß.
PNG: verlustfrei, auf flächige Grafiken abgestimmt
PNG verwirft niemals Pixeldaten. Es sagt jeden Pixel anhand seiner Nachbarn voraus, speichert die kleinen Unterschiede und komprimiert das Ergebnis mit DEFLATE. Lange Folgen identischer oder nahezu identischer Pixel schrumpfen dabei auf fast nichts. Deshalb lassen sich flächige Grafiken, Bildschirmaufnahmen von Benutzeroberflächen, Liniengrafiken und Pixel-Art so gut komprimieren.
Das Format hat zwei Modi, die du unterscheiden solltest. Truecolor-PNG speichert vollständige 24-Bit-Farbe und optional Alpha. Paletten-PNG (PNG-8) speichert einen Index in einer Tabelle mit bis zu 256 Farben. Deshalb benötigt jedes Pixel nur ein Byte statt vier. Bei flächigen Grafiken, die tatsächlich wenige Farben verwenden, ist der Palettenmodus erheblich platzsparender und völlig verlustfrei. Die meisten nutzen ihn nie, dabei ist er der Grund, warum PNG WebP manchmal klar übertrifft.
WebP: beides in einem Dateiformat
WebP hat zwei getrennte Modi mit derselben Dateiendung. Verlustbehaftetes WebP verwendet aus der Videokodierung übernommene Blockvorhersage. Es erzeugt typischerweise 20–30% kleinere Dateien als JPG bei vergleichbarer wahrgenommener Qualität. Verlustfreies WebP verwendet ein anderes Verfahren mit ausgefeilterer Vorhersage als PNG und liegt meist 20–30% unter einem Truecolor-PNG.
Entscheidend ist, dass beide Modi Alpha unterstützen. Das ist der eigentliche Vorteil von WebP: Zuvor musste ein transparentes Bild PNG sein, also verlustfrei und damit groß. Verlustbehaftetes WebP mit Alpha ermöglicht, ein freigestelltes Foto genauso zu komprimieren wie ein gewöhnliches.
Der Vergleich auf einen Blick
| JPG | PNG | WebP | |
|---|---|---|---|
| Kompression | Nur verlustbehaftet | Nur verlustfrei | Verlustbehaftet oder verlustfrei |
| Alphakanal | Keine | Ja, 8-Bit | Ja, beide Modi |
| Am besten für | Fotografien | Flächige Grafiken, Pixel-Art, Screenshots | Fotos im Web, transparente Fotos |
| Schwach bei | Text, Liniengrafiken, Transparenz | Fotografien (sehr große Dateien) | Flächige Grafik mit wenigen Farben gegenüber PNG mit Farbpalette |
| Animation | Nein | APNG, lückenhafte Unterstützung | Ja |
| Wiederholtes erneutes Speichern | Verschlechtert sich jedes Mal | Sicher | Verschlechtert sich im verlustbehafteten Modus |
| Browserunterstützung | Universell | Universell | Universell seit ~2020 |
| Werkzeuge außerhalb des Browsers | Überall | Überall | Gut, aber nicht garantiert |
Nach dem Bildinhalt auswählen
Fotos, ohne Transparenz
Verlustbehaftetes WebP mit Qualität 80 ist die kleinste sinnvolle Lösung, mit JPG bei Qualität 80 als kompatible Rückfalloption. Beide funktionieren; WebP ist typischerweise ein Viertel kleiner. Eine per Inhaltsaushandlung bereitgestellte <picture> Element mit WebP-Auslieferung und JPG-Ersatz liefert beides. 2026 ist diese Ersatzlösung jedoch meist nur zusätzliche Absicherung.
Flächige Grafiken, Logos, Pixel-Art, Screenshots von Benutzeroberflächen
PNG, und probiere den Palettenmodus. Hier versagt die Regel „WebP für alles“ am deutlichsten. Ein Logo mit zwölf Farben kann als Paletten-PNG nur wenige Kilobytes groß sein. Dasselbe Logo ist als verlustbehaftetes WebP mit Qualität 80 oft größer, weil die verlustbehaftete Kodierung Bits für Details auf Blockebene benötigt, die eine Palette ohne zusätzlichen Aufwand abbildet. Zudem entstehen Artefakte in vollkommen einheitlichen Flächen. Verlustfreies WebP ist konkurrenzfähig und gewinnt manchmal. Der Unterschied ist aber klein genug, dass sich ein Export beider Formate und ein Vergleich lohnen.
Sprites und alles, was Alpha benötigt
PNG. Dieses Format wird von jeder Spiel-Engine, jedem Editor und jeder Asset-Pipeline problemlos gelesen. Es ist verlustfrei, sodass wiederholte Bearbeitungen keine zusätzlichen Schäden verursachen. Sprites sind außerdem klein genug, dass die Dateigröße selten der begrenzende Faktor ist. Verlustfreies WebP ist ein vernünftiges Auslieferungsformat, wenn deine Engine es unterstützt. Behalte das PNG in jedem Fall als Arbeitskopie. Niemals JPG – ohne Alpha erhält dein sorgfältig freigestelltes Sprite einen weißen Kasten um sich herum.
Fotos mit Transparenz
Das ist das Spezialgebiet von verlustbehaftetem WebP, das hier eine echte Funktionslücke schließt. Ein freigestelltes Produktfoto auf transparentem Hintergrund kann als PNG 800KB groß sein. Als verlustbehaftetes WebP mit Alpha und Qualität 80 kann es ohne sichtbaren Unterschied unter 100KB liegen. Falls du eine Alternative brauchst, ist PNG die einzige und wird um ein Mehrfaches größer sein.
Zwei wissenswerte Beispiele
Mit konkreten Zahlen lassen sich die Abwägungen leichter nachvollziehen. Zwei Fälle aus tatsächlichen Optimierungsdurchgängen:
- Eine PNG-Social-Media-Karte mit 606KB, neu kodiert als JPG mit 81KB. Die Karte bestand aus einem fotografischen Hintergrund mit darüberliegendem Text. Sie wurde als PNG exportiert, weil das in den meisten Designwerkzeugen die Voreinstellung ist. PNG eignet sich schlecht für fotografische Inhalte, weshalb die Datei riesig war. Bei JPG-Qualität 82 ist in der tatsächlich betrachteten Größe kein Unterschied sichtbar. Das ergibt eine Reduktion um 87% durch die Änderung eines einzigen Auswahlfelds.
- Seitenhintergrundbilder wurden durch die Umwandlung von PNG zu WebP ungefähr 57% kleiner. Das waren große, weiche Bilder mit vielen Verläufen: gleichmäßige Inhalte ohne harte Kanten und ohne Transparenz, genau das, was verlustbehaftete Komprimierung am besten verarbeitet. Dasselbe visuelle Ergebnis, weniger als die Hälfte der Bytes.
Beide Erfolge entstanden, weil das Format zum Inhalt gewählt wurde, statt eine pauschale Regel anzuwenden. Bei demselben Test mit einem Symbolsatz aus flachen Farben hätte PNG beide Male gewonnen.
Die Ausnahme für Bilder in sozialen Netzwerken
Ein Einsatzbereich, in dem du bewusst auf WebP verzichten solltest, sind Bilder für Open Graph und Twitter Cards. Diese URLs werden von Crawlern und Bots für Link-Vorschauen abgerufen – Slack, Discord, iMessage, WhatsApp, LinkedIn, RSS-Readern, integrierten Browsern und vielen internen Werkzeugen. Sie werden nicht von den modernen Browsern abgerufen, auf die sich Statistiken zur WebP-Unterstützung beziehen.
Die Unterstützung in dieser Gruppe ist deutlich schlechter, und der Fehler ist auf eine besondere Weise unangenehm: Statt einer sichtbaren Fehlermeldung erscheint dein Link einfach ganz ohne Bild. Du bemerkst es womöglich erst Wochen später, wenn jemand darauf hinweist. JPG stattdessen zu nutzen kostet vielleicht 30% mehr Bytes bei einer einzelnen Datei, die von Infrastruktur abgerufen wird, nicht von Nutzern mit begrenztem Datenvolumen.
Ähnliche Vorsicht gilt bei E-Mails. E-Mail-Programme bilden eine eigene Kompatibilitätswelt, und einige unterstützen WebP weiterhin nicht. Anhänge und Bilder für E-Mails sollten JPG oder PNG sein.
Ein Entscheidungsverfahren
- Wird Transparenz benötigt? Wenn nein, gehe zu Schritt 3. Wenn ja, scheidet JPG vollständig aus.
- Ist das transparente Bild fotografisch? Fotografische Inhalte mit Alpha → verlustbehaftetes WebP. Flächige Grafiken oder Sprites mit Alpha → PNG.
- Ist es ein Foto? Ja → verlustbehaftetes WebP oder JPG, wenn Kompatibilität wichtig ist. Nein → weiter.
- Flache Farben und scharfe Kanten? Exportiere PNG mit Farbpalette und verlustfreies WebP, vergleiche beide Dateien und liefere die kleinere aus. Verlasse dich nicht auf Annahmen.
- Ist es eine Social-Media-Karte, ein E-Mail-Bild oder eine Ressource für einen unbekannten Verarbeitungsablauf? Ignoriere alles oben Genannte und verwende JPG oder PNG.
Schritt 4 wird häufig übersprungen. Zwei Dateien zu exportieren und ihre Byte-Anzahl zu vergleichen dauert fünfzehn Sekunden und ist verlässlicher als jede Faustregel, weil die Antwort tatsächlich vom konkreten Bild abhängt.
Unsere Sprite-Sheet-Schneidewerkzeug exportiert PNG, JPG oder WebP mit Qualitätseinstellung für verlustbehaftete Formate. Du kannst daher ein Sheet einmal zerschneiden und zwei Formate ausprobieren, ohne die Seite zu verlassen. Für Sprites bleibt PNG die sichere Voreinstellung. Das Exportformat ist für fertige Webgrafiken deutlich wichtiger als für Zwischen-Einzelbilder.
Häufig gestellte Fragen
Kann WebP inzwischen sicher ohne Rückfallformat verwendet werden?
Bei Browsern praktisch ja: Jeder aktuelle Browser unterstützt es seit ungefähr 2020, als Safari es ergänzte. Die verbleibenden Lücken liegen außerhalb von Browsern: ältere Desktop-Anwendungen, manche E-Mail-Programme, Crawler und Link-Vorschau-Bots sowie gelegentliche CMS-Upload-Prüfungen. Entscheide danach, wer die Datei abruft, nicht nach der Browserunterstützungstabelle.
Kann eine Datei durch die Konvertierung von PNG in WebP größer werden?
Ja, regelmäßig bei flächigen Grafiken mit wenigen Farben, besonders im Vergleich zu einem Paletten-PNG. Verlustbehaftetes WebP benötigt eine Mindestanzahl von Bits pro Block. Ein Paletten-PNG mit langen Folgen derselben Farbe lässt sich dagegen auf fast nichts komprimieren. Vergleiche immer die tatsächlichen Ausgaben, statt der allgemeinen Aussage zu vertrauen, WebP sei kleiner.
Was ist mit AVIF und JPEG XL?
AVIF komprimiert besser als WebP, besonders bei geringer Qualität, und wird mittlerweile von vielen Browsern unterstützt. Die Kodierung ist jedoch langsamer, und außerhalb von Browsern gibt es weniger Werkzeuge. JPEG XL ist technisch stark, seine Browserunterstützung war allerdings wechselhaft. WebP bleibt die pragmatische Standardwahl; AVIF lohnt sich als erste <source> in einem picture-Element, wenn die Datenmenge wirklich wichtig ist.
Verschlechtert sich ein JPG wirklich durch wiederholtes Speichern?
Ja, wenn das Bild dekodiert und neu kodiert wird. Dasselbe gilt für verlustbehaftetes WebP. Jeder Durchgang quantisiert bereits quantisierte Daten, und die Artefakte verstärken sich. Bewahre eine verlustfreie Masterdatei als PNG oder im nativen Editorformat auf und exportiere daraus verlustbehaftete Versionen, statt die verlustbehaftete Datei direkt zu bearbeiten.
In beide Formate konvertieren und die Bytes vergleichen
Den oben genannten Schritt 4 solltest du tatsächlich durchführen statt schätzen. Der Bildkonverter wandelt PNG, JPG und WebP in jede Richtung und stapelweise um. Er füllt den Hintergrund, wenn Alpha bei der Umwandlung zu JPG sonst verloren ginge. Exportiere dieselbe Datei zweimal, vergleiche die Größen und liefere die kleinere aus. Ist das Format bereits richtig und brauchst du nur eine kleinere Datei, ergänzt der Bildkompressor diesen Ablauf.
Bildkonverter öffnenBildkompressor öffnen