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

Struktur der Datei

Die Bilddaten einer JPG-Datei können vom Algorithmus auf zwei verschiedene Arten hinterlegt werden, was aber keinen Einfluss auf die Qualität hat. Die erste Möglichkeit ist „Baseline”, bei der die 8×8-Pixel-Blöcke hintereinander abgelegt werden. Ein Baseline-kodiertes JPG erkennt ihr daran, dass es sich zeilenweise im Browser aufbaut.

(Screenshot: Christoph Erdmann)

Die zweite Möglichkeit ist „Progressive”, durch die erst alle groben Muster gespeichert werden und danach die feineren. Ein großes Progressive-strukturiertes JPG erkennt ihr daran, dass es zuerst grob dargestellt wird, nach und nach aber feiner wird.

(Screenshot: Christoph Erdmann)

Grundsätzlich ist der progressive Aufbau aus zwei Gründen zu bevorzugen: Es entsteht sehr viel schneller ein Eindruck der besuchten Homepage — und progressive JPGs sind meist kleiner als jene der Baseline-Variante.

Tricks zur Verringerung der Dateigröße

1. Gutes Ausgangsmaterial verwenden

Um ein gutes JPG zu erstellen, muss euer Ausgangsmaterial von guter Qualität sein. Dadurch wird eure Datei am Ende besser aussehen und kleiner sein, als wenn ihr es aus einem schon vorher komprimierten JPG erstellt.

2. Ausrichtung am Acht-Pixel-Raster

Beim folgenden Bild wurden Schrift und Rahmen an den Rändern des 8×8-Pixel-Rasters ausgerichtet. Somit muss der JPG-Algorithmus keine Muster mit vielen Details aus der Mustertabelle wählen, um den Übergang zwischen Schwarz und Weiß darzustellen. Die ausgerichtete Version ist deshalb nicht nur bedeutend kleiner, sondern auch ein wenig schärfer.

(Screenshot: Christoph Erdmann)

3. Kontrast und Sättigung verringern

Wie zuvor dargestellt, lässt sich eine Datei verkleinern, wenn ihr den Kontrast verringert. Genauso verhält es sich bei der Sättigung, da diese eine Kontraständerung der Farbkanäle ist.

(Screenshot: Christoph Erdmann)

4. Sepia-Bilder

Anstatt Farben im JPG-Bild zu verwenden, ist es eine Überlegung wert, es als Graustufenbild abzuspeichern und es nachträglich per CSS einzufärben. Leider unterstützen nur wenige Programme Graustufen-JPGs — selbst Photoshop nicht.

(Screenshot: Christoph Erdmann)

5. Leichtes Weichzeichnen

Durch geringfügiges Weichzeichnen wird der Kontrast im 8×8-Block verringert. Somit wird das JPG kleiner. Unser Auge ist jedoch besonders auf die Wahrnehmung von Kanten geschult, weshalb ich den sogenannten selektiven Weichzeichner empfehle. Dieser lässt Kanten unangetastet.

(Screenshot: Christoph Erdmann)


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

Webseite erstellen lassen?