Test: Wie Browser Farbprofile anzeigen

Hier könnt ihr ausprobieren, wie groß euer Monitorfarbraum ist – wenn ein Monitorfarbprofil eingerichtet ist und wenn euer Browser korrekt mit Farbprofilen umgeht. Letzteres beherrschen inzwischen alle Browser halbwegs ordentlich, seit 2017 die Mobilbrowser unter Android und iOS – und seit 2019 endlich auch Edge. Nur der Internet Explorer und alte Edge-Versionen machen weiterhin etwas falsch.

Farbprofile spielen nicht nur für Fotografen und Grafiker eine Rolle, sondern auch für ganz normale Anwender, die sich eigentlich nur schöne Fotos auf Flickr, Facebook, Google+ oder anderen Fotoseiten anschauen wollen. Gerade im Zusammenspiel mit einem farbkräftigen Monitor zeigen die verschiedenen Browser die Fotos verschieden an – solche mit und solche ohne Farbprofil sogar unterschiedlich verschieden …

1. Wie der Browser mit Farbprofilen umgeht

Dieser Test untersucht, ob der Browser die in Grafikdateien eingebetteten Farbprofil-Informationen auswertet. Die folgenden Grafiken beschreiben dieselben Farben in unterschiedlichen Farbräumen. Ein farbprofilfähiger Browser muss sie gleich anzeigen.

maximale Farben in sRGB: PNG mit sRGB
maximale Farben in sRGB: PNG mit Adobe­RGB
maximale Farben in sRGB: PNG mit ProPhoto­RGB
maximale Farben in sRGB: JPG mit Adobe­RGB
maximale Farben in sRGB: JPG mit ProPhoto­RGB

Auswertung und Abhilfe

Wenn die Grafik mit sRGB-Profil (links) die intensivsten Farben zeigt und die anderen (AdobeRGB, ProPhotoRGB) flauer sind, werden die Farbprofile nicht richtig dargestellt. Das kann mehrere Ursachen haben:

  • Du surfst mit einem älteren iPad oder iPhone
    Abhilfe: Aktualisiere das Gerät auf iOS 9.3, ab da unterstützt die Browser-Engine Farbprofile. Wenn es kein Update gibt, kenne ich keine Abhilfe :-(
     
  • Du surfst mit einem Android-Tablet oder -Smartphone
    Abhilfe: Installiere die Updates Deines Browsers. Hilft das nicht, steige auf Chrome um, der unterstützt seit Chrome/56-Engine auch Farbprofile.
  • Du surfst mit einem anderen Mobilgerät
    Abhilfe: keine bekannt :-(
     
  • Du nutzt unter Linux, Windows oder macOS einen uralten Browser, der keine Farbprofile unterstützt.
    Abhilfe: Update oder Browserwechsel
     
  • Oder bist Du mit Deinem Notebook per UMTS oder Smartphone-Tethering im Internet? Dann kann die Datenkomprimierung durch Deinen Mobilfunkprovider die Ursache sein. Die Provider löschen dann das Farbprofil aus der Datei und Dein Browser hat keine Chance, das Foto richtig darzustellen.
    Abhilfe: siehe Link.

2. Wie groß der Monitorfarbraum ist

Dieser Test versucht, den Farbraum Deines Monitors herauszufinden. Er testet eher den Monitor und die korrekte Installation eines Monitorprofils. Die linke Grafik zeigt sRGB-Farben. Die drei rechten Grafiken zeigen die Maximalfarben von drei erweiterten Farbräumen. Auf farbkräftigen und korrekt kalibrierten Monitoren/Displays sollten alle drei zwar unterschiedliche, aber intensivere Farben als die linke Grafik zeigen.

maximale Farben in sRGB (png)
maximale Farben in AdobeRGB (png)
maximale Farben in rec.2020 (png)
maximale Farben in DCI-P3 (png)

Auswertung

Wenn die drei rechten Balken intensiver aussehen als der linke, unterstützt Dein Monitor mehr als sRGB. Den genauen Farbraumumfang kann der Test natürlich nicht ermitteln, aber aus den Unterschieden der rechten Grafiken ergeben sich ein paar Hinweise:

  • Sind die beiden rechten zum zweiten (AdobeRGB) identisch, liegt der Monitor zwischen sRGB und bestenfalls AdobeRGB. Wie weit er an AdobeRGB heranreicht, gibt dieser Test nicht her.
  • Ist der dritte Balken (Rec.2020) intensiver als der zweite, geht der Monitor über AdobeRGB hinaus Richtung „klassischem“ erweiterten Farbraum für Fotografen. Der vierte Balken mag dann etwas blasser aussehen, was daran liegt, dass sein Farbraum DCI-P3 nicht ganz von den erweiterten AdobeRGB-Abstimmungen abgedeckt wird.
  • Ist der vierte Balken (DCI-P3) der intensivste oder fast zum dritten identisch, geht das Display in Richtung des eher für Videobearbeitung entworfenen Farbraums DCI-P3.

Abhilfe

Wenn die vier Balken identisch aussehen, kann das mehrere Ursachen haben:

  • Du hast keines oder ein falsches Monitorprofil geladen – dann hat der Browser keine Möglichkeit, die Farben korrekt darzustellen.
    Abhilfe: Unter Windows, macOS und Linux Monitorprofil beim Monitorhersteller suchen oder per Colorimeter selbst erstellen, siehe auch der Artikel Praxis und Klippen mit Farbprofilen.
     
  • Du surfst unter Android – da gehen keine Monitorprofile
    Abhilfe: Angeblich Android 8/N…  bisher habe ich aber noch kein Gerät mit Android 8 gesehen, das Farbprofile unterstützt.
  • Du surfst mit einem Browser, der keine Monitorprofile unterstützt; das prominenteste und ärgerlichste Beispiel dafür sind unter Windows der Internet Explorer und Edge bis 2019.
    Abhilfe: wechsele zu Chrome, Firefox, Vivaldi, Opera, …
  • Dein Display kommt nicht über sRGB hinaus. Dann nützt natürlich kein Farbprofil und kein Monitorprofil, der Monitor beherrscht keine besseren Farben…
    Abhilfe: keine – naja, außer ein neues Gerät zu kaufen.

3. Wie der Browser Grafiken ohne Farbraum interpretiert

Dieser Test untersucht, wie Dein Browser Grafiken ohne Farbprofil anzeigt. Er macht nur Sinn, wenn die Grafiken des vorigen Tests unterschiedlich aussehen.

Die linke Grafik zeigt zum Vergleich maximale Farben mit Rec.2020, die sollten (siehe voriger Test) den Monitorfarbraum recht weit ausreizen. Die rechten Grafiken stellen den Test dar: Sie sind in verschiedenen Dateiformaten gespeichert und tragen keine Farbprofilinformation. Wenn eine Grafik so intensiv wie die linke ist (oder noch intensiver), führt der Browser bei diesem Dateiformat keine Farbkalibrierung durch und stellt sie im vollständigen Monitorfarbraum dar. Ist sie flauer, führt der Browser eine Umrechnung in den sRGB-Farbraum durch.

maximale Farben in rec.2020 (png)
maximale Farben ohne Farbraum (gif)
maximale Farben ohne Farbraum (jpg)
maximale Farben ohne Farbraum (png)
maximale Farben ohne Farbraum (bmp)

Auswertung

Ein Richtig oder Falsch gibt es bei diesem Test nicht, beide Vorgehensweisen haben Vor- und Nachteile:

  • Ein Bild ohne Farbprofil als sRGB zu interpretieren, ist für Fotos im Allgemeinen der richtige Weg. So erscheinen sie auf farbkräftigen Monitoren nicht überstrahlt. In einer idealen Welt hätte jedes Foto zwar den sRGB-Farbraum eingeschrieben, aber in der Praxis dürften die allermeisten Fotos im Internet ohne Farbprofil gespeichert sein. Auch haben einige Internet-CMS die Eigenschaft, beim automatischen Skalieren von Fotos deren Farbprofil zu löschen.
  • Ein Bild ohne Farbprofil im kompletten Monitorfarbraum auszugeben, ist für Infografiken, Icons oder Webdesign-Elemente der richtige Weg. Hier will man vielleicht das intensivste Grün oder krasseste Rot eines Monitors.

Eine Möglichkeit wäre vielleicht, JPGs und PNGs als sRGB zu interpretieren, weil sie hauptsächlich Fotos enthalten dürften; BMPs und GIFs könnte man im Monitorfarbraum belassen, weil sie meist Logos oder Grafiken enthalten.

Abhilfe

Tatsächlich verhalten sich hier die Browser unterschiedlich:

  • Chrome bis v60, Firefox: PNGs werden kalibriert auf sRGB angezeigt, aber GIFs und JPGs mit maximalen Farben.
  • Chrome ab v61 (und darauf aufbauende Browser wie Vivaldi und Opera): Alle drei Formate werden kalibriert auf sRGB angezeigt. „Das Internet wird flauer“, wie ein Leser schrieb.
  • Internet Explorer: Der ignoriert sowieso den Monitorfarbraum, sodass alle Dateiformate mit maximalen Farben erscheinen.
  • Android-Browser: Da Android keine Monitorprofile unterstützt, werden sowieso alle Grafiken mit vollem Farbumfang dargestellt, egal ob sie ein Profil eingeschrieben haben oder nicht.
  • Safari unter iOS (macOS noch nicht getestet): Grafiken bis 150×150 Pixel werden ohne Kalibrierung im vollen Monitorfarbraum dargestellt, Grafiken mit höherer Auflösung auf sRGB kalibriert. Geschickter Kompromiss!

4. Wie der Browser den Monitorfarbraum ausnutzen kann

Dieser Test versucht herauszufinden, wie Dein Browser den erweiterten Farbraum per HTML/CSS ausnutzen kann. Er ist nur sinnvoll, wenn die vorigen Tests einen erweiterten Farbraum ergeben haben.

Links die beiden Balken stammen zum Vergleich aus dem vorigen Test; rechts die roten und grünen Balken sind spannend: Haben sie die Farben des ganz linken Balken (sRGB) oder die des zweiten von links (erweiterter Farbraum rec.2020)?

maximale Farben in sRGB (png)
maximale Farben in rec.2020 (png)
color:#f00
rgb(300,0,0)
hsl(0,150%,
50%)
color(rec2020 255 0 0)
color:#0f0
rgb(0,999,0)
hsl(120,300%,
50%)
color(rec2020, 0 255 0)

Auswertung

Der W3C hat inzwischen klar definiert, dass die CSS- und HTML-Farbangaben im sRGB-Farbraum zu interpretieren sind. Obiger Kasten mit „color:#f00“ muss also das sRGB-Rot der linken Grafik zeigen, #0f0 das Grün der linken Grafik. Das machen allerdings nicht alle Browser so.

Und wenn es ein Browser richtig macht, stellt sich den Webdesignern das Problem: Wie bekommen sie denn nun das kräftigste Rot des Monitors angezeigt (also das des zweiten Balken von links mit rec.2020), und zwar per CSS? Ich versuche das hier auf drei Arten:

  • rgb(): Eigentlich sind die RGB-Werte nur bis 255 definiert. Einen höheren Wert könnte ein Browser als Überschreitung des Farbraums interpretieren, war meine Hoffnung. Beim Rot probiere ich 300 als höheren Wert, bei Grün 999.
  • hsl(): Eine ähnliche Idee: Der zweite Wert gibt die Sättigung an, und Werte über 100% mögen den Farbraum überschreiten. Beim Rot versuche ich 150%, beim Grün zusätzlich eine höhere Helligkeit.
  • Die W3C hat aufgrund der Beschränkung dieser Farbdefinitionen auf sRGB im CSS Color Module Level 4 einen neuen Standard vorgeschlagen, in dem man in CSS Farben unter Angabe eines Farbprofils angeben kann, nämlich als color(<Farbraum>, <Farbwerte>). Die Farbprofile dci-p3 und rec2020 sind dabei vorgegeben. Bisher ist mir noch kein Browser bekannt, der das unterstützt; dann bleibt das Feld weiß. Beim Rot steht kein Komma zwischen Farbraum und Werten, beim Grün schon – die W3C-Vorschläge sind da nicht eindeutig.

Colorpicker

Farbprofile PicPick
Der Farbpipetten-Modus von PicPick sagt, dass dieses Rot den RGB-Wert #f20e17 hat, also nicht das satteste Rot, das der Monitor anzeigen könnte – #ff0000.

Wenn ihr euch nicht sicher seid, ob die Balken identisch sind, könnt ihr euch zumindest unter Windows/Mac/Linux mit einem Picker-Tool helfen. Das sind Tools, die euch die RGB-Werte der Farbe unter dem Mauszeigen anzeigen. Für Windows gibt es zum Beispiel PicPick, das zudem als Screenshot-Tool super ist. Einfacher ist der Just Color Picker von AnnyStudio.

Picker-Lösungen für Android und iOS kenne ich nicht. Bestenfalls könnt ihr ein Screenshot erzeugen und euch den am PC mit einem Grafikprogramm anschauen.

Wollt ihr mehr über das Thema erfahren? Weitere Artikel zu Farbprofile findet ihr unter der Rubrik Farbprofile: Grundlagen, Praxistipps und mehr.

  • 17.7.2011: erste Version
  • 16.1.2014: fünfter Balken, Tipps mit Pickern
  • 18.6.2014: Auswertung etwas ausführlicher
  • 7.11.2014: Text gestrafft, Abhilfe bei den Fehlerursachen hinzugefügt
  • 21.6.2017: iOS und einige Android-Browser beherrschen nun Farbprofile, iOS auch Monitorprofile
  • 30.9.2017: Chrome v61 ändert den Umgang mit profillosen Bildern und CSS, sodass ich den dritten Test eingebaut habe. Bisher konnte ich aber nur Firefox und Chrome dahingehend überprüfen.
  • 16.12.2017: Test #1 um JPG ergänzt; Test #3 um BMP ergänzt; einige Texte (hoffentlich) verständlicher formuliert; letzten Test aufgeteilt in #3 (Grafiken ohne Farbprofil) und #4 (CSS/HTML); neues Layout
  • 12.3.2019: Formulierung im Kasten 4 berichtigt, danke an T!
Microsoft Edge ab 2019

(Update 21.8.2019) Microsoft hat 2018 angekündigt, den eigenen Browser Edge auf die Chromium-Engine umzustellen. Seit August 2019 ist die Beta-Version erhältlich (siehe Heise.de) – und tatsächlich: Endlich beherrscht Edge die Farbprofile korrekt. Ich habe das oben im Text an einigen Stellen entsprechend eingefügt. Damit bleibt unter den aktuellen Browsern nur noch einer übrig, der Farbprofile falsch behandelt: Chrome unter Android.

Artikel über Farbprofile

Grundlegendes Arbeiten mit Farbprofilen

Das Arbeiten mit Farbprofilen besteht aus drei unter Win, Mac und Linux fast gleichen Schritten. Die größte Umstellung: Man sollte nur profilfähige Anwendungen nutzen.

4 Kommentare

  1. Ist im letzten Absatz bzw. bei Auswertung etwas vertauscht?
    „(…) die Farben des rechten sRGB-Balkens oder des linken mit erweitertem Farbraum?“
    vs.
    „Obiger erster Kasten mit „color:#f00“ muss also das sRGB-Rot der linken Grafik zeigen (…)“
    Welcher Kasten hat denn nun das sRGB-Rot?

    1. Danke für den Hinweis! Da war mir tatsächlich was verrutscht und falsch, und blöde formuliert war es auch. Nun ists richtig und hoffentlich verständlicher. Grüße, Jörg

  2. Vielen Dank für diesen informativen Artikel und Browser-Farbtest. Werde ich sicherlich noch öfters benutzen.
    Meine Tests zeigen allerdings, dass nicht Chrome unter Android, sondern Firefox unter Android (neueste Version) die Farbprofile nicht richtig darstellt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert