Das Auge trickst — und JPG nutzt das aus

Der menschliche Sehsinn nimmt Helligkeit deutlich feiner wahr als Farbe. Diese Schwäche macht sich JPG zunutze: Es trennt jedes Bild in einen Helligkeits- und zwei Farbanteile und speichert die Farbe gröber als die Helligkeit. Das spart ordentlich Platz, ohne dass es bei normalen Fotos auffällt. Dieser Trick heißt Chroma-Subsampling (Farbunterabtastung) — und er ist meistens genial, bis er es nicht ist.

Was die Zahlen bedeuten

NotationFarbauflösungBedeutung
4:4:4vollkeine Unterabtastung, Farbe so fein wie Helligkeit
4:2:2halbe (horizontal)ein Farbwert je 2 Pixel in der Breite
4:2:0viertelein Farbwert je 2×2-Pixelblock — die stärkste Sparvariante

4:2:0 ist der heimliche Standard: Die meisten Kameras und JPG-Encoder verwenden ihn, weil er bei Fotos unsichtbar spart. Für jeden Block aus vier Pixeln gibt es dann nur einen gemeinsamen Farbwert.

Warum roter Text ausfranst

Genau bei harten farbigen Kanten bricht der Trick zusammen. Ein roter Buchstabe auf weißem Grund hat einen abrupten Farbwechsel — aber mit 4:2:0 teilen sich vier Pixel einen Farbwert. Die Kante wird über den Block „verschmiert", es entsteht ein unsauberer, oft ins Bräunliche gehender Rand. Rot ist besonders betroffen, weil es in den Farbkanälen ungünstig liegt. Dasselbe passiert bei Logos, Diagrammen und farbigem UI-Text. Das ist verwandt mit den allgemeinen JPEG-Artefakten, hat aber diese spezielle Farb-Ursache.

Die Lösung: das richtige Format oder 4:4:4

  • Grafiken mit Text als PNG speichern. PNG kennt kein Subsampling — jeder Pixel behält seine volle Farbe. Für Screenshots, Logos und Text-Grafiken ist PNG ohnehin die bessere Wahl, siehe Screenshots optimieren.
  • Wenn es JPG sein muss: hohe Qualität wählen. Viele Encoder schalten ab einer hohen Qualitätsstufe automatisch auf 4:4:4 (volle Farbauflösung). Der rote Rand verschwindet, die Datei wird etwas größer.
  • Modernere Formate erwägen. WebP und AVIF können ebenfalls mit voller Farbauflösung speichern und sind dabei oft kleiner als ein 4:4:4-JPG.

Wann du dir keine Gedanken machen musst

Bei normalen Fotos — Landschaften, Porträts, alles mit weichen Farbübergängen — ist 4:2:0 völlig unproblematisch und spart wertvolle Kilobyte. Chroma-Subsampling wird erst zum Thema, wenn harte Farbkanten ins Spiel kommen. Die Faustregel deckt sich mit der ewigen Format-Regel: Fotos vertragen JPG (mit Subsampling), Text und Grafik gehören zu PNG.

Häufige Fragen

Warum franst roter Text auf meinem JPG aus?

Wegen Chroma-Subsampling. JPG speichert Farbinformation gröber als Helligkeit — meist nur für je 2×2 Pixel einen Farbwert (4:2:0). An farbigen Kanten, besonders Rot auf Weiß, führt das zu sichtbarem Verschmieren. Speichern mit 4:4:4 (volle Farbauflösung) behebt es.

Was bedeutet 4:2:0, 4:2:2 und 4:4:4?

Die Zahlen beschreiben, wie fein die Farbe gegenüber der Helligkeit gespeichert wird. 4:4:4 = volle Farbauflösung (keine Unterabtastung). 4:2:2 = halbe horizontale Farbauflösung. 4:2:0 = halbe horizontale und vertikale, also ein Farbwert je 2×2-Pixelblock — die stärkste Sparvariante und der Standard vieler Encoder.

Warum funktioniert Chroma-Subsampling bei Fotos, aber nicht bei Text?

Weil das menschliche Auge Helligkeit viel feiner wahrnimmt als Farbe. Bei Fotos mit weichen Farbverläufen fällt die gröbere Farbe nicht auf. Bei harten farbigen Kanten — Text, Logos, Grafiken — wird sie sichtbar, weil dort die Farbe abrupt wechselt.

Wie vermeide ich das Ausfransen?

Zwei Wege: Erstens Grafiken mit farbigem Text nicht als JPG speichern, sondern als PNG (kein Subsampling). Zweitens, wenn es JPG sein muss, mit hoher Qualität und 4:4:4 exportieren — viele Encoder schalten bei hoher Qualitätsstufe automatisch auf volle Farbauflösung.

Quellen

MDN — JPEG-Bildformat · Wikipedia — Chroma subsampling.