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 … [Folgender Text momentan etwas schlecht sortiert, wird bald repariert…]

Die Tests

1. Profilfähigkeit Deines Browsers

Farbprofil sRGB, reduzierte FarbenFarbprofil AdobeRGB, reduzierte FarbenFarbprofil ProPhotoRGB, reduzierte Farbenkein Farbprofil

2. Unterstützung des Monitorfarbraums

volle Farben, Profil sRGBvolle Farben, Profil AdobeRGBvolle Farben, Profil Rec.2020volle Farben, Profil DCI P3

3. Umgang mit profillosen Farben/Fotos

PNG ohne FarbprofilJPG ohne FarbprofilGIF ohne Farbprofil

Die Auswertungen

1. Auswertung Profilfähigkeit

Oben seht ihr vier Balken. Die linken drei beschreiben dieselben Farben in unterschiedlichen Farbprofilen, der erste mit sRGB-Profil, der zweite mit AdobeRGB, der dritte mit ProPhotoRGB. Der vierte Balken hat kein Profil und maximale Farbwerte.

Auswertung und Abhilfe

Ein farbprofilfähiger Browser muss die linken drei Balken identisch darstellen. Wie die Browser den vierten Balken darstellen, ist unterschiedlich, mehr dazu unten. Wenn der linke der intensivste ist und die beiden anderen flauer, 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: 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. Auswertung Farbraum

Der erste Balken dient dem Vergleich, er zeigt die gleichen Farben wie oben. Die drei rechten Balken zeigen die Maximalfarben in drei erweiterten Farbräumen: AdobeRGB, Rec.2020 und DCI P3.

Auswertung und Abhilfe

Wenn der zweite Balken intensiver aussieht als der linke, unterstützt Dein Monitor mehr als sRGB. Sind die beiden rechten zum zweiten identisch, erreicht der Monitor nicht oder so gerade – genauer gibt es dieser Test nicht her – AdobeRGB. Ist der dritte Balken nochmals intensiver, geht er sogar ü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 der intensivste oder fast zum dritten identisch, geht das Display in Richtung des eher für Videobearbeitung entworfenen Farbraums DCI P3.

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

  • Du hast keines oder ein falsches Monitorprofil geladen – dann hat auch der beste Browser keine Chance, den Farbraum des Monitors zu kennen und 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 fehlt die Unterstützung für Monitorprofile
    Abhilfe: Auf Android 8/N warten, da sollen die Displayprofile kommen
  • 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. Umgang mit profillosen Fotos und CSS-Farben

Wie oben angedeutet, gehen die Browser mit Bildern ohne Farbprofil-Information unterschiedlich um – und gerade Chrome v61 (im Herbst 2017 erschienen) hat sein Verhalten geändert. Das versucht der nächste Test zu verdeutlichen. Allerdings seht ihr hier nur einen Unterschied, wenn der vorige Test ergeben hat, dass ihr einen farbkräftigen Monitor habt.

Der erste Balken links ist ein PNG ohne Farbprofil, der zweite ein JPG, der dritte ein GIF. Im vierten Balken habe ich das Motiv per CSS-Befehle nachgebaut, das ist also gar keine Grafik. [Dort als Besonderheit versuchen die drei unteren Kästchen, ein übers sRGB-Rot hinausgehende Rot zu erzeugen per rgb(300,0,0), hsl(0,150%,50%), color(rec2020 255 0 0).]

Wenn ein Balken so aussieht wie im Test darüber der ganz linke Balken, bedeutet das, dass der Browser dieses Dateiformat als sRGB interpretiert, falls kein Farbprofil vorhanden ist. Für JPGs halte ich das durchaus für sinnvoll. Wenn ein Balken so aussieht wie der farbkräftigste aus dem Test darüber, bedeutet das, dass Dein Browser diese Dateiformat nicht profiliert anzeigt, sondern unverändert mit maximalen Farben ausgibt. Auch das hat seine Berechtigung, etwa für Icons und Webdesign. Wichtig für die Webdesigner ist noch, dass CSS-Code (also der Balken rechts) genauso interpretiert wird wie das Dateiformat, in dem die meisten Design-Elemente dargestellt sind; früher war das vor allem GIF (als in HTML noch keine runden Ecken gingen…).

Tatsächlich verhalten sich hier die Browser unterschiedlich:

  • Chrome bis v60, Firefox: PNGs werden kalibriert (dunkler) angezeigt, aber GIFs, JPGs und CSS-Farben mit maximalen Farben.
  • Chrome ab v61 (und darauf aufbauende Browser wie Vivaldi und Opera): Alle drei Formate und CSS-Farben werden kalibriert (dunkler) angezeigt. „Das Internet wird flauer“, wie ein Leser schrieb.
  • Internet Explorer: Der ignoriert sowieso den Monitorfarbraum, sodass alle vier Balken mit maximalen Farben erscheinen.

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.

Artikel-Updates

  • 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.

Weitere Artikel über Farbprofile

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