Colormanagement im Webbrowser

Grundlagen
Damit Colormanagement im Web funktioniert, sollten zumindest 2 Dinge gegebene sein:

  1. Der verwendete Browser ist Colormanagement-fähig, d.h. der Browser unterstützt ICC-Profile und konvertiert Bilder anhand der eingebetteten Farbprofile zur Ausgabe korrekt ins Monitorprofil.
  2. Bilder ohne Tags (also ohne eingebettete Farbprofile) werden als sRGB interpretiert und von dort ins Monitorprofil konvertiert.
Natürlich wäre es dann noch großartig, wenn jeder Nutzer auch einen kalibrierten Monitor besitzt, aber das ist klarerweise nur Wunschdenken.

Safari
Wer Safari nutzt, muss sich um das Colormanagement nicht weiter kümmern, da es automatisch aktiviert ist und Safari sogar Bilder ohne Tags als sRGB interpretiert. Da nun auch iOS schon seit ein paar Jahren Colormanagement unterstützt, passiert das ganze auch auf allen Apple-Tablets und Smartphones. Abgesehen von Microsofts Surface Pro bzw. Book sind Apples mobile Geräte übrigens die einzigen die brauchbares Colormanagement anbieten.

Firefox
Auch Firefox unterstützt Colormanagement, allerdings muss man dies als User manuell aktivieren. Dazu öffnet man about:config, sucht nach »color_« und ändert dann den Wert von gfx.color_management.mode von 2 auf 1.

firefox-colormanagement-setting

Chrome

Auch die aktuelle Version von Chrome unterstützt Colormanagement.

Weiterführendes
Abgesehen von Bildern gibt es im Web natürlich noch jede Menge andere Elemente. Hier wird das Thema schon deutlich schwieriger, denn CSS-Farben werden beispielsweise nicht colorgemanagt. Das kann vor allem auf Wide-Gamut-Monitoren zu übersättigten Farben führen. (Mehr dazu hier: Was hat es mit Apples Wide-Gamut-Displays und dem DCI-P3-Farbraum auf sich?)

Wer will, kann seinen Browser mittels diesem Web Browser Colormanagement Test über die Colormanagement-Fähigkeiten testen.

Übrigens: Wer Bilder fürs Web erstellt, sollte beim Speichern immer nach sRGB konvertieren und das Profil einbetten:

web-speichern
Links: »Für Web speichern« (bis inkl. Photoshop CC2017); Rechts »Exportieren als« (ab Photoshop CC2018)


Comments

Warum wird das schöne Blau am Monitor im Druck zu Violett?

Jeder, der in der Druckvorstufe arbeitet oder besser gesagt jeder, der schon einmal etwas ausgedruckt hat, ist diesem Phänomen sicherlich schon mal begegnet: In den RGB-Daten befindet sich ein sattes Dunkelblau, doch nach der CMYK-Konvertierung (bzw. am Druck) findet man ein eher fades Violett wieder. Wie kommt es zu diesem Farbdrift?

blue-purple


Vereinfacht ausgedrückt: wegen des unvorteilhaften Gamut-Mappings.

Wenn ein Bild ein sattes Blau enthält, so liegt dieses meist außerhalb des Gamuts vom gewünschten Ausgabeprofil – sei das nun ISO Coated v2 oder PSO LWC Standard etc. Um das Blau nun in den Gamut zu befördern, verringert das Color Matching Module die Sättigung und behält dabei möglichst den LAB-Bunttonwinkel bei. Aus rein mathematischer Sicht haben wir es also auch nach der Farbraumtransformation mit dem gleichen (oder fast gleichen) Farbton zu tun. Allerdings entspricht dieses Verhalten nicht unserer Wahrnehmung. Klarer wird die Problematik anhand folgender Abbildung:

blau-violett-gamut-mapping
Quelle: Bruce Lindbloom


Bei der Transformation wird entlang der roten Linie verschoben (der Bunttonwinkel bleibt also gleich), solange bis sich die Quellfarbe im Gamut des Zielfarbraums befindet. Der wahrgenommene Farbton verläuft aber nicht gerade nach innen, sondern eben – wie links neben der roten Linie zu sehen – etwas gebogen. Durch diesen Umstand landet man an einem falschen Ort und das Blau kippt ins Violette.

Nun könnte man meinen, dass der für die Farbraumtransformation verwendete LAB-Farbraum Schuld daran ist. Immerhin bildet dieser, wie wir oben gesehen haben, nicht das Verhalten unserer Wahrnehmung ab. Doch die Wahrheit ist, dass der LAB-Farbraum für das Gamut-Mapping verwendet wird, obwohl er gar nicht dafür entwickelt wurde. Wir verwenden den LAB-Farbraum im Prinzip nur mangels Alternativen. Sinn und Zweck der Entwicklung von LAB war es lediglich, Farbunterschiede messbar zu machen.

Was man dagegen tun kann? Das beantworte ich in einem zukünftigen Artikel …

Comments