JPEG ist der am häufigsten verwendete Bildtyp im Web, und das aus gutem Grund: Schon seit Jahrzehnten ist JPEG fast ausnahmslos die richtige Wahl für die Codierung von Fotos. JPEG steht für „Joint Photographic Experts Group“ und ist das Ausschuss, das 1992 zum ersten Mal den Standard erlassen hat. Die Dateiendung für eine JPEG-Datei ist entweder .jpg oder .jpeg, obwohl letztere in der heutigen Zeit selten ist.
Während die verlustfreie Komprimierung die Bilddaten so gut wie möglich komprimiert, sucht die verlustbehaftete Komprimierung von JPEG nach Möglichkeiten, die Komprimierung mit winzigen, oft nicht wahrnehmbaren Änderungen an den Bilddaten effizienter zu gestalten. JPEG codiert Bilddaten als Pixelblöcke mit acht mal acht Pixeln und beschreibt die Blöcke – nicht die einzelnen Pixel darin – algorithmisch.
Es mag wie eine akademische Unterscheidung auf dem Papier klingen: „GIF verwendet ein Raster aus Pixeln, JPEG verwendet ein Raster aus kleineren Pixelrastern.“ In der Praxis bedeutet diese Verwendung von Blöcken anstelle von Pixeln, dass sich JPEG gut für einen viel häufigeren Anwendungsfall für Bilder eignet: die Art von subtilen, mehrschichtigen Farbverläufen, aus denen ein reales Foto besteht.
Selbst ein sehr einfacher Ein-Pixel-Gradienten mithilfe der GIF-Stil-Codierung zu beschreiben, wäre äußerst ausführlich:
Die ersten Zeilen in den Spalten 1 bis 9 sind #00CC00. Zeile eins, Spalte zehn ist #00BB00. Zeile eins, Spalte elf ist #00AA00. Zeile 1, Spalte 12 ist #009900. Zeile 1, Spalte 13 ist #008800. Zeile eins, Spalte 14 ist #007700. Zeile 1, Spalte 15 ist #006600. Zeile eins, Spalte sechzehn ist #005500.
Die Beschreibung eines Farbverlaufs mit der Codierung im JPEG-Stil ist wesentlich effizienter:
Block 1 ist #00CC00. Block 2 ist ein Farbverlauf von #00CC00 bis #005500.
JPEG sticht vor allem in der Quantisierung des Grades der "hohen Frequenz" in einem Bild hervor, oft nicht wahrnehmbar. Das Speichern eines Bilds als JPEG bedeutet in der Regel, dass die Qualität des Bildes in einer Weise verringert wird, die messbar, aber nicht unbedingt sichtbar ist. Wie Sie gelernt haben, ist die Quantisierung von Paletten im GIF-Stil eine relativ einfache Operation: Wenn die Anzahl der Farben in einem Bild reduziert wird, entstehen kleinere Dateien, die mit dem menschlichen Auge leicht zu erkennen sind.
Bei JPEG ist die Quantisierung hingegen clever: Bei der verlustbehafteten Komprimierung von JPEG wird versucht, eine Bildquelle so zu quantisieren, dass sie ungefähr der Art und Weise entspricht, wie unsere eigenen psychovisuellen Systeme die Welt um uns herum quantisieren. JPEG versucht also, Details wegzuwerfen, die wir eigentlich nicht sehen konnten, sodass eine zusätzliche Komprimierung an uns vorbeigehen kann.
Das menschliche psycho-visuelle System „komprimiert“ die Bilder, die ihr ständig aufnehmt, sehr gut. Wenn ich nach draußen schaue, kann ich sehr viele Informationen verarbeiten, z. B. stechen einzelne bunte Blumen hervor. Ich merke sofort, dass der Boden ein staubiges Grau ist und die Blätter hängen – meine Pflanzen brauchen Wasser. Was ich sehen, aber nicht vollständig verarbeiten kann, sind die genaue Form, Größe, Winkel und Grünton der einzelnen fallenden Blätter. Ich kann selbst aktiv nach diesem Detailgrad suchen, aber es wäre einfach zu viele Informationen, um sie passiv aufzunehmen, und es wäre kein wirklicher Nutzen. Mein psycho-visuelles System quantifiziert diese ein wenig und fasst diese Informationen zu „abhängenden Blättern“ zusammen.
JPEG funktioniert genauso. Die verlustbehaftete Komprimierung von JPEG reduziert den Detailgrad eines Bildes auf eine Weise, die unter Umständen für unsere natürlich "verlustbehafteten" psychovisuellen Systeme nicht erfasst wird, wenn dies innerhalb des angemessenen Rahmens geschieht. Dies bietet weitaus mehr Möglichkeiten für Einsparungen bei der Bandbreite als eine verlustfreie Komprimierung allein.
JPEG nutzt beispielsweise eine unserer größten psychovisuellen Schwächen: Unsere Augen reagieren empfindlicher auf Helligkeitsunterschiede als Farbunterschiede. Vor der Anwendung einer Komprimierung verwendet JPEG einen Prozess, der als diskrete Kosinustransformation bezeichnet wird, um das Bild in separate Frequenzen, also Schichten, aufzuteilen. Diese werden so gesprochen, dass die Leuchtkraft (Helligkeit) und Chrominanz (Farbe) oder „Luma“ und „Chrom“ dargestellt werden.
Die Luma-Schicht wird minimal komprimiert und verwirft nur kleine Details, die für das menschliche Auge wahrscheinlich nicht wahrnehmbar sind.
Die Chromaschichten werden deutlich reduziert. Anstatt einfach nur die Palette der Chromaebenen wie GIF zu quantisieren, kann JPEG einen Prozess namens "Subsampling" durchführen, bei dem eine Chromaschicht mit einer niedrigeren Auflösung gespeichert wird. Wird diese Kombination durch effektives Dehnen der Chromaschichten mit niedrigerer Auflösung über die Luma-Schicht neu kombiniert, ist der Unterschied oft nicht wahrnehmbar. Geringfügige Farbunterschiede können sichtbar sein, wenn wir die ursprüngliche Bildquelle und die JPEG-Datei direkt nebeneinander vergleichen, aber nur, wenn wir genau wissen, wonach wir suchen müssen.
JPEG ist nicht perfekt. So schlau wie bei JPEG ist es, die Komprimierung an uns vorbeizuschleichen, aber es kann bei zu weit weg gehender Strecke eklatant werden. Wenn Sie viel Zeit im Web verbracht haben, insbesondere in den letzten Tagen, ist Ihnen vielleicht aufgefallen, dass die JPEG-Komprimierung zu weit entfernt wurde:
Eine zu starke Komprimierung der Bilddaten führt dazu, dass der Detailgrad weiter reduziert wird, als unsere psychovisuellen Systeme von Natur aus ignoriert werden würden, sodass die Täuschung zerbrochen wird. Es wird offensichtlich, dass Details fehlen. Da JPEG in Form von Blöcken funktioniert, können die Übergänge zwischen diesen Blöcken sichtbar werden.
JPEG im Vollbildverfahren
Bei Progressive JPEG (PJPEG) wird der Prozess des Renderns einer JPEG-Datei effektiv neu angeordnet. „Baseline“-JPEGs werden im Verlauf der Übertragung von oben nach unten gerendert. Beim progressiven JPEG-Format wird das Rendering in eine Reihe von „Scans“ in voller Größe unterteilt, die ebenfalls von oben nach unten erfolgen. Dabei wird die Bildqualität bei jedem Scan erhöht. Das gesamte Bild ist sofort zu sehen, wenn auch unscharf, und im Laufe der Übertragung wird es immer deutlicher.
Auf dem Papier scheint es ein rein technischer Unterschied zu sein, aber es gibt einen großen wahrnehmbaren Vorteil: Da PJPEG anstelle von Leerraum direkt eine Originalversion des Bildes bereitstellt, kann sich PJPEG für den Endnutzer schneller anfühlen als eine Referenz-JPEG. Abgesehen von den kleinsten Bildern führt die Codierung eines Bildes als PJPEG-Datei außerdem fast immer zu einer kleineren Dateigröße im Vergleich zu einer Referenz-JPEG-Datei. Nicht viel, aber jedes Byte ist hilfreich.
Es gibt jedoch einen winzigen Nachteil: Das Decodieren von PJPEG-Dateien auf Clientseite ist komplexer. Dies bedeutet, dass der Browser und die Hardware des Geräts beim Rendern ein wenig stärker beansprucht werden. Dieser Renderingaufwand lässt sich nur schwer genau beziffern. Er ist jedoch sehr gering und fällt wahrscheinlich nicht wahr, außer bei stark unterversorgten Geräten. Das ist ein Kompromiss. Insgesamt ist das Vollbildverfahren ein sinnvoller Standardansatz, wenn ein Bild als JPEG codiert wird.
JPEG wird verwendet
Vielleicht fühlst du dich von all diesen Informationen überfordert. Es gibt jedoch gute Nachrichten für Ihre tägliche Arbeit: Die technischen Details der JPEG-Komprimierung werden abstrahiert und stattdessen als eine einzelne "Qualitätseinstellung" angezeigt: eine Ganzzahl zwischen 0 und 100. 0 liefert die kleinstmögliche Dateigröße und erwartungsgemäß die schlechteste Bildqualität. Mit zunehmendem Wert von 0 bis 100 steigen Qualität und Dateigröße. Diese Einstellung ist natürlich subjektiv – nicht jedes Tool interpretiert einen Wert von „75“ auf die gleiche Weise und die Wahrnehmungsqualität variiert immer je nach Inhalt des Bildes.
Sehen wir uns das gängige webbasierte Tool Squoosh zur Optimierung von Bilddateien an, um die Funktionsweise dieser Komprimierungseinstellung zu verstehen.
Squoosh wird vom Chrome-Team verwaltet. Es bietet einen direkten Vergleich zwischen verschiedenen Methoden zur Codierung und Konfiguration von Bildausgaben. Die Konfigurationsoptionen reichen von einem globalen Schieberegler für die Qualität von 0 bis 100 bis hin zur Feinabstimmung von Chrominanz und Leuchtdichte-Resampling. Je niedriger der Wert für die Qualität, desto höher die Komprimierung und desto kleiner wird die Datei.
Bei einer Qualitätseinstellung von 60 wird die Dateigröße um 79 % reduziert. Lassen Sie sich von den Auswirkungen dieses Labels nicht täuschen: Qualitätsunterschiede über den Großteil der Skala sind für das menschliche Auge nicht wahrnehmbar, selbst wenn Sie einen direkten Vergleich durchführen.
Um Ihr Quellbild in eine progressive JPEG-Datei zu konvertieren, aktivieren Sie unter "Erweiterte Optionen" das Kontrollkästchen "Progressive Rendering". Einige dieser Konfigurationsoptionen sind mit ziemlicher Sicherheit tiefer gehend, als ein durchschnittliches Webprojekt erforderlich ist, aber sie können Ihnen einen genaueren Einblick in die Auswirkungen der Dinge, die Sie über die JPEG-Codierung gelernt haben, auf die Dateigröße und -qualität in realen Anwendungsfällen geben.
In der Praxis ist das nicht sehr praktikabel, auch wenn der interne Umgang mit JPEG jetzt kompliziert ist. Squoosh ist nur eine von zahllosen Methoden zum Speichern optimierter JPEGs. Bei allen wird eine ähnliche Methode zur Bestimmung der Komprimierungsstufe verwendet: eine einzelne Ganzzahl zwischen 0 und 100.
Die Ermittlung der idealen Komprimierungsstufe für Ihre Bilder ist knifflig, da die Komplexität der JPEG-Codierung auf eine einzige Ganzzahl reduziert wird, insbesondere wenn so viel vom Inhalt eines Bildes abhängt. Wenn Sie z. B. an Blinzeln oder Atmen denken, ändern sich die JPEG-Komprimierungseinstellungen, wie wir sie wahrnehmen.
Wenn ich jetzt ins Weltall blicke, ist meine psycho-visuelle Verarbeitung manuell geworden. Jetzt sehe ich mir die einzelnen Blätter an, obwohl sich das Bild selbst – sozusagen – nicht verändert hat. Das macht die Konfiguration der JPEG-Komprimierung ein wenig kompliziert: Sie wissen genau, nach welchen visuellen Fehlern Sie suchen müssen. Wenn Sie über die Bildkomprimierung an erster Stelle nachdenken, konzentrieren Sie sich auf einzelne Blätter. Wir sind darauf vorbereitet, leichte Unschärfe und gelegentlich ein Komprimierungsartefakt zu erkennen. Je stärker Sie bei der Feinabstimmung Ihrer JPEG-Komprimierungseinstellungen nach Artefakten suchen, desto wahrscheinlicher ist es, dass Sie sie finden, wenn ein Nutzer sie wahrscheinlich nicht findet. Selbst wenn dieser Nutzer genau wüsste, wonach er suchen muss, ist es unwahrscheinlich, dass er eine Seite mit einer JPEG-Komprimierung aufruft.
Vermeiden Sie daher den Instinkt, ein Bild auf der Suche nach Artefakten hochzustufen oder sogar zu genau die Teile unserer Bilder zu betrachten, in denen Artefakte zuerst angezeigt werden. Für Nutzer verschmelzen schwache Artefakte mit den kleinen Details, die ihre verlustbehafteten psycho-visuellen Systeme in der Regel übersehen. Selbst wenn Sie mit den Tricks von JPEG vertraut sind, würden Sie diese Artefakte beim Surfen im Web erst bemerken, wenn Sie danach suchen würden. Aus diesem Grund ist es fast immer ratsam, die JPEG-Komprimierung etwas weniger stark zu verschieben, als Sie für möglich halten. Dies gilt insbesondere dann, wenn das Bild aufgrund der direkten Gestaltung oder der Einschränkungen des umgebenden Layouts kleiner als seine ursprünglich dargestellte Größe angezeigt wird.