Verlustfrei oder verlustbehaftet: wie Bildkompression arbeitet

Ein Bed & Breakfast in Engelberg erneuert seine Website. Die Inhaberin hat schöne Fotos: die Zimmer, das Frühstück, den Titlis im Abendlicht. Jedes Foto ist rund acht Megabyte gross. Die neue Seite lädt auf dem Telefon quälend langsam, und das Logo, das sie als JPG gespeichert hat, hat plötzlich unscharfe, fleckige Ränder.

Beides hat mit Kompression zu tun, und beides lässt sich lösen, wenn man weiss, was beim Komprimieren eines Bildes eigentlich geschieht.

Zwei Arten, ein Bild kleiner zu machen

Bildformate sparen Platz auf zwei grundsätzlich verschiedene Arten:

• Verlustfrei. Das Bild wird so gespeichert, dass sich jeder Bildpunkt exakt wiederherstellen lässt. Man spart Platz, indem man Wiederholungen geschickt beschreibt — eine einfarbige Fläche braucht weniger Angaben als eine unruhige.
• Verlustbehaftet. Das Format verwirft Informationen, die das Auge wenig vermisst. Das Bild sieht fast gleich aus, ist aber nicht mehr identisch mit dem Original — und oft deutlich kleiner.

MDN, die Entwicklerdokumentation von Mozilla, ordnet die gängigen Formate so ein:

Format	Kompression	Wofür MDN es beschreibt
JPEG	verlustbehaftet	Fotos und Bilder mit weichen Farbverläufen
PNG	verlustfrei	genaue Wiedergabe und Transparenz
GIF	verlustfrei, höchstens 256 Farben	einfache Bilder und Animationen
WebP	verlustbehaftet oder verlustfrei	Bilder und Animationen, kleiner als PNG oder JPEG
AVIF	verlustbehaftet oder verlustfrei	Bilder und Animationen mit hoher Kompression

Wie JPEG Platz spart

JPEG ist als Empfehlung T.81 der ITU genormt und das verbreitete Format für Fotos. Laut MDN beruht seine verlustbehaftete Kompression auf der diskreten Kosinustransformation. Vereinfacht gesagt: Das Bild wird in kleine Blöcke zerlegt, und in jedem Block werden feine Details, die das Auge kaum wahrnimmt, gröber beschrieben oder weggelassen.

Wie viel weggelassen wird, bestimmt die Qualitätsstufe beim Speichern. Eine eindeutige richtige Zahl gibt es nicht; web.dev, eine Informationsseite von Google für Webentwicklung, empfiehlt, mehrere Qualitätsstufen auszuprobieren und den besten Kompromiss zwischen Qualität und Dateigrösse zu suchen.

Warum Text und Kanten leiden

Das Logo mit den fleckigen Rändern hat einen einfachen Grund. Verlustbehaftete Verfahren sind für weiche Übergänge gemacht, wie sie in Fotos vorkommen. An harten Kanten — Buchstaben, Linien, Logos — fallen die Verluste auf. MDN beschreibt es so: Bei Bildschirmfotos, Diagrammen, Logos und Strichzeichnungen sind Unschärfe und farbige Säume um Text und scharfe Kanten gut sichtbar; für solche Bilder empfiehlt MDN eine verlustfreie Kodierung.

Dazu kommt die Transparenz: JPEG hat keinen Alphakanal. Ein Logo, das auf farbigem Hintergrund frei stehen soll, braucht ein Format mit Transparenz, etwa PNG, WebP oder AVIF — oder, für Logos und Symbole, die in jeder Grösse scharf sein sollen, eine Vektorgrafik im SVG-Format.

WebP und AVIF

Neuere Formate können beides: verlustbehaftet und verlustfrei. MDN nennt Zahlen für den Vergleich: Verlustbehaftete WebP-Bilder sind im Durchschnitt 25 bis 35 Prozent kleiner als JPEG-Bilder bei ähnlicher Qualität, verlustfreie WebP-Bilder typischerweise 26 Prozent kleiner als dieselben Bilder im PNG-Format. Verlustbehaftete AVIF-Bilder sind laut MDN rund 50 Prozent kleiner als JPEG-Bilder bei ähnlicher Qualität.

MDN empfiehlt für Rasterbilder im Web deshalb in erster Linie WebP oder AVIF, mit PNG oder JPEG als Rückfallebene für Browser, die diese Formate nicht unterstützen. Für den Austausch per E-Mail oder für Programme, die WebP und AVIF nicht kennen, bleibt JPEG oft die sicherere Wahl.

Die Grösse zählt mehr als die Stufe

Die acht Megabyte der Fotos kommen weniger von einer schlechten Kompression als von der Grösse: Ein aktuelles Telefon nimmt Bilder mit mehreren tausend Bildpunkten Breite auf. Auf der Website erscheinen sie vielleicht 1200 Bildpunkte breit.

Die Rechnung dahinter ist quadratisch. web.dev hält fest, dass ein Bildschirm mit doppelter Pixeldichte nicht doppelt, sondern viermal so viele Bildpunkte braucht — doppelt so viele in der Breite und doppelt so viele in der Höhe. Umgekehrt gilt: Ein Bild, das auf die Hälfte der Breite verkleinert wird, hat nur noch ein Viertel der Bildpunkte. Das Verkleinern auf die tatsächlich benötigte Grösse spart deshalb oft mehr als jede Qualitätsstufe.

Farben und Bittiefe

Formate unterscheiden sich auch darin, wie fein sie Farben abstufen. JPEG speichert laut MDN 8 Bit pro Farbkomponente, PNG kann auch 16 Bit pro Komponente speichern. Für eine Website ist das selten entscheidend. Für Bilder, die noch stark bearbeitet oder hochwertig gedruckt werden sollen, kann die feinere Abstufung zählen — ein weiterer Grund, das Original in einem verlustfreien Format oder im Format der Kamera aufzubewahren.

Mit dem Auge prüfen

Ob eine Qualitätsstufe genügt, zeigt am zuverlässigsten ein Blick auf das Ergebnis in Originalgrösse. Zwei Stellen verraten Verluste zuerst: Kanten mit starkem Kontrast, etwa ein Fensterrahmen vor hellem Himmel, und grosse, weiche Verläufe wie ein Abendhimmel, in dem bei zu starker Kompression Stufen sichtbar werden. Sieht beides gut aus, ist die Stufe meist ausreichend.

Das Original behalten

Verlustbehaftete Kompression hat eine Eigenschaft, die man kennen sollte: Was verworfen wurde, kommt nicht zurück. Jedes erneute Speichern als JPEG ist eine neue verlustbehaftete Kompression, auf der Grundlage eines Bildes, das schon Informationen verloren hat. Wer ein Bild mehrfach bearbeitet und jedes Mal als JPEG speichert, sieht die Verluste wachsen.

Daraus folgt eine einfache Arbeitsweise: das Original unverändert aufbewahren und jede verkleinerte oder komprimierte Fassung aus dem Original erzeugen, nicht aus der letzten Fassung.

Was sonst noch in der Datei steckt

Nicht jedes Byte einer Bilddatei ist Bild. Fotos aus Telefonen und Kameras enthalten oft Metadaten: Aufnahmedatum, Kameramodell, manchmal den genauen Aufnahmeort. Für die Website des Bed & Breakfast sind diese Angaben überflüssig — und der Aufnahmeort eines Fotos aus der privaten Wohnung der Inhaberin gehört ohnehin nicht ins Netz. Beim Komprimieren lassen sie sich gleich mit entfernen.

Fotos vom iPhone

Wer mit einem iPhone fotografiert, hat die Originale oft im HEIC-Format. Manche Programme für Websites erwarten aber JPG, PNG oder WebP. Was beim Umwandeln zu beachten ist, beschreibt der Beitrag HEIC in JPG umwandeln.

Für das Bed & Breakfast in Engelberg

Die Inhaberin geht die Bilder einmal durch: Die Fotos werden auf die Breite verkleinert, in der sie auf der Website erscheinen, verdoppelt für Bildschirme mit hoher Pixeldichte, und als WebP mit einer Qualitätsstufe gespeichert, die sie an drei Beispielen ausprobiert hat. Das Logo bekommt sie von ihrer Grafikerin als SVG. Die Originale bleiben in einem eigenen Ordner, und die Metadaten werden entfernt.

Die Bild-Werkzeuge, die wir entwickeln, werden Bilder komprimieren, verkleinern und zwischen JPG, PNG, WebP und HEIC umwandeln — verarbeitet in der Schweiz, im Arbeitsspeicher, ohne dass ein Bild gespeichert bleibt, und im vertraulichen Modus ganz auf dem eigenen Gerät.