Bilder komprimieren: Dateigröße verringern

1 Inch ist 2,54cm groß und dots heißt auf Deutsch Punkte. 1 dpi bedeutet also: 1 Punkt auf 2,54 cm, in diesem Fall 1 „Druckpunkt“ pro 2,54cm.

Das menschliche Auge kann bei einem Abstand von 25cm pro 1mm nicht mehr als 12 Zeilen unterscheiden. 1 Inch hat etwas mehr als 25mm. Mal 12 genommen (25mm x 12) ergibt eine maximal notwendige Größe von 300dpi – also 300 Druckpunkte auf 2,54cm. Ein größeres Druck-Erzeugnis, zum Beispiel ein Poster, erhöht den Abstand des Betrachtenden, so dass auch eine geringere dpi durchaus gute visuelle Druckergebnisse liefern kann.

Es ist ein Irrglaube, dass eine höhere Zahl von dpi auch ein besseres Druckergebnis liefert. Wer sich näher mit dieser Materie beschäftigen will, ist mit diesem kostenlosen PDF von Cleverprinting exzellent beraten.

Dots sind eine Maßeinheit für Ein- und Ausgabegeräte, wie Drucker oder Scanner. Beim Scanner wird die Anzahl von Punkten, die er auf 2,54 cm einliest, als dots per inch (dpi) ausgewiesen.

Hier gilt als Faustregel: Soll das eingescannte Bild 1:1 gedruckt werden, ist eine Auflösung von 300dpi ausreichend. Soll das Werk jedoch vergrößert werden, muss mit einem höheren dpi-Wert eingescannt werden.

Jedoch sollte die tatsächlich mögliche Auflösung des Scanners nicht überschritten werden. Ein interpolierter dpi-Wert rechnet Bildpunkte hinzu, die nicht existieren, und mindert die Qualität des Scans.

Ein Pixel ist der kleinste Teil eines Bildes, hat eine viereckige Form und einen Farbwert, aber keine feste Größe. ppi nennt man auch Pixeldichte, was ihrer Eigenschaft schon sehr nahe kommt.

Die angezeigte Größe eines Bildes auf dem Monitor wird ausschließlich durch die Anzahl der Pixel in der Breite und Höhe bestimmt, zum Beispiel 800px x 600px.

Als Faustregel gilt: Für die Anzeige auf Monitoren, also Webseiten oder Bildschirmpräsentationen reicht ein Wert von 72 – 100ppi vollkommen aus.

Bevor wir die Eigenheiten sowie Eignung von Dateiformaten beleuchten, wenden wir uns dem ersten wichtigen Aspekt zu, der die Dateigröße eines Bildes erheblich beeinflusst:

Eingangs wurde es schon erwähnt, welche durchschnittlichen Auflösungen bei den heutigen Monitoren eingestellt sind. Davon muss dann noch die Höhe der Browserleisten abgezogen werden, denn das Browserfenster selbst – also der sichtbare Inhalt im Browser – ist ja bekannterweise nicht so groß, wie der Monitorbildschirm.

Wer also seinen Besuchern ein möglichst stressfreies Betrachten seiner Fotos ermöglichen möchte, reduziert diese Bilder in Breite und Höhe, zum Beispiel auf 800px x 600px. (Es spricht nichts dagegen, das Bild zusätzlich mit höherer Auflösung per Link zur Verfügung zu stellen). Eine Reduzierung der Breite und Höhe verringert die Dateigröße enorm und erhöht somit die Ladegeschwindigkeit der Webseite.

Für die Wiedergabe in einem Web-Browser existieren eigentlich nur drei Dateiformate von Relevanz: JPG, GIF und PNG. Sie werden von allen neuen Browsern fehlerfrei unterstützt.

Es gibt nicht das richtige Dateiformat für alle Bilder. Je nach Anforderung ist entweder JPG, GIF oder PNG die richtige Wahl. Deren Vorzüge und Nachteile werden nachfolgend erklärt.

• Farben: Bilder mit nicht mehr als 256 Farben insgesamt möglich.
• Transparenz: Stellt nur eine einzige Farbe als Hintergrund transparent dar.
• Animation: Unterstützt animierte Grafiken mit bis zu 256 Farben – bekanntes Beispiel dafür ist der Smiley.
• Komprimierung: Verlustfreie LZW-Komprimierung.
• Manueller Einfluss: Die Auswahl der Farben kann über Farbpaletten, die Komprimierung dagegen kann nicht beeinflusst werden.
• Sonstiges: Optionales Dithering zur Reduzierung harter Farbübergänge.

Nachteile:
1. Geringe Farbanzahl, daher für Fotos, Farbverläufe und Schattierungen weniger geeignet.
2. Selten geeignet für Farbfotos.

Vorteile:
1. Kleine Dateigröße.
2. Animierte GIFs möglich.
3. Eingeschränkt auch Transparenz möglich.
4. Geeignet für Buttons, Cliparts, Banners und Symbole.

• Farben: 16.7 Millionen Farben im RGB-Farbraum.
• Transparenz: Keine Transparenz.
• Animation: Keine Animation.
• Komprimierung: Verlustbehaftete Komprimierung mit unterschiedlichen komplizierten Algorithmen.
• Manueller Einfluss: Kompressionsdichte kann eingestellt werden. Faustregel: Eine Qualitätsstufe von 75% bis 100% bringt in den meisten Fällen die besten Ergebnisse. Es kommt aber immer auf das jeweilige Bild an. Bei manchen Bildern bringt selbst eine Qualitätsstufe von 20% noch ein brauchbares Ergebnis.
• Sonstiges: Verlustfreie Bearbeitung, wie Drehen, Spiegeln oder Beschneiden von Rändern ist in einigen wenigen Bildbearbeitungsprogrammen (z.B. IrfanView) möglich.

Nachteile:
1. Keine Transparenz.
2. Bei hoher Kompression entstehen Artefakte und Kanten werden stufig (also je höher die Kompression, um so schlechter die Bildqualität)
3. Nicht geeignet für digitale Strichzeichnungen, Rasterbilder (Zeitung) oder Schwarz-Weiß-Bilder.

Vorteile:
1. Dateigrößen werden stark und effizient verkleinert.
2. 16.7 Millionen Farben.
3. Kompression kann manuell eingestellt werden.
4. Geeignet für Pixelgrafiken (zum Beispiel Fotos).

• Farben: von 1 bis 16.7 Millionen Farben im RGB-Farbraum.
• Transparenz: bis zu 256 Transparenzstufen.
• Animation: Keine Animation.
• Komprimierung: Verlustfreie Deflate-Komprimierung.
• Manueller Einfluss: Farben können reduziert werden und je nach Programm kann die Kompression beeinflusst werden.
• Sonstiges: Es gibt PNG-8- und PNG-24-Format. Letzteres unterstützt 24-Bit-Farbe, und durch die verlustfreie Kompression ist es meistens größer als eine JPG-Datei desselben Bildes. Das PNG-8-Format ist vergleichbar mit dem GIF-Format.

Nachteile:
1. PNG-24-Format (True-Color) ist aufgrund der verlustfreien Komprimierung in der Regel größer als eine vergleichbare JPG-Datei.
2. Der Internet Explorer 6 unterstützt die Transparenz des PNG-Formates nicht.

Vorteile:
1. Verlustfreie Komprimierung.
2. 16.7 Millionen Farben.
3. Hervorragend geeignet für Bilder, die eine abgestufte Transparenz benötigen, wie zum Beispiel ein Bild mit einem Schattenverlauf.

• Nie mit dem Originalbild arbeiten, sondern immer eine Kopie des Bildes verkleinern und komprimieren, denn ein einmal gespeichertes Bild lässt sich nicht in den vorherigen Zustand zurückversetzen.
• Jedes Abspeichern als JPG-Datei komprimiert das Bild und verschlechtert somit dessen Qualität, selbst wenn es nicht bearbeitet wurde, und die Qualität auf 100% steht.
• Drehen, Spiegeln oder Ränder beschneiden gehen nur mit verlustbehafteter Komprimierung einher, es sei denn, man verwendet ein Programm, wie zum Beispiel IrfanView, das diese Arbeiten verlustfrei ausführt.
• Nie in mehreren Stufen verkleinern! Stattdessen die Verkleinerung rückgängig machen und erst abspeichern, wenn die gewünschte Bildgröße erreicht ist. Beim Verkleinern werden Pixel weggenommen und neu berechnet, und das bei jeder Transformation neu. Daher besser rückgängig machen, das heißt, den Originalzustand vor der Verkleinerung wiederherstellen und in einer einzigen Transformation verkleinern.
• Nie in mehreren Stufen vergrößern! Stattdessen die Vergrößerung rückgängig machen und erst abspeichern, wenn die gewünschte Bildgröße erreicht ist. Beim Vergrößern werden Pixel hinzugefügt und neu berechnet, und das bei jeder Transformation neu. Daher besser rückgängig machen, das heißt, den Originalzustand vor der Vergrößerung wiederherstellen und in einer einzigen Transformation vergrößern.
• Besser Verkleinern statt Vergrößern! Das Reduzieren von Bildpixeln beim Verkleinern ist qualitativ besser, als das Hinzufügen von nicht vorhandenen Bildpixeln beim Vergrößern.
• Für das Web wird der RGB-Farbraum verwendet. Also muss das Bild gegebenenfalls ins RGB-Format konvertiert werden. Der CMYK-Farbraum ist für den Druck vorgesehen. Es ist zwar möglich, ein CMYK-Bild im Web zu verwenden, doch erstens sind die Farben dafür ungeeignet (z.B. Magenta statt Rot), und zweitens werden solche Bilder von manchen Browsern nicht dargestellt.
• Wenn schon ein Farbprofil (ICC Profile) eingebettet wird, dann das sRGB-Farbprofil. Über die Problematik kann man sich hier ausführlich informieren.

• Batch-/Stapelverabeitung: Prozess über den in einem Durchgang Arbeitsabläufe für mehrere Bilder gleichzeitig ausgeführt werden können. Zum Beispiel hundert Fotos über eine einzige Batch-Anweisung auf 800 x 600 Pixel verkleinern.
• Bilineare Interpolation: Interpolationsmethode (s. auch Interpolation).
• Bikubische Interpolation: Interpolationsmethode (s. auch Interpolation).
• Chroma Subsampling: Ein Verfahren, Farbinformationen – die vom menschlichen Auge nur mit einer reduzierten Auflösung wahrgenommen werden – mit einer gegenüber der Helligkeitsinformation reduzierten Abtastrate zu speichern. Wird beim JPG-Format angewendet und reduziert die Dateigröße.
• Dithering: Fehlende Farben werden durch neu angeordnete Pixel für das menschliche Auge scheinbar nachgebildet und harte Kanten so vermieden.
• EXIF: Zusätzliche Informationen (zum Beispiel über Objektiv, Kamera-Modell, Aufnahmedatum), die in den Bereich am Anfang eines Bildes im JPG-Format (oder TIFF-Format) geschrieben werden. Unter dem Link erfahrt ihr mehr darüber.
• ICC-/Farbprofil: Bettet Informationen über den Farbraum eines Ein- oder Ausgabegerätes ein und soll so zum Beispiel sicherstellen, dass ein Foto gedruckt genauso aussieht wie am Monitor.
• Interlacing: Das Bild wird im GIF- oder PNG-Format so abgespeichert, dass für den Betrachter beim langsamen Laden einer Website der Eindruck entsteht, es würde nach und nach schärfer werden.
• Interpolation: Das Zwischenrechnen zur Erzeugung von Bildinhalten. Es existieren zwei Verfahren: Dichteinterpolation und Farbinterpolation, mit den Methoden „Pixelwiederholung“, „Bilinear“ und „Bikubisch“. Zum Beispiel wird ein Bild interpoliert, wenn man es transformiert oder ihm eine neue dpi zugeweist.
• JPEG, JPEG 2000, JNG, JFIF, JPE: Untertypen des JPEG File Interchange Formates. Für das Web sollte immer nur die Endung „.jpg“ genutzt werden.
• Progressives JPG: Derselbe Effekt wie beim Interlacing.
• XMP: MIt diesem Standard können Metadaten eingebettet werden.