Test: Wie Browser Farbprofile anzeigen

Test: Wie Browser Farbprofile anzeigen

1920 1077 schönergesehen.de

Hier könnt ihr ausprobieren, wie gut euer Browser mit Farbprofilen umgeht. Inzwischen verhalten sich alle Browser halbwegs ordentlich, seit 2017 sogar die Mobilbrowser unter Android und iOS. Nur der Internet Explorer und Edge 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.

Auswertung und Abhilfe

Wenn die sRGB-Grafik (links) die intensivsten Farben zeigt und die anderen (AdobeRGB, ProPhotoRGB) flauer sind, werden die Farbprofile nicht richtig dargestellt. Das kann das 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 intensivere Farben als die linke Grafik zeigen.

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) nochmals intensiver, 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.
    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.

Auswertung und Abhilfe

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.

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 rechten sRGB-Balkens oder des linken mit erweitertem Farbraum?

color:#f00
color:#0f0
rgb(300,0,0)
rgb(0,999,0)
hsl(0,150%,
50%)
hsl(120,300%,
50%)
color(rec2020 255 0 0)
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 erster Kasten mit „color:#f00“ muss also das sRGB-Rot der linken Grafik zeigen, #0f0 das Grün. 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, 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; wenn nicht, bleibt das Feld weiß. Beim Grün steht kein Komma zwischen Farbraum und Werten, bei 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 – das satteste Rot wäre #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

Weitere Artikel zu Farbprofilen

1 Kommentar
  • Sehr informativer, knackiger Beitrag, der es auf den Punkt bringt. Safari auf Mac machts leider „falsch“… FF und Chrome z.B. problemlos und „richtig. Danke!

Hinterlasse eine Antwort