WebP vs. PNG vs. JPG: So wählen Sie das richtige Bildformat
JPG ist für Fotos, die sich überall öffnen lassen müssen, PNG für exakte Pixel, und WebP erledigt im Web beide Aufgaben mit kleineren Dateien.
Die Wahl des Bildformats läuft auf drei Fragen hinaus: Darf der Encoder Details verwerfen, braucht das Bild transparente Bereiche, und wo wird die Datei geöffnet? JPG, PNG und WebP beantworten diese Fragen jeweils anders. Für Bilder auf einer Website ist WebP meist die beste Wahl, doch an manchen Stellen sind PNG und JPG weiterhin überlegen. Wer weiß, wo, erspart sich verwaschene Logos, weiße Kästen um freigestellte Motive und Upload-Formulare, die die Datei ablehnen.
Die Formate im Vergleich
| JPG (JPEG) | PNG | WebP | |
|---|---|---|---|
| Kompression | Verlustbehaftet | Verlustfrei | Verlustbehaftet oder verlustfrei |
| Transparenz | Nein | Ja, voller Alphakanal | Ja, in beiden Modi |
| Animation | Nein | Über APNG | Ja |
| Farbtiefe | In der Praxis 8 Bit pro Kanal | Bis zu 16 Bit pro Kanal | 8 Bit pro Kanal |
| Maximale Größe | 65.535 × 65.535 Pixel | Über 2 Milliarden Pixel pro Seite | 16.383 × 16.383 Pixel |
| Öffnet sich in | Praktisch allem | Praktisch allem | Allen aktuellen großen Browsern; nicht in jeder App und jedem Upload-Formular |
| Am besten für | Fotos, die überall funktionieren müssen | Screenshots, Oberflächen, Grafiken mit scharfen Kanten | Die meisten Bilder auf einer Website |
Verlustbehaftet und verlustfrei: der eigentliche Unterschied
Verlustbehaftete Kompression verwirft Details, die dem Auge wahrscheinlich nicht auffallen, und eine Qualitätseinstellung legt fest, wie viel. Das passt zu Fotos, in denen Rauschen und Verläufe kleine Änderungen verbergen. Text, dünnen Linien und flachen Farbflächen schadet es dagegen: Sie bekommen weiche Kanten und leichte Flecken. Jedes erneute Speichern kostet ein wenig mehr Qualität, wandeln Sie daher immer vom Original um und nicht von einem früheren JPG.
Verlustfreie Kompression erhält jedes Pixel exakt. Sie ist die richtige Wahl für Screenshots, Diagramme, Pixel-Art und alles, was Sie später noch bearbeiten. Bei einem Foto entsteht dagegen eine deutlich größere Datei, weil sich Kamerarauschen nur mit viel Aufwand exakt speichern lässt.
JPG ist nur verlustbehaftet, PNG nur verlustfrei. WebP vereint beide Modi in einem Format, und das ist sein wichtigster praktischer Vorteil: Ein Foto und ein Screenshot können beide WebP sein, jeweils auf die passende Weise komprimiert.
Wie viel kleiner ist WebP?
Google, das das Format entwickelt hat, veröffentlicht diesen Vergleich: Verlustfreie WebP-Bilder sind 26% kleiner als PNGs, verlustbehaftete WebP-Bilder 25–34% kleiner als vergleichbare JPEGs bei gleichwertiger SSIM-Qualität. Das sind Durchschnittswerte über Googles Testbilder, kein Versprechen für jede einzelne Datei.
Ihre eigenen Ergebnisse können besser oder schlechter ausfallen. Laut Googles WebP-FAQ kann eine WebP-Datei größer werden als ihre Quelle, typischerweise wenn ein PNG mit nur wenigen Farben in verlustbehaftetes WebP umgewandelt wird oder wenn ein bereits verlustbehaftetes Bild als verlustfreies WebP gespeichert wird. Verlustbehaftetes WebP verwendet außerdem immer 4:2:0-Chroma-Subsampling und speichert Farbe mit der halben horizontalen und vertikalen Auflösung der Helligkeit. Kräftig rote oder blaue Kanten in Grafiken können deshalb leicht verschmiert wirken, wo ein PNG gestochen scharf bleibt. Der verlässliche Weg ist, umzuwandeln und zu vergleichen: Der Bildkonverter zeigt für jede Datei die ursprüngliche und die neue Größe, sodass Sie die tatsächliche Ersparnis sehen, bevor Sie das Ergebnis übernehmen.
Transparenz und Animation
JPG hat keinen Alphakanal. Wandeln Sie ein transparentes Logo in JPG um, wird die transparente Fläche mit einer Vollfarbe gefüllt; der Konverter dieser Website verwendet Weiß. PNG speichert den vollen Alphakanal verlustfrei, was transparente Fotos wie freigestellte Produktbilder schwer macht. WebP unterstützt Alpha auch im verlustbehafteten Modus, sodass ein freigestelltes Foto seine weichen Kanten bei einem Bruchteil der PNG-Größe behält. In genau diesem Fall spart PNG in WebP am meisten.
Bei Animationen hat JPG gar nichts zu bieten, PNG hat die Erweiterung APNG, und bei WebP ist Animation eingebaut. Laut Google können animierte WebP-Dateien kleiner sein als dieselbe Animation als GIF oder APNG. Für lange oder komplexe Clips ist ein stummes MP4- oder WebM-Video meist leichter als jedes Bildformat.
Welches Format Sie verwenden sollten
| Bild | Format | Warum |
|---|---|---|
| Fotos auf einer Website | WebP, verlustbehaftet | Kleinste breit unterstützte Option |
| Fotos für E-Mail, Druck oder Upload-Formulare | JPG | Öffnet sich in jedem Programm und passiert jedes Formular |
| Screenshots mit Text, UI-Entwürfe | PNG oder verlustfreies WebP | Text bleibt scharf, nichts verschmiert |
| Logos und Icons | SVG, wenn Vektoren vorliegen, sonst PNG oder WebP | Behält scharfe Kanten und Transparenz |
| Produktfoto mit transparentem Hintergrund | WebP, verlustbehaftet mit Alpha | Weiche Kanten bei einem Bruchteil der PNG-Größe |
| Kurze Animation | Animiertes WebP, oder MP4/WebM für längere Clips | Viel leichter als GIF |
| Masterkopien zur späteren Bearbeitung | PNG oder die Originaldatei der Kamera | Kein Generationsverlust |
Bestehende Bilder sind schnell umgestellt: JPG in WebP für Fotos, PNG in WebP für Grafiken und freigestellte Motive. Lässt sich ein WebP in älterer Software nicht öffnen, hilft WebP in JPG, und PNG in JPG verkleinert Fotos, die versehentlich als PNG gespeichert wurden.
Browser-Support und ein Fallback mit picture
Aktuelle Versionen von Chrome, Edge, Firefox und Safari zeigen WebP an, für die meisten Websites genügt also ein WebP in einem gewöhnlichen <img>. Müssen Sie auch alte Browser unterstützen oder möchten Sie zuerst ein neueres Format anbieten, verwenden Sie das Element <picture>. Der Browser nimmt die erste <source>, deren Typ er unterstützt, und fällt sonst auf das <img> zurück, das auch Alt-Text und Abmessungen trägt:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Harbour at sunset" width="1600" height="900">
</picture>Ein Server oder CDN kann dieselbe Aufgabe ohne zusätzliches Markup übernehmen, indem er den Accept-Header der Bildanfrage auswertet und WebP ausliefert, wenn es dort aufgeführt ist. Wenn Sie das tun, senden Sie Vary: Accept, damit Caches die Versionen auseinanderhalten.
Wo AVIF ins Bild passt
AVIF basiert auf dem Videocodec AV1 und wird von aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützt. Bei ähnlicher Bildqualität erzeugt es oft kleinere Dateien als WebP, ist aber langsamer beim Codieren, und weniger Werkzeuge, Editoren und Upload-Formulare akzeptieren es. Eine verbreitete Konfiguration ist AVIF zuerst, WebP als Zweites und JPG zuletzt, wie im Beispiel oben. Der Konverter dieser Website kann AVIF-Dateien lesen, wenn Ihr Browser sie decodieren kann, schreibt aber WebP, PNG, JPG und ICO, kein AVIF.
Umwandeln im Browser: eine Einschränkung bei Safari
Browserbasierte Konverter zeichnen das Bild auf ein Canvas und lassen es vom Browser codieren. Chrome, Edge und Firefox können auf diesem Weg WebP erzeugen. Safari zeigt WebP zwar an, kann es aber nicht aus einem Canvas codieren und liefert stillschweigend ein PNG. Der Konverter dieser Website bricht deshalb mit einer Meldung ab, statt ein PNG unter dem Namen .webp zu speichern. Auf dem Mac wandeln Sie in WebP daher mit Chrome, Edge oder Firefox um. Auf iPhone und iPad nutzen in der Regel auch andere Browser die Engine von Safari; wandeln Sie also am Computer um oder wählen Sie PNG oder JPG.
Zwei weitere Punkte sind wissenswert. In Chrome erzeugt eine Qualität von 100 ein verlustfreies WebP, niedrigere Werte ein verlustbehaftetes; das haben wir durch Untersuchen der codierten Dateien bestätigt. Und die Codierung über ein Canvas übernimmt keine Metadaten, EXIF-Daten wie Kameramodell und GPS-Position fehlen in der umgewandelten Datei also.