Bildoptimierung für das Internet

Ich beobachte immer wieder, dass viele Fotografen Defizite bei der Optimierung von digitalem Bildmaterial für bestimmte Zwecke aufweisen. Interessanterweise trifft das gleichermaßen auf Amateur- als auch Profifotografen zu. Sicher ist jedoch, dass eine passende Vorbereitung sehr wichtig ist.

Als Analogfotograf sollte man sich ebenfalls damit auskennen. Einfach aus dem Grund, dass wir fast alle unsere analogen Erzeugnisse digitalisieren und im Internet präsentieren wollen. Um die Optimierung für diese Art der Präsentation soll es in diesem Artikel gehen.

Ich gehe im Allgemeinen davon aus, dass jeder ambitionierte Fotograf Adobe-Software wie Photoshop, Photoshop Elements oder Lightroom nutzt. Daher werde ich hauptsächlich auf diese Programme eingehen. Separat werde ich außerdem das kostenlose Programm Gimp erläutern. Zuerst möchte ich jedoch die wesentlichen Bestandteile für eine derartige Optimierung nennen, die unabhängig von Software oder Plattform als Standard gelten sollten und auf jeden Workflow übertragen werden können.

Wer nicht so auf Theorie steht, kann sich auch die Zusammenfassung, die etwas weiter unten steht, zu Gemüte führen.

Zuerst sollte man sich im Klaren sein, dass man nur mit der Größenangabe Pixel rechnet. Auch wenn einige sagen, dass man für Bildschirme mit 72 oder 96 dpi rechnet. Das ist relativ ungeeignet, da diese Art der Rechnung für den Druckbereich gedacht ist. Mithilfe der DPI-Angabe wird lediglich eine Druckauflösung angegeben, mit der man die Pixel einer digitalen Datei in „reale“ Werte wie Zentimeter oder Zoll/Inch in Form von Druckpunkten umrechnen kann. Pixel, abgekürzt „px“, sind eindeutige Angaben, mit denen man leicht arbeiten kann. Allerdings muss man bedenken, dass Monitore unterschiedliche Auflösungen haben. Die üblichen Werte sollte man kennen, um ein Gefühl für die Gestaltung von Bildmaterial für das Internet zu entwickeln.

Beispiele:
Ein Standard-Full-HD Monitor mit dem Verhältnis 16:9 hat eine Auflösung von 1920×1080 px. Ein iPhone 6 Plus hat zwar eine physikalische Auflösung von 1080×1920 px, jedoch eine Auflösung von 414×736 px für Web-Anwendungen (das nennt man auch die CSS-Auflösung). Diese ist für uns interessant. CSS ist die Abkürzung für „Cascading Style Sheets“. CSS ist eine Spezielle Sprache für die Gestaltung von Webseiten. Damit wird der Aufbau und die verschiedenen Elemente einer Webseite koordiniert.

Bei der Bildgröße muss zwischen Auflösung und Dateigröße unterschieden werden. Beide Werte haben miteinander zu tun. Ich mache das hier nur noch mal klar, damit es nicht zu Missverständnissen kommt. Die Auflösung wird in Pixel angegeben und die Dateigröße üblicherweise in Kilobyte (KB), Megabyte (MB) oder Gigabyte (GB). 1024 KB sind 1 MB und 1024 MB sind 1 GB. Fotos aus einer Digitalkamera können, je nach Auflösung und Format, zwischen 3 und 40 MB groß sein. Eine Bilddatei für das Internet sollte nicht unbedingt mehr als 200 bis 300 KB(!) vorweisen. Richtig formatiert sind die meisten Fotos ohnehin kleiner. Die Dateigröße ist das Resultat aus der Anzahl der Pixel, der Farbtiefe und des verwendeten Dateiformats bzw. der Kompression. Insgesamt sollten Fotos immer nur so groß wie nötig sein (in Auflösung und Dateigröße).

Die Farbtiefe bezeichnet den Dynamikumfang eines Digitalfotos in Bit, beziehungsweise die Anzahl der verschiedenen Graustufen oder Farbtöne. Ein 8-Bit Graustufenbild kann 256 Helligkeiten darstellen. Ein 16-Bit Graustufenfoto schon 65535 verschiedene Helligkeitswerte. Bei Farbaufnahmen haben wir standardmäßig 8-Bit pro Farbkanal (Rot, Grün und Blau). Das bedeutet unterschiedliche Helligkeitswerte und Farbtöne. Eine 8-Bit Farb-Bilddatei kann daher 16777216 Farben darstellen. Das ist in der Regel mehr als ausreichend und Internet-Standard.

Ein Farbraum ist ein mathematisches dreidimensionales Gebilde, welches einen Umfang/Pool aus verschiedenen Farben darstellt. Der Farbraum, der am häufigsten zum Einsatz kommt ist der sRGB-Farbraum. Dieser wird auch für das Web genutzt.

Für digitale Fotos, gibt es eine Vielzahl an Dateiformaten, mit denen man arbeiten kann. Bei (Archiv-)Formaten wie TIF, werden Fotos verlustfrei gespeichert. Demnach können diese auch beliebig oft bearbeitet und abgespeichert werden, ohne an Qualität zu verlieren. Solche Formate sind jedoch für das Internet nicht geeignet. Bei JPG/JPEG Dateien, werden 8 Pixel zusammengefasst und gerastert. So sind diese Bilddaten um einiges kleiner und bei hoher Qualitätseinstellung auch mit sehr, sehr wenig Verlust verbunden. Je höher man Komprimiert, umso kleiner werden die Bilddateien. Wenn man es damit jedoch übertreibt, oder JPG-Dateien immer wieder bearbeitet und erneut abspeichert (dann werden die ohnehin komprimierten Daten nochmals komprimiert), kann es zu Artefakten (Bildfehlern) kommen. Wie bei allem ist hier ein gesundes Maß angebracht. Für das Internet ist jedoch eine etwas höhere als die übliche Kompression von Vorteil, um schnellere Ladezeiten zu ermöglichen.

Zusammenfassung:

Auflösung:
Bildgröße wird in Pixeln angegeben.  Sie ist Abhängig von der Darstellungsgröße. Ein Standard-Full-HD-Monitor, hat eine Auflösung von 1920×1080 px.

Dateigröße:
Bildgröße in KB, MB oder GB angegeben. Üblich für das Internet sind nicht mehr als 200 bis 300 KB.

Dateiformate:
JPG/JPEG für Bilddateien/Fotos
PNG für Grafiken und transparenten Inhalten

Farbtiefe:
Eine Bilddatei  mit einer Farbtiefe von 8-Bit ist in der Regel mehr als ausreichend und Internet-Standard.

Farbraum:
Der Farbraum, der am häufigsten zum Einsatz kommt ist der sRGB-Farbraum. Dieser wird auch für das Web genutzt.

Kompression / Qualität:
Mit JPG/JPEG sind die Bilddaten um einiges kleiner und bei hoher Qualität auch mit sehr, sehr wenig Verlust verbunden.
Für das Internet ist jedoch eine etwas höhere als die übliche Kompression von Vorteil, um schnellere Ladezeiten zu ermöglichen. Höhere Kompression bedeutet niedrigere Qualität.

Praxis:

Als Demonstration mit der ich den Arbeitsablauf einiger Programme schildern möchte, wähle ich eine TIF-Datei, welche in einigen Parametern für das Internet angepasst werden muss. Der Farbraum ist ProPhoto RGB, mit 16 Bit Farbtiefe und mit einer Auflösung von 3543×2362 Pixeln. Die Datei soll in den Farbraum sRGB konvertiert, in 8 Bit Farbtiefe umgewandelt und mit einer langen Kante von 1024 px abgespeichert werden. 

Mit einem Rechtsklick auf die Datei, kann man sich die Eigenschaften anzeigen lassen. Unter Allgemein findet man den Dateityp (das Format) und die Dateigröße. Bei Details kann man sich die Auflösung, die Bittiefe (Dynamikumfang) und, dafür muss man etwas weiter runter scrollen, den Farbraum anzeigen lassen.

Diese Informationen sind sehr wertvoll für uns, denn damit wissen wir genau, was wir an unserer Datei noch anpassen müssen. 
Auch ohne spezielle Bildbearbeitungs-Software und auf jedem Betriebssystem, kann man sich diese Werte anzeigen lassen. 

Mithilfe der folgenden Beispielen möchte ich die Arbeitsweise mit verschiedenen Programmen beleuchten. Ich habe versucht die Bilder so ausdrucksstark wie möglich zu gestalten, damit diese mit möglichst wenig Erklärung auskommen.

Photoshop CC:

Ebenfalls ähnlich bei anderen Photoshop Vollversionen.

Hier wählt man das Dateiformat aus.
Bei der Vorschau auf der rechten Seite kann man die spätere Bildgröße sehen. Das Anpassen der Qualität verändert diese Wert. Hier 232,7 KB.

 

Lightroom:

In Lightroom muss man einfach nur das gewünschte Bild aus der Bibliothek auswählen und exportieren.
Hier können wir am Anfang den Speicherort beliebig festlegen.
Als Dateiformat wählen wir JPEG aus.
Als Farbraum sRGB und die Bildgröße stellen wir auf die gewünschte Auflösung ein. Dabei erkennt Lightroom automatisch die lange kannte. Das ist sehr praktisch, wenn man mehrere Bilder gleichzeitig verarbeitet und sich darunter Hochformate und Querformate befinden. Über die Qualitätseinstellung können wir die Dateigröße anpassen. Eine Vorschau wie bei Photoshop gibt es hier leider nicht, allerdings kann man direkt anpassen wie groß die Datei maximal sein soll (!).

 

Photoshop Elements (9):

Funktioniert ähnlich wie Photoshop CC oder andere Vollversionen. 

 

Gimp:

 

In der Regel kann Gimp nur mit 8Bit-Farbkanälen arbeiten, weswegen uns diese Konvertierung automatisch abgenommen wird.
Ebenfalls wird auch der Farbraum automatisch konvertiert.
Hier findet man die Einstellungen für den Farbraum.
Hier kann der jeweilige Farbraum geändert werden.

Auch hier finden sich die Qualitätseinstellungen, die die Dateigröße bestimmen.

 

Falls noch Fragen auftreten sollten, stehe ich gerne zur Verfügung. Ebenfalls möchte ich dazu einladen die Kommentarfunktion zu nutzen! Gerne erkläre ich auf Anfrage auch die Funktionsweisen anderer Programme. 

Mehr von mir:
kerstenglaser.de
reine-fotografie.de
Facebook
Instagram

Ich beschäftige mich viel mit der Fotografie im Allgemeinen, was sich auch in meinen Arbeiten zeigt. Momentan setze ich mich fast ausschließlich mit dem künstlerischen Potenzial dieses Mediums auseinander. Seit 2015 bin ich gelernter Fotograf. Aktuell studiere ich die Fotografie an der Fachhochschule Dortmund. Für die Fotografie ist die Wahl der Ausrüstung ebenso wichtig, wie die Verarbeitung des Materials und Farbe des Kameragurts.