Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Das JPG-Format – der Guide für ein perfektes Ergebnis

(Screenshot: Christoph Erdmann)

Das Leben als Entwickler kann ganz schön hart sein. Vor allem beim Versuch, den besten Kompromiss aus Bildqualität und Komprimierung zu finden. Zeit, JPGs von Grund auf zu verstehen und einige Tricks auszupacken.

Die ersten Bilder von Menschenhand entstanden während der letzten Eiszeit aus Holzkohle und Eisenoxid. Die einzigen Farben: Schwarz und Rot. Heute sind wir da etwas weiter: Das allgegenwärtige JPG-Format unterstützt 16,7 Millionen Farben, ist online sowie im Drucker der Klassiker und kann wenige Kilobyte bis viele Megabyte groß sein. Zusätzlich treibt es Entwicklern regelmäßig den Schweiß auf die Stirn, wenn es seinem Namen als verlustbehaftete Komprimierung alle Ehre macht.

Dieser Artikel vermittelt euch ein umfassendes Verständnis des JPG-Formats und eine Handvoll Tipps, wie ihr die beste Bildqualität aus kleinen Dateien herausholt. Einige Aspekte werde ich praktischerweise vereinfacht darstellen, auch wenn es vielleicht nicht exakt ist. Zum Beispiel gehe ich bei der Farbdarstellung von einer Acht-Bit-Farbtiefe aus, obwohl JPG auch noch andere Farbtiefen unterstützt.

Farbmodell-Konvertierung

Bilder liegen meistens im Farbmodell RGB vor. Das heißt, sie werden über Rot, Grün und Blau auf eurem Monitor dargestellt. Soll ein Pixel weiß sein, leuchten alle drei Farben auf. Mit der richtigen Mischung lassen sich für jedes Pixel circa 16,7 Millionen (256 hoch 3) Farben darstellen.

(Screenshot: Christoph Erdmann)

Besonders aussagekräftig ist die Darstellung in Graustufen:

(Screenshot: Christoph Erdmann)

Ein weißes Pixel bedeutet, dass die jeweilige Farbe so stark wie möglich leuchtet (also mit dem Wert 256). Befindet sich an einer Stelle eine der drei Farben nicht, sehen wir ein schwarzes Pixel.

Der JPG-Algorithmus konvertiert zuerst alle Bilder vom RGB- in das YCbCr-Farbmodell. Dieses trennt die Helligkeit von der Farbe:

(Screenshot: Christoph Erdmann)

In diesem Beispiel trägt der Helligkeitskanal (Y) sehr viel zum Gesamteindruck des Bildes bei. Noch besser erkennbar bei der Darstellung der Intensitätswerte:

(Screenshot: Christoph Erdmann)

Je stärker der Kontrast und je besser das Ursprungsbild in einem Kanal erkennbar ist, desto mehr relevante Informationen stecken in ihm.

Color-Subsampling

Da unser Auge Kontraste sehr viel besser als Farben wahrnehmen kann, gibt es beim JPG die Möglichkeit, beispielsweise drei Viertel der Farbinformationen einfach wegzulassen:

(Screenshot: Christoph Erdmann)

Dieses Vorgehen heißt Color-Subsampling. Gebräuchlich sind das Vierteln der Informationen, wie oben dargestellt (bezeichnet als 2x2 oder 4:2:0), oder das Beibehalten aller Farbinformationen (bezeichnet als 1x1 oder 4:4:4).

Bei vielen Programmen könnt ihr das Color-Subsampling leider nicht einstellen. Photoshop verwendet bei den Qualitätswerten 100 bis 51 automatisch die 1x1-Variante, bei allem darunter 2x2. Deshalb gibt es auch einen enormen Dateigrößen-Sprung, wenn ihr die Kompression von 51 auf 50 schiebt.

JPG-Blöcke und verlustbehaftete Komprimierung

Ein JPG wird stets in 8x8 Pixel große Blöcke zerlegt. Jeder Block wird einzeln komprimiert, ohne dass es einen Zusammenhang zu den anderen gibt.

In solch einem 8x8-Block gibt es 64 Intensitäts-Werte (einen für jedes Pixel), die allerdings von ihren Werten — hintereinander aufgeschrieben — ziemlich durcheinandergewürfelt und daher schlecht zu speichern sind. Das Ziel bei der Entwicklung des JPG-Algorithmus war es deshalb, diese Bildinformationen zu sortieren. Jene mit großem Einfluss auf das Bild sollten vorn stehen und weniger wichtige hinten. Dafür wurde aber eine andere Darstellung benötigt. Lösung: Das Übereinanderlegen von Kosinus-Kurven.

Es wurden also 64 Muster — bestehend aus Kosinus-Kurven — definiert, die den Bildinhalt eines 8x8-Blocks darstellen können, wenn sie übereinandergelegt werden:

(Screenshot: Christoph Erdmann)

Von links oben (grobe Bildinformationen) nach rechts unten (Details) gesehen haben die Kurven immer weniger Anteil am Bildeindruck. Erkennbar daran, dass wir die Muster links oben sehr gut voneinander unterscheiden können — die rechts unten eher nicht.

Je nachdem, wie sehr ein JPG komprimiert wird, fließt jede Kurve unterschiedlich stark in die gespeicherte Datei ein, um den Original-Inhalt darzustellen. Es werden also nach wie vor 64 Werte gespeichert — allerdings sind sie nach ihrem Einfluss auf das Endergebnis sortiert. Diese Umrechnung der Pixel-Intensitäts-Werte wird diskrete Kosinustransformation (DCT) genannt.

Je nach gewählter Qualitätsstufe kann ein Programm so die weniger zum Bildeindruck beitragenden Werte weglassen. Bei „Qualität 5” ist deutlich zu sehen, dass nur noch Muster aus der linken oberen Ecke verwendet werden und die JPG-typischen Block-Artefakte entstehen:

(Screenshot: Christoph Erdmann)

Welche Muster wie stark weggelassen werden, wird durch sogenannte Quantisierungstabellen festgelegt. Diese werden vom Programm-Entwickler frei definiert. Es hat sich zwar eingebürgert, eine Skala von Null bis Hundert zu verwenden, aber was genau diese Werte zu bedeuten haben, ist jedem Programm selbst überlassen.

Qualitätsstufen verschiedener Programme sind also nicht miteinander vergleichbar. Bei der diskreten Kosinustransformation benötigen kontrastreiche und detailreiche Blöcke am meisten Speicherplatz.

Die wohl bekanntesten Artefakte der JPG-Kompression. Sie entstehen, weil jeder 8x8-Pixel-Block für sich selbst komprimiert wird und dabei Ungenauigkeiten zwischen Block-Nachbarn entstehen. (Screenshot: Christoph Erdmann)
Oft zu sehen, wenn kontrastreiche Details und kontrastarme Flächen gleichzeitig in einem 8x8-Pixel-Block auftreten. Der Algorithmus sucht für die Details ein Muster aus der unteren rechten Ecke der Mustertabelle heraus, welcher bei der Fläche jedoch zu Bildrauschen führt. (Screenshot: Christoph Erdmann)

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.