Ratgeber · grundlagen
WebP-Qualität und Kompression: den Regler richtig einstellen
Was der WebP-Qualitätswert technisch bedeutet, wie er Dateigröße und sichtbare Artefakte steuert und welche Stufe zu Fotos, Grafiken und Thumbnails passt. Mit konkreten Empfehlungen für den Regler.
Wenn du auf jpgwebp.de ein JPG in WebP umwandelst, ist der Qualitäts-Regler die wichtigste Stellschraube. Er entscheidet darüber, wie klein deine Datei am Ende wird und ob man dem Bild die Kompression ansieht. Der Standardwert liegt bei 80 Prozent, und für die meisten Fotos ist das eine sehr gute Wahl. Aber es lohnt sich zu verstehen, was hinter dieser Zahl steckt, damit du je nach Bildtyp bewusst nach oben oder unten korrigieren kannst.
Dieser Ratgeber erklärt, was der Qualitätswert technisch bedeutet, wo der Unterschied zwischen verlustbehafteter und verlustfreier WebP-Kompression liegt und welche Stufe zu welchem Bild passt. Alles bezogen auf den Regler, den du direkt im Tool bedienst.
Was der Qualitätswert überhaupt bedeutet
Der Regler auf jpgwebp.de zeigt einen Prozentwert zwischen 40 und 100. Technisch ist das nichts anderes als der Qualitätsparameter, den der WebP-Encoder erwartet. Im Browser läuft die Umwandlung über die Canvas-API, konkret über den Aufruf canvas.toBlob('image/webp', quality). Der zweite Wert, quality, ist eine Zahl zwischen 0.0 und 1.0. Aus deinen 80 Prozent im Regler wird also intern der Wert 0.8.
Diese Zahl ist keine Angabe darüber, wie viel Prozent des Bildes erhalten bleiben. Sie ist ein Regler für die Aggressivität der Kompression. Ein hoher Wert weist den Encoder an, möglichst nah am Original zu bleiben und nur wenig wegzulassen. Ein niedriger Wert erlaubt ihm, deutlich mehr Bildinformation zu verwerfen, um eine kleinere Datei zu erreichen. Der Encoder arbeitet dabei mit denselben Grundprinzipien wie andere verlustbehaftete Formate: Er zerlegt das Bild in Blöcke, wandelt sie in Frequenzanteile um und rundet feine Details weg, die das menschliche Auge ohnehin kaum bemerkt.
Wichtig ist der Zusammenhang: Der Qualitätswert ist eine Vorgabe, kein Versprechen. Wie stark sich ein bestimmter Wert auf die Größe auswirkt, hängt stark vom Bildinhalt ab. Ein Foto mit viel Himmel und wenig Struktur lässt sich bei 80 Prozent extrem klein komprimieren. Ein Bild voller feiner Muster, Text oder Rauschen braucht bei gleichem Regler-Wert mehr Speicherplatz, weil es schlicht mehr Information enthält.
Deshalb kannst du zwei verschiedene Fotos mit demselben Wert von 80 Prozent umwandeln und trotzdem sehr unterschiedliche Ersparnisse sehen. Das ist kein Fehler, sondern das erwartete Verhalten. Der Encoder gibt jedem Bild so viele Daten, wie es bei der eingestellten Qualität braucht. Die Prozentangabe im Regler beschreibt also die angestrebte Bildtreue, während die Ersparnis-Anzeige im Tool dir hinterher das tatsächliche Ergebnis für dieses eine Bild zeigt. Beide Zahlen gehören zusammen, sind aber nicht dasselbe.
Verlustbehaftet oder verlustfrei
WebP kann in zwei grundverschiedenen Modi arbeiten, und das ist einer der Gründe, warum das Format so vielseitig ist. Wenn du mehr über den Aufbau des Formats wissen willst, lohnt sich vorab der Artikel zu den WebP-Format-Grundlagen.
Die verlustbehaftete Kompression (lossy) ist der Normalfall, wenn du ein Foto umwandelst. Sie wirft gezielt Details weg und erzielt dadurch sehr kleine Dateien. Genau hier greift der Qualitäts-Regler: Er steuert, wie viel weggeworfen werden darf. Der Standardwert 80 Prozent liefert bei Fotos einen guten Kompromiss aus Größe und Aussehen.
Die verlustfreie Kompression (lossless) dagegen behält jedes einzelne Pixel exakt bei. Es geht keine Information verloren, das Bild ist nach der Umwandlung identisch zum Original. Der Preis dafür ist eine größere Datei. Verlustfreies WebP ist immer dann sinnvoll, wenn scharfe Kanten und flächige Farben wichtig sind, etwa bei Logos, Screenshots, Diagrammen oder Text auf Bildern. Bei diesen Motiven fallen verlustbehaftete Artefakte besonders unangenehm auf, weil das Auge harte Kanten sehr genau prüft.
Ein Hinweis zur Umsetzung im Browser: Die Canvas-API ist auf verlustbehaftetes WebP ausgelegt. Der Qualitäts-Regler von jpgwebp.de erzeugt daher lossy WebP. Da dein Ausgangsmaterial ohnehin ein JPG ist, ist das kein Nachteil, denn ein JPG war bereits verlustbehaftet komprimiert. Eine verlustfreie WebP-Datei würde dir hier keine bessere Bildqualität zurückholen, sondern nur die vorhandenen JPG-Artefakte pixelgenau einfrieren und dabei eine größere Datei erzeugen.
Wie der Regler Größe und Artefakte beeinflusst
Der Zusammenhang zwischen Regler-Wert und Dateigröße ist nicht linear. Von 100 auf etwa 80 Prozent herunterzugehen spart oft sehr viel Speicherplatz, ohne dass man einen Unterschied sieht. Der Bereich zwischen 100 und 90 kostet dagegen viele Kilobyte für kaum wahrnehmbaren Gewinn. Deshalb ist die Voreinstellung auf 80 Prozent kein Zufall, sondern trifft den Punkt, an dem das Verhältnis aus Ersparnis und Qualität am günstigsten liegt.
Ein praktischer Weg, das für dein eigenes Bild herauszufinden, ist einfaches Ausprobieren. Stell den Regler auf 80 Prozent, sieh dir die Vorschau an und merk dir die Ersparnis. Geh dann testweise auf 90 und auf 70, um zu spüren, wo bei genau diesem Motiv der Punkt liegt, an dem die Datei noch deutlich kleiner wird, ohne dass du einen Unterschied siehst. Weil alles lokal im Browser passiert, kostet dich so ein Vergleich nur ein paar Klicks und keinerlei Wartezeit auf einen Upload.
Nach unten hin verschiebt sich das Bild. Ab etwa 60 Prozent werden Artefakte je nach Motiv sichtbar, und unter 50 Prozent muss man klar mit erkennbaren Qualitätseinbußen rechnen. Typische Artefakte sind:
- Blockbildung: In flächigen Bereichen wie Himmel oder Haut entstehen leicht kantige Farbstufen statt sanfter Übergänge.
- Ringing: Rund um harte Kanten, besonders um Text, erscheinen feine Schatten oder Doppelkonturen.
- Farbverlust: Feine Farbnuancen verschwimmen, gesättigte Flächen wirken matschig.
- Detailverlust: Kleine Strukturen wie Haare, Grashalme oder Textur gehen verloren und wirken verschmiert.
Ehrlich gesagt: Ein niedriger Wert spart zwar Platz, aber die Artefakte sind irreversibel. Was der Encoder einmal weggeworfen hat, bekommst du nicht zurück, indem du das WebP später wieder mit höherer Qualität abspeicherst. Deshalb ist die Ersparnis-Anzeige im Tool nur die halbe Wahrheit. Sie sagt dir, wie viel du gespart hast, nicht, ob das Bild dabei gelitten hat. Diesen zweiten Teil beurteilst am besten du selbst, indem du die Vorschau prüfst, bevor du herunterlädst.
Orientierungstabelle für den Regler
Die folgende Tabelle gibt dir einen Startwert je nach Verwendungszweck. Sieh sie als Ausgangspunkt, nicht als starre Regel, denn das ideale Ergebnis hängt immer vom konkreten Bild ab.
| Qualitätsstufe | Einsatzzweck | Ergebnis |
|---|---|---|
| 90-100 % | Archivfotos, Bilder mit vielen feinen Details, Nachbearbeitung geplant | Nahezu original, größere Datei |
| 80-85 % | Fotos für Web und Blog, Produktbilder, Standardfall | Sehr gutes Verhältnis, kaum sichtbare Verluste |
| 75-80 % | Große Hintergrundbilder, Hero-Bereiche | Deutlich kleiner, meist unauffällig |
| 60-70 % | Vorschaubilder, Bilder in Listen, unwichtige Grafik | Sichtbar komprimiert, akzeptabel bei kleiner Darstellung |
| 40-55 % | Thumbnails, sehr kleine Vorschau, Platzhalter | Kleinste Datei, deutliche Artefakte in großer Ansicht |
Der Default von 80 Prozent deckt den mit Abstand häufigsten Fall ab, nämlich ein normales Foto fürs Web. Nach oben korrigierst du, wenn feine Details wichtig sind oder das Bild später noch bearbeitet wird. Nach unten gehst du nur, wenn das Bild klein dargestellt wird und Ladezeit wichtiger ist als jedes Detail.
Empfehlungen je Bildtyp
Fotos sind der klassische Anwendungsfall für verlustbehaftetes WebP. Hier liegst du mit 75 bis 85 Prozent fast immer richtig. Die vielen weichen Übergänge in Fotos verzeihen Kompression gut, und die Ersparnis gegenüber dem JPG ist spürbar. Warum WebP hier gegenüber JPG punktet, zeigt der Vergleich zwischen JPG und WebP im Detail.
Grafiken mit scharfen Kanten, also Logos, Icons, Diagramme oder Screenshots mit Text, sind der schwierige Fall für lossy WebP. Text und harte Konturen zeigen Ringing-Artefakte schon bei mittleren Werten. Da der Browser-Regler nur verlustbehaftet arbeitet, solltest du hier möglichst hoch gehen, also 90 Prozent und mehr. Ist absolute Schärfe entscheidend, ist ein Foto-Format wie WebP ohnehin nicht ideal, und ein PNG oder verlustfreies WebP aus einem dedizierten Programm wäre die bessere Wahl.
Thumbnails und kleine Vorschaubilder darfst du getrost stärker komprimieren. Bei einer Darstellung von wenigen hundert Pixeln fallen Artefakte kaum auf, und die kleine Datei zahlt sich beim Laden aus. Werte zwischen 45 und 65 Prozent sind hier oft völlig ausreichend.
Das Zusammenspiel mit Auflösung und Breite
Der Qualitäts-Regler ist nur ein Hebel. Der zweite, oft unterschätzte Hebel ist die Auflösung. Ein Bild, das mit 4000 Pixeln Breite vorliegt, aber im Web nur mit 800 Pixeln angezeigt wird, verschwendet enorm viel Speicherplatz, egal wie du den Qualitäts-Regler stellst. Die Pixel, die niemand sieht, werden trotzdem komprimiert und mitgeliefert.
Deshalb gilt: Erst die Bildbreite an die tatsächliche Darstellungsgröße anpassen, dann über die Qualität feinjustieren. Ein auf 1200 Pixel verkleinertes Foto mit 80 Prozent Qualität ist fast immer kleiner und schneller als ein riesiges Original mit 60 Prozent. Beide Hebel zusammen ergeben das beste Ergebnis, und in dieser Reihenfolge angewendet vermeidest du unnötige Artefakte durch übertriebene Kompression.
Für den Web-Einsatz zahlt sich diese Disziplin doppelt aus, weil kleine, passend dimensionierte Bilder die Ladezeit und damit auch die Suchmaschinen-Bewertung verbessern. Wie stark WebP hier gegenüber älteren Formaten hilft, beschreibt der Ratgeber zu WebP, Web-Performance und SEO.
Ein wichtiger Hinweis zur Mehrfach-Kompression
Zum Schluss noch eine Sache, die in der Praxis oft übersehen wird. Jede verlustbehaftete Speicherung verliert Information, und diese Verluste summieren sich. Wenn du ein bereits komprimiertes WebP nimmst, es öffnest und erneut als WebP mit lossy-Qualität speicherst, verliert es ein zweites Mal Bildinformation, auch wenn du den Regler auf 100 stellst. Das nennt man Generationsverlust.
Für deinen Ablauf auf jpgwebp.de heißt das: Arbeite möglichst mit dem originalen JPG als Quelle und wandle es in einem Schritt in dein finales WebP um. Wandle nicht wiederholt hin und her. Da die gesamte Umwandlung lokal in deinem Browser läuft und keine Datei hochgeladen wird, hast du volle Kontrolle über diesen Prozess. Bewahr im Zweifel dein Original auf, dann kannst du später jederzeit mit einem anderen Qualitätswert neu umwandeln, ohne dich in einer Kette von Verlusten zu verfangen.
Hast du einen Fehler entdeckt oder einen Quellen-Hinweis für uns? Schreib gern an info@akara-solutions.de.
Quellen
- Google Developers: WebP (developers.google.com/speed/webp)
- MDN Web Docs: HTMLCanvasElement.toBlob()
- cwebp Encoder Documentation
Korrekturen oder bessere Quellen? Schreib an info@akara-solutions.de. Änderungen landen mit Datum auf /korrekturen.
