Eine Zahl zwischen 0 und 1

Wenn ein Bild als JPG oder WebP gespeichert wird, übergibt der Code der Canvas-API einen einzigen Qualitätswert — eine Zahl zwischen 0 und 1:

canvas.toBlob(blob => { ... }, "image/jpeg", 0.8);

Diese 0.8 ist alles, was den Unterschied zwischen einem gestochen scharfen 4-MB-Bild und einem matschigen 200-KB-Bild ausmacht. Der Schieberegler im Kompressions-Tool setzt genau diesen Wert. Aber was passiert dabei eigentlich im Bild?

Was „Qualität" technisch bedeutet

JPG (und verlustbehaftetes WebP) zerlegt das Bild in kleine Blöcke und wirft gezielt Bildinformation weg, die das Auge kaum vermisst — feinste Helligkeits- und Farbunterschiede. Der Qualitätswert steuert, wie aggressiv weggeworfen wird: Bei 1 bleibt fast alles erhalten, bei 0,3 wird drastisch reduziert. Je mehr weggeworfen wird, desto kleiner die Datei — und desto sichtbarer die typischen JPEG-Artefakte: Klötzchen an Kanten, Wolken in glatten Flächen.

Die Kurve ist nicht linear — und das ist der Clou

Der wichtigste Aha-Moment beim Bauen des Tools: Das Verhältnis von Qualität zu Dateigröße ist nicht gleichmäßig. Die ersten Schritte von 100 herunter kosten kaum sichtbare Qualität, sparen aber enorm viel:

  • 100 → 90: kaum ein sichtbarer Unterschied, aber oft schon halb so groß.
  • 90 → 80: immer noch kaum wahrnehmbar, weitere deutliche Ersparnis.
  • 80 → 60: hier beginnt man, genauer hinschauen zu müssen; bei Fotos oft noch akzeptabel.
  • unter 50: Artefakte werden offensichtlich, die Ersparnis pro Stufe wird kleiner.

Anders gesagt: Die teuersten Bytes eines Bildes stecken in den letzten Prozenten Qualität, die kaum jemand sieht. Genau deshalb ist Komprimieren so wirksam — man gibt fast nichts Sichtbares auf und gewinnt viel.

Warum unser Standard 80 ist, nicht 100

Der Regler startet bewusst bei etwa 80 % (0,8). Das ist kein Zufall, sondern der viel zitierte Sweet Spot: hoch genug, dass Fotos für den Bildschirm praktisch verlustfrei aussehen, niedrig genug, dass die Datei bereits drastisch geschrumpft ist. Würden wir 100 voreinstellen, bekämen die meisten Nutzer unnötig große Dateien, ohne den Unterschied je zu sehen. 80 ist die ehrliche Voreinstellung für „sieht gut aus, ist schön klein".

Wichtig ist trotzdem, dass der Regler da ist: Wer ein Bild noch weiter drücken muss (E-Mail-Limit, langsames Portal), geht runter; wer ein Detail-kritisches Bild hat (Produktfoto mit feiner Textur), geht hoch. Die Voreinstellung ist ein guter Startpunkt, keine Bevormundung.

Format ändert die Rechnung

Derselbe Qualitätswert bedeutet bei verschiedenen Formaten Verschiedenes: WebP bei 0,8 ist meist kleiner als JPG bei 0,8, bei ähnlichem Aussehen. Und bei Grafiken mit scharfem Text ist ein hoher JPG-Qualitätswert oft die falsche Antwort — dort gehört verlustfreies PNG hin, wo der Qualitätsregler gar keine Rolle spielt. Das Werkzeug lässt die Formatwahl deshalb bewusst offen.

Die Lektion

Was beim Bauen hängen geblieben ist: Ein einziger, gut gewählter Standardwert nimmt den meisten Nutzern die schwierigste Entscheidung ab. Die wenigsten wollen über Kompressionskurven nachdenken — sie wollen ein Bild, das gut aussieht und klein ist. Die Kunst liegt nicht darin, tausend Optionen zu bieten, sondern die richtige Voreinstellung zu treffen und den Regler für die Ausnahmen bereitzuhalten. Bei der Bildkompression heißt diese Voreinstellung 80.

Quellen

MDN — toBlob() und der Qualitätsparameter · MDN — JPEG-Bildformat.