Wie JPEG-Kompression wirklich funktioniert

JPEG ist die Küchenschabe unter den Dateiformaten. Es wurde 1992 standardisiert, ist älter als der Webbrowser und hat jeden Versuch überlebt, es zu ersetzen. WebP, AVIF, HEIC – sie alle komprimieren besser, trotzdem ist JPEG nach wie vor das meistgenutzte Bildformat im Internet. Das liegt zum Teil an Trägheit. Zum Teil liegt es aber auch daran, dass die Kompressions-Pipeline von JPEG wirklich brillant ist – eine Meisterklasse in angewandter Signalverarbeitung, die sich auch dann lohnt, wenn du nie einen Encoder schreibst.

Die meisten Entwickler behandeln JPEG wie eine Blackbox: Bild rein, kleinere Datei raus, Qualitätsregler so lange aufdrehen, bis es akzeptabel aussieht. Wer aber versteht, was in der Box passiert, denkt anders über Bilder, Kompression und den Zielkonflikt zwischen Dateigröße und visueller Qualität.

Die Pipeline auf einen Blick

JPEG-Kompression ist eine Pipeline aus fünf Stufen, und jede davon ist clever gelöst. Der Trick liegt im Zusammenspiel: Jede Stufe bereitet die nächste so vor, dass sie effektiver arbeiten kann.

1. Farbraumkonvertierung — RGB nach YCbCr (Helligkeit von Farbe trennen)
2. Chroma-Subsampling — Auflösung der Farbkanäle reduzieren
3. Diskrete Kosinustransformation (DCT) — Ortsdaten in Frequenzdaten umwandeln
4. Quantisierung — hochfrequente Details verwerfen (hier passiert der verlustbehaftete Schritt)
5. Entropie-Codierung — verlustfreie Kompression der quantisierten Daten

Die Schritte 1 und 2 nutzen aus, wie das menschliche Sehen funktioniert. Die Schritte 3 und 4 nutzen Eigenschaften natürlicher Bilder aus. Schritt 5 ist klassische Datenkompression. Jeder Schritt für sich ist simpel. Die Raffinesse steckt in der Abfolge.

Schritt 1: Farbraumkonvertierung

Deine Kamera nimmt Bilder im RGB-Format auf – Rot-, Grün- und Blaukanal, mit je 8 Bit pro Pixel. Der erste Schritt von JPEG wandelt das in YCbCr um: einen Luminanzkanal (Helligkeit) und zwei Chrominanzkanäle (Farbe). Das ist noch keine Kompression, es geht keine Information verloren. Es ist eine Koordinatentransformation, vergleichbar mit dem Drehen von Achsen.

Warum das Ganze? Weil das menschliche Auge auf Helligkeit weitaus empfindlicher reagiert als auf Farbe. Bei einer Schwarz-Weiß-Fotografie erkennst du unglaublich feine Details, deine Wahrnehmung der Farbauflösung ist dagegen deutlich gröber. Indem JPEG Helligkeit und Farbe trennt, kann es beides unterschiedlich behandeln: Helligkeitsdetails bleiben erhalten, während Farbdetails kräftig reduziert werden.

RGB to YCbCr conversion (simplified):
Y  =  0.299R + 0.587G + 0.114B    (luminance — brightness)
Cb = -0.169R - 0.331G + 0.500B    (blue chrominance)
Cr =  0.500R - 0.419G - 0.081B    (red chrominance)
Note: green dominates the luminance calculation because
human eyes have far more green-sensitive cone cells.
This isn't arbitrary — it matches the physiology.

Schritt 2: Chroma-Subsampling

Hier passiert die erste echte Datenreduktion. Da Menschen Farbe nicht in voller räumlicher Auflösung wahrnehmen, reduziert JPEG die Auflösung der Cb- und Cr-Kanäle – typischerweise in beiden Richtungen um die Hälfte. Das nennt man 4:2:0-Subsampling. Auf vier Luminanzpixel kommt also ein Farbabtastwert.

Das Ergebnis: Die Rohdaten sind gerade halbiert (aus drei Kanälen mit voller Auflösung werden einer mit voller und zwei mit einem Viertel der Auflösung), und das Bild sieht praktisch identisch zum Original aus. Probier es selbst aus: Nimm ein beliebiges Foto, reduziere die Auflösung der Farbkanäle um den Faktor 4, und du wirst den Unterschied kaum erkennen. Dein Gehirn ergänzt die Farbdetails aus der Helligkeitsinformation.

Das funktioniert nicht bei allen Bildern gleich gut. Fotos komprimieren hervorragend, weil natürliche Motive sanfte Farbverläufe haben. Bilder mit scharfen Farbkanten – etwa Text auf farbigem Hintergrund, ein roter Kreis auf Weiß oder Pixelart – zeigen nach dem Chroma-Subsampling sichtbare Farbsäume. Deshalb ist JPEG für Text schlecht: Die scharfen Farbkanten verlaufen ineinander.

Schritt 3: Die Diskrete Kosinustransformation

Ab hier wird JPEG richtig spannend. Das Bild wird in 8×8-Pixel-Blöcke unterteilt, und jeder Block wird aus dem Ortsbereich (Helligkeitswerte der Pixel) in den Frequenzbereich transformiert (wie stark jede räumliche Frequenz vertreten ist).

Man kann es sich so vorstellen: Ein 8×8-Block lässt sich als gewichtete Summe von 64 Basismustern darstellen. Das erste Muster ist ein flacher Block (der Durchschnittswert). Die nächsten Muster ergänzen horizontale und vertikale Verläufe. Muster mit höheren Nummern fügen immer feinere Details hinzu – schnelle Schwankungen in der Helligkeit.

An 8x8 DCT block conceptually:
DC ──► Low frequency ──────────────► High frequency
┌─────┬─────┬─────┬─────┬─────┬─────┬─────┬─────┐
│ AVG │  →  │  →  │  →  │  →  │  →  │  →  │  →  │ Low freq
│     │     │     │     │     │     │     │     │   ↓
│  ↓  │  ↘  │     │     │     │     │     │     │
│     │     │  ↘  │     │     │     │     │     │
│     │     │     │  ↘  │     │     │     │     │
│     │     │     │     │  ↘  │     │     │     │
│     │     │     │     │     │  ↘  │     │     │
│     │     │     │     │     │     │  ↘  │     │
│     │     │     │     │     │     │     │ FINE │ High freq
└─────┴─────┴─────┴─────┴─────┴─────┴─────┴─────┘
Top-left = low frequency (smooth gradients)
Bottom-right = high frequency (sharp edges, fine detail)
Natural images: most energy concentrated in top-left
Text/line art: significant energy in bottom-right

Die DCT selbst ist verlustfrei: Aus den 64 DCT-Koeffizienten lässt sich der ursprüngliche 8×8-Block perfekt rekonstruieren. Entscheidend ist aber Folgendes: Bei natürlichen Bildern (Fotos, Verläufe, organische Strukturen) steckt der größte Teil der Energie in den niederfrequenten Koeffizienten. Die hochfrequenten Koeffizienten, die feine Details beschreiben, fallen meist klein aus. Genau darauf baut der nächste Schritt auf.

Warum 8×8? Es ist ein Kompromiss. Größere Blöcke (16×16, 32×32) würden die Energie besser bündeln, sind aber rechenintensiver und erzeugen bei niedriger Qualität sichtbare 'Blockartefakte'. Kleinere Blöcke (4×4) würden Blockbildung reduzieren, bündeln die Energie aber schlechter. 8×8 erwies sich als Sweet Spot, der sich seit über 30 Jahren gehalten hat.

Schritt 4: Quantisierung – wo die Daten sterben

Das ist der verlustbehaftete Schritt. Jeder DCT-Koeffizient wird durch einen entsprechenden Wert aus einer Quantisierungstabelle geteilt und anschließend auf die nächste ganze Zahl gerundet. Große Divisoren (für hochfrequente Koeffizienten) runden kleine Werte auf null. Diese Nullen sind für immer weg – hier geht dauerhaft Information verloren.

Example quantization (quality ~50):
DCT coefficient: 42.7    Quantization divisor: 16    Result: round(42.7/16) = 3
DCT coefficient: 8.3     Quantization divisor: 40    Result: round(8.3/40)  = 0
DCT coefficient: -2.1    Quantization divisor: 99    Result: round(-2.1/99) = 0
The quality slider in your image editor controls the quantization table.
Quality 100: divisors close to 1 (almost no rounding, huge file)
Quality 75:  moderate divisors (good balance, typical web use)
Quality 50:  large divisors (noticeable artifacts, small file)
Quality 10:  very large divisors (blocky mess, tiny file)

Die Quantisierungstabelle ist der mit Abstand wichtigste Faktor für die Qualität eines JPEG. Der JPEG-Standard definiert eine Standardtabelle, Encoder dürfen aber beliebige Tabellen verwenden. Moderne Encoder wie MozJPEG nutzen optimierte Tabellen, die mehr Qualität aus kleineren Dateien herausholen, indem die Divisoren an die menschliche Wahrnehmung angepasst werden – aggressiver bei Frequenzen, für die Menschen weniger empfindlich sind.

Nach der Quantisierung hat ein typischer 8×8-Block bei mittlerer Qualität vielleicht 6 bis 10 Koeffizienten ungleich null, von 64. Der Rest ist null. Diese massive Reduktion der Werte ungleich null macht den letzten Kompressionsschritt so wirkungsvoll.

Schritt 5: Entropie-Codierung

Der letzte Schritt ist verlustfreie Kompression der quantisierten Koeffizienten. JPEG kombiniert Lauflängenkodierung (RLE) mit Huffman-Codierung. Die Koeffizienten werden im Zickzack-Muster aus dem 8×8-Block gelesen – beginnend beim DC-Koeffizienten oben links und dann mit steigender Frequenz im Zickzack weiter. So werden alle hinteren Nullen gruppiert, was RLE effizient behandeln kann: Statt '0, 0, 0, 0, 0, 0, ..., 0' speichert es 'siebenundvierzig Nullen'.

Die Huffman-Codierung weist häufigen Werten kürzere Bitfolgen zu und seltenen längere. Da die meisten Koeffizienten ungleich null kleine ganze Zahlen sind (1, -1, 2, -2), bekommen sie sehr kurze Codes. Das Ergebnis: Der quantisierte 8×8-Block, der ursprünglich aus 64 Werten bestand, belegt je nach Bildinhalt und Qualitätseinstellung typischerweise nur 20 bis 40 Byte.

Warum manche Bilder besser komprimieren als andere

Wer die Pipeline versteht, kann viele Kompressionseffekte erklären, die sonst rätselhaft wirken.

• Fotos komprimieren gut, weil sie sanfte Farbverläufe haben (Chroma-Subsampling funktioniert hervorragend) und der größte Teil der Energie in niederfrequenten DCT-Koeffizienten steckt (die Quantisierung setzt viele Koeffizienten ohne sichtbaren Effekt auf null).
• Text und Strichzeichnungen komprimieren schlecht, weil scharfe Kanten starke hochfrequente DCT-Koeffizienten erzeugen, die sich nicht ohne sichtbare Artefakte auf null setzen lassen. Die Blockgrenzen von 8×8 werden dann als Ringing um Textkanten sichtbar.
• Rauschen zerstört die Kompression, weil Sensorrauschen zufällige hochfrequente Daten erzeugt. Jedes verrauschte Pixel fügt Koeffizienten ungleich null im hohen Frequenzbereich hinzu, die sich der Quantisierung widersetzen. Ein verrauschtes Foto mit Qualität 80 kann bei gleicher Szene und gleicher Qualität 3- bis 5-mal so groß sein wie ein sauberes Foto.
• Verläufe sind fast gratis, weil ein gleichmäßiger Verlauf über einen 8×8-Block durch nur 2 bis 3 DCT-Koeffizienten beschrieben wird. Der Rest ist auch ohne Quantisierung null.
• Mehrfaches Speichern verschlechtert die Qualität, weil bei jedem Speichervorgang erneut quantisiert wird. Die Rundungsfehler summieren sich. Ein JPEG zehnmal mit Qualität 75 zu speichern, ist deutlich schlechter als einmal mit Qualität 75. Deshalb solltest du immer aus der Originaldatei heraus bearbeiten.

Der Qualitätsregler ist nicht linear

Die meisten Entwickler behandeln den JPEG-Qualitätsregler, als wäre er ein lineares Abwägen: Qualität 50 bedeutet halbe Qualität von 100 und halbe Dateigröße. Beides stimmt nicht.

Qualität 100 ist nicht 'verlustfrei' – es wird trotzdem quantisiert, nur mit kleinen Divisoren. Die Datei ist riesig (oft größer als ein PNG) und visuell kaum von Qualität 95 zu unterscheiden. Bei Fotos ist Qualität 95 visuell nicht von Qualität 90 zu unterscheiden. Der wahrnehmbare Unterschied zwischen Qualität 85 und 75 ist größer als der zwischen 100 und 85. Unter Qualität 50 werden die Artefakte stark, und die Ersparnis bei der Dateigröße verlangsamt sich.

Der Sweet Spot für Web-Bilder liegt meist bei Qualität 75 bis 85. Unter 75 sind Artefakte bei normaler Betrachtungsgröße sichtbar. Über 85 steigt die Dateigröße deutlich, ohne dass man einen nennenswerten Unterschied sieht. MozJPEGs Standardwert von 75 ist gut gewählt – er liegt bei den meisten Fotos genau am Knick der Kurve von Qualität zu Dateigröße.

Moderne JPEG-Encoder sind schlauer, als du denkst

Der JPEG-Standard definiert das Dekodierformat, nicht den Encoder. Das bedeutet, dass sich Encoder-Implementierungen in der Kompressionseffizienz stark unterscheiden können, während sie trotzdem standardkonforme Dateien erzeugen. MozJPEG, von Mozilla entwickelt, erzeugt durch mehrere Techniken bei gleicher visueller Qualität Dateien, die 5 bis 15 % kleiner sind als die von libjpeg.

• Trellis-Quantisierung – statt jeden DCT-Koeffizienten unabhängig zu runden, berücksichtigt die Trellis-Quantisierung, wie sich Rundungsentscheidungen auf die Entropie-Codierung auswirken, und trifft insgesamt bessere Entscheidungen.
• Optimierte Huffman-Tabellen – die Standard-Huffman-Tabellen von JPEG sind generisch. MozJPEG erzeugt eigene Tabellen, die auf die tatsächliche Koeffizientenverteilung jedes Bildes abgestimmt sind.
• Progressive Codierung – progressive JPEGs speichern die Koeffizienten in mehreren Durchgängen (erst grob, dann verfeinert). Das komprimiert oft besser als die sequenzielle Codierung, weil der grobe Durchgang besser vorhersagbare Koeffizientenverteilungen hat.
• Adaptive Quantisierungstabellen – statt einer Quantisierungstabelle für das gesamte Bild passen adaptive Encoder die Quantisierung pro Bildbereich an: aggressiver in unruhigen Bereichen (wo Artefakte weniger auffallen) und konservativer in glatten Bereichen.

Wenn du Bilder im Web ausspielst, ist der Wechsel vom Standard-Encoder libjpeg zu MozJPEG einer der einfachsten Performance-Gewinne überhaupt. Die meisten Image-CDNs und Bildverarbeitungsbibliotheken unterstützen ihn. Das Kodieren dauert länger (für vorverarbeitete statische Bilder spielt das keine Rolle), und die Ausgabe ist bei gleicher Qualität kleiner.

JPEG im Vergleich zu den neuen Formaten

WebP, AVIF und HEIC nutzen modernere Kompressionstechniken: größere Transformationsblöcke, Deblocking-Filter in der Schleife und Intra-Prädiktion (benachbarte Blöcke dienen zur Vorhersage des aktuellen Blocks). Bei gleicher visueller Qualität komprimieren sie 20 bis 50 % besser als JPEG. Besonders AVIF, das auf dem Videocodec AV1 basiert, ist beeindruckend effizient.

Warum ist JPEG dann immer noch überall? Universelle Unterstützung. Jeder Browser, jeder Bildbetrachter, jedes Betriebssystem, jede Kamera, jedes Smartphone und jede Software, die Bilder verarbeitet, unterstützt JPEG. WebP ist in Browsern nahezu universell verfügbar, fehlt aber oft in nativer Betriebssystem-Unterstützung. AVIF wird noch uneinheitlich unterstützt. HEIC gehört vor allem zu Apples Ökosystem. Für ein Format, das überall funktionieren muss, ist JPEG nach wie vor die einzig sichere Wahl.

Mein praktischer Rat: Setze AVIF oder WebP mit JPEG als Fallback ein, wenn deine Auslieferungsinfrastruktur das unterstützt (die meisten CDNs tun das über Content Negotiation). Wenn du nur ein Format verwenden kannst, ist ein mit MozJPEG und Qualität 80 kodiertes JPEG für Fotos kaum zu schlagen. Für Screenshots, Diagramme und textlastige Bilder bleibt PNG die bessere Wahl – oder entdecke weitere kreative Ansätze zur Bilddarstellung.

Der 8×8-Block, der die Welt eroberte

Die Kompressions-Pipeline von JPEG ist ein Lehrbuchbeispiel für Ingenieurskunst, die mit der menschlichen Wahrnehmung arbeitet statt gegen sie. Jede Stufe nutzt eine bestimmte Eigenschaft aus – die geringe Farbempfindlichkeit, die Frequenzverteilung natürlicher Bilder, die perzeptuelle Maskierung des Quantisierungsrauschens – und zusammen ergeben sie ein System, das Dateien um den Faktor 10 bis 20 verkleinert, ohne sichtbaren Qualitätsverlust. Fast vierunddreißig Jahre später transportieren immer noch dieselben 8×8-DCT-Blöcke, die schon auf Hardware von 1992 liefen, den Großteil der Bilder im Internet. Das ist das Kennzeichen eines Designs, das die Grundlagen richtig gemacht hat.