Hallo zusammen,

mein voller Terminplan in den letzten 5 Wochen verzögert Teil 2 des Raw Videos noch ein wenig. Ich bitte um noch ein bisschen Geduld.

Um euch bis dahin ein wenig über Wasser zu halten, gibt es ein schrifliches Tutorial über die Optimierung eurer Bilder fürs Web. Das Hauptaugenmerk liegt dabei auf der bestmöglichen, von euch beabsichtigten, Farbwiedergabe.

Bildoptimierung für die Webdarstellung

Wer kennt nicht die Ernüchterung, wenn man stolz sein bearbeitetes Bild betrachtet und sich über die Reaktionen auf verschiedenen Plattformen im Internet freut.

Nach dem Upload schaut man sich das Bild online selber an und stellt fest: „So sah das bei mir im Photoshop doch nicht aus.. hm.“

Nach etlichem Rumstochern in verschiedensten Farbeinstellungen, bekommt man es schließlich hin, das Bild endlich im Browser seiner Wahl so darzustellen, wie man möchte. Nur um später an anderer Stelle festzustellen, dass Browser X oder Y sich als DaVinci betätigt und seine eigene Interpretation des Billdes darstellt.

Die Wurzel allen Übels ist der Wechsel aus einer farbkalibrierten Umgebung in Photoshop in eine nicht farbkalibrierte Darstellung in den Browsern. Einige Browser beherrschen zwar ein Farbmanagement, solange dies aber nicht bei allen der Fall ist, hilft das leider auch nicht wirklich weiter.

Ich möchte euch, den aus meiner Sicht, verlässlichsten Workflow vorstellen, der zumindest in allen gängigen Browsern einheitliche Ergebnisse hervorbringt. Zudem bietet euch mein Workflow zu jeder Zeit die Kontrolle, was am Ende rauskommen wird.

1. Grundeinstellungen vor dem Bearbeiten

Wenn wir es mit dem Ausgabemedium Monitor zu tun haben, empfehle ich den RGB Arbeitsfarbraum auf sRGB IEC61966-2.1 zu stellen. Jede gesparte interne Umwandlung bietet weniger Stolpersteine.

In Photoshop findet ihr diese Einstellungen unter

Bearbeiten > Farbeinstellungen > Arbeitsfarbräume

Nun mögt ihr einwenden, dass man in Photoshop in einem möglichst grossen Farbraum, wie AdobeRGb oder Pro Photo RGB, arbeiten sollte. Das ist vollkommen richtig und wird durch die obige Einstellungen nicht ausgeschlossen.

Ebenfalls in den Farbeinstellungen findet ihr die Optionen „Beim Öffnen Wählen“. Bei Wahl dieser Einstellung wird euch ermöglicht, den ursprünglichen höheren Farbraum, z.B. beim Import aus dem Raw Konverter beizubehalten und in diesem zu arbeiten.

Beim Öffnen eines Bildes werdet ihr dann mit folgendem Dialog begrüsst, in dem ihr die erste Option auswählt.

Im Klartext heisst das, auch wenn der Arbeitsfarbraum in den Einstellungen auf sRGB eingestellt ist, ihr aber beim Öffnen der Datei das eingebettete Profil verwendet, bearbeitet ihr euer Bild nicht in sRGB, sondern wie im obigen Beispiel in AdobeRGB.

2. Vorgehensweise nach dem Bearbeiten

Nachdem ihr nun euer Bild nach euren Vorstellungen in Photoshop bearbeitet und auf die gewünschte Grösse verkleinert habt, geht es ans Aufbereiten fürs Web.

SCHRITT 1: sRGB Konvertierung

Habt ihr das Bild in einem anderen RGB Profil als sRGB bearbeitet, müssen wir das nun ändern.

Hierzu ruft ihr in der Befehlsleiste von Photoshop unter „Bearbeiten“ den Befehl „In Profil umwandeln“ auf.

Folgender Dialog begegnet euch:

Hier stellt ihr beim Zielfarbraum sRGB ein.

Da wir sowieso in ein jpg ohne Ebenen konvertieren wollen, könnt ihr den Checkmark bei „Auf Hintergrundebene redzieren, um Erscheinungsbild zu erhalten“ auch hier setzen (in der obigen Grafik ist er noch nicht ausgewählt).

Als Resultat haben wir das Bild nun im sRGB Modus. Sieht es jetzt so aus, wie es in meinem Browser aussehen wird? Die Antwort ist ein wenig befriedigendes…. vielleicht.

Um dem Bild den letzten Feinschliff zu geben und es möglichst nahe an das Original heranzubringen, bietet uns Photoshop die Möglichkeit, das Ergebins mittels eines Proofs zu testen.

SCHRITT 2: Proof

In der Befehlsleiste wählt ihr unter Ansicht den Menüpunkt „Proof einrichten“. Im aufklappenden PopUp Menü setzt ihr den Haken bei „Monitor-RGB“.

Nun könnt ihr mittels des Tastaturkürzels STRG+Y (Win), CMD+Y (Mac) bei wiederholtem Drücken zwischen der Darstellung in Photoshop und der zu erwartenden Darstellung im Browser hin- und herschalten. In der Titelleiste eines Bildes wird dies auch mit den Bezeichnungen (RGB/8) bzw. (RGB/8/Monitor) angezeigt.

Wenn ihr keinen grossen beziehungsweise einen für euch akzeptablen Unterschied feststellt, seid ihr fein raus und könnt direkt zu Schritt 4 übergehen.

Wenn euch vor allem das Bild im Kontrast und den Rottönen zu sehr abweicht, habt ihr nun die Chance einzugreifen.

SCHRITT 3: Korrektur fürs Web

Wenn trotz aller bisher getroffenen Maßnahmen das Ergebnis des Monitor Proofs zu stark abweicht geht ihr wie folgt vor.

Unter dem Menüpunkt „Bild“ wählt ihr den Befehl „Duplizieren“. Es wird eine Kopie eures Bildes erstellt.

Ordnet die beiden identischen Bilder nebeneinander an. Das Originalbild belasst ihr hierbei wie es ist, bei der Kopie schaltet ihr mit STRG+Y (Win), CMD+Y (Mac) den Monitor-Proof ein.

Jetzt könnt ihr an dem Proof noch Angleichungen vornehmen. Diese Darstellung des Bildes ist nämlich eure tatsächliche Version im Browser. Also, was ihr hier seht ist euer Endergebnis.

Geeignete Mittel und Wege zur Angleichung werde ich euch noch im Reihe der späteren Photoshop Videos zeigen.

SCHRITT 4: Speichern fürs Web

Jetzt solltet ihr euer fertig bearbeitetes Bild und profil-technisch optimiertes Bild vor euch haben. Wie speichern wir nun das Bild am besten?

Photoshop bietet uns dafür unter dem Menüpunkt „Datei“ die Option „Für Web und Geräte speichern“, die wir auch benutzen werden.

Ich habe hier nur den relevanten, oberen rechten Teil dieses Dialogs als Screenshot angehängt.

Die hier wichtigen Einstellungen, die das Ergebnis beeinflussen könnten, sind folgenden Optionen:

Farbprofil einbetten > kein Checkmark

In sRGB konvertieren > kein Checkmark

Oft kommt nun die Frage, warum um alles in der Welt, hier nicht mehr der ach so wichtige sRGB Farbraum gewählt wird und wir dem Browser eine Datei ohne jedwedes erkennbares Farbprofil zum darstellen geben sollen.

Die Antwort ist einfach… wir haben dem Browser mit unseren unternommenen Schritten die Arbeit bereits abgenommen. Da die Browser unterschiedlich mit den Bildern umgehen, geben wir Ihnen keinen Spielraum und sagen ihnen im Prinzip „Nimm was ich dir gebe und ändere nichts daran“.

Bei allen verschiedenen Tips zur Speicherung zur Webdarstellung von Bildmaterial, liefert diese Vorgehensweise die grösste Chance seine Bilder in fast allen Browsern gleich und dem Original so gut entsprechend wie möglich darzustellen.

Wie schon erwähnt, werde ich in einem späteren Video dieses Thema noch einmal auffassen und auf weitere Aspekte, vor allem bei der Anpassung und dem Schärfen eingehen.

Fragen und Anregungen könnt ihr mir an tutorial@karma-retouching.com schicken.

Eine Antwort kann zwar schon einmal ein paar Tage auf sich warten lassen, aber beantwortet wird alles .

Bis dahin wünsche ich euch schon einmal ein schönes Osterwochende. Hoffen wir das wir weiterhin so schönes Wetter zum Fotografieren haben.

Bis zum nächsten Mal,

Euer Karsten