Zurück zur Hauptseite foto.beitinger.de

Farb-Testbilder für Browser

.

Test 1: Benutzt mein Browser überhaupt Farbmanagement?

Dieses Testbild kennen Sie ja schon aus dem ersten Artikel dieser Reihe. Wenn sich hier zeigt, dass Ihr Browser kein Farbmanagement beherrscht (oder zumindest das Farbmanagement noch nicht aktiviert ist), können Sie sich die weiteren Tests sparen.

Das Bild ist in einem absichtlich farbverdrehten sRGB-Farbraum angelegt; erst wenn das eingebettete Profil korrekt ausgewertet wird, ergeben sich wieder die richtigen Farben. (Wenn Sie ein anderes Programm als Ihren Browser damit testen wollen, speichern Sie das Bild einfach ab.)

Bisherige Beobachtungen mit Browsern:
Farbmanagement beherrschen bereits die Mac-Browser Safari, Internet Explorer 5 und OmniWeb. Mit Safari für Windows und Firefox 3.0/3.5 (Mac, Windows, Linux) geht es ebenfalls; in Firefox 3.0 muss man noch manuell das Farbmanagement aktivieren.
Die anderen bekannten Browser können noch kein Farbmanagement.

.

Test 2: Wendet mein Browser Farbmanagement auch auf unprofilierte Bilder an, oder gibt er sie im Monitorfarbraum wieder?

Damit dieser Test funktioniert, muss in Ihrem Betriebssystem ein von sRGB abweichendes Monitorprofil installiert sein. Notfalls funktioniert Test 2 mit einem normalen (gemessenen) Monitorprofil, aber dann kann die Beurteilung schwierig werden. Um die Sache möglichst eindeutig zu machen, laden Sie sich am besten das extra-falsche Monitorprofil CM-Test_sRGB.icc herunter und installieren es vorübergehend als Standard-Monitorprofil. Nach Änderung des Monitorprofils müssen Sie aller Browserfenster schließen und den Browser neu starten, damit die Änderung wirksam wird. (Dank an mcgruenigen aus dem DSLR-Forum, der dieses Profil erstellt hat.)

mit sRGB-Profil ohne Profil Browser-Farben

Dieser Test zeigt Farb-Vergleichsfelder in drei Spalten zu je 100 Pixel Breite. Die oberste Farbe ist normalerweise rot, dann kommt orange, dann kommt grün, dann gelb usw.

In das JPEG-Bild der linken Spalte wurde ein sRGB-Profil eingebettet, das ein farbmanagementfähiger Browser auf jeden Fall richtig interpretieren muss.

Sobald Sie das extra-falsche Monitorprofil insatalliert haben und diese Seite erneut aufrufen, werden die Farben der ersten Spalte verdreht: Die oberste Farbe wird grün, dann kommt ein helleres Grün, dann blau, dann türkis usw.

Die mittlere Spalte zeigt dasselbe JPEG-Bild ohne Profil.
Wendet Ihr Browser Farbmanagement auch auf unprofilierte Bilder an (indem er deren Farben als sRGB interpretiert), sollte auch die mittlere Spalte oben grün und mit der ersten Spalte identisch sein. Wenn Ihr Browser hingegen die Browserfarben nur im Monitorfarbraum zeigt, werden Sie die mittlere Spalte noch in unkonvertierten Farben sehen, also mit rot beginnend.

Die rechte Spalte zeigt nochmal dieselben Farbwerte, aber nicht als Bilder, sondern direkt im Browser als Tabellenzellen-Hintergrundfarben erzeugt. Diese stehen stellvertretend für alle vom Browser erzeugten Farben.
Wendet Ihr Browser Farbmanagement auch auf die Browserfarben an (indem er diese als sRGB interpretiert), sollte auch die rechte Spalte oben grün und mit der ersten Spalte identisch sein. Wenn Ihr Browser hingegen die Browserfarben nur im Monitorfarbraum zeigt, werden Sie die rechte Spalte noch in unkonvertierten Farben sehen, also mit rot beginnend.

Die Interpretation aller unprofilierten Farben als sRGB, also dass Sie hier alle drei Spalten identisch mit grün beginnend sehen, ist das Idealverhalten eines farbmanagement-fähigen Browsers. Eventuell werden dann sogar die Menüs und Bedienelemente des Browsers angepasst und haben jetzt teils komische Farben (nur Grautöne sind davon ausgenommen).

Falls Sie den Test mit Ihrem normalen Monitorprofil durchführen wollen, findet keine klare Farbverdrehung statt, alle Spalten beginnen immer mit einem roten Feld und die Unterschiede beschränken sich auf die Farbsättigung. Dann müssen Sie die Spalten sehr genau anschauen, ob sich die Farbsättigungen einiger Farben der mittleren und rechten Spalten etwas von der in der ersten Spalte unterscheiden.

Bisherige Beobachtungen mit farbmanagement-fähigen Browsern:
- Safari (Mac + Windows) interpretiert das profilierte Bild korrekt als sRGB, aber gibt das unprofilierte Bild und andere Browser-Farben im Monitorfarbraum wieder.
- IE5 (Mac) interpretiert sowohl das profilierte JPEG als auch das unprofilierte JPEG und die Browser-Farben wie sRGB.
- OmniWeb (Mac) interpretiert das profilierte Bild korrekt als sRGB, aber gibt das unprofilierte Bild und andere Browser-Farben im Monitorfarbraum wieder.
- Firefox 3.0 mit aktiviertem Farbmanagement sowie Firefox 3.5 in Mode 1 interpretieren sowohl das profilierte JPEG als auch das unprofilierte JPEG und die Browser-Farben wie sRGB.
- Firefox 3.5 in Mode 2 interpretiert das profilierte Bild korrekt als sRGB, aber gibt das unprofilierte Bild und andere Browser-Farben im Monitorfarbraum wieder.

.

Test 3: Wie werden GIF- und PNG-Bilder im Vergleich zu JPEG behandelt?

Es gelten bezüglich des Monitorprofils dieselben Hinweise wie für Test 2.

JPEG sRGB-Profil JPEG ohne Profil GIF ohne Profil PNG ohne Profil PNG sRGB-Profil

Neben JPEG sind im Webdesign auch die Formate GIF und PNG sehr gebräuchlich. Im Gegensatz zu JPEG und PNG kann man in GIF aber keine Farbprofile einbetten. Daher ist es in dem Fall besonders interessant, ob die Farben als sRGB interpretiert oder im Monitorfarbraum ausgegeben werden.

Die erste und letzte Spalte zeigen die JPEG- und PNG-Version mit eingebettetem sRGB-Profil. Die weiteren Spalten zeigen dieselben Farben in profillosem JPEG, GIF und PNG.

Sind alle fünf Spalten identisch mit grün beginnend (was auch in diesem Test der Idealfall wäre), interpretiert der Browser profilloses JPEG, GIF und PNG genauso korrekt als sRGB wie die profilierten JPEGs und PNGs. Beginnt die zweite, dritte und/oder vierte Spalte noch mit rot, weist das darauf hin, dass profilloses JPEG, GIF und/oder PNG nur im Monitorfarbraum dargestellt werden.

Bisherige Beobachtungen mit farbmanagement-fähigen Browsern:
- Safari (Mac + Windows) zeigt alle profillosen Bilder im Monitorfarbraum.
- IE5 (Mac) zeigt profilloses JPEG und GIF als sRGB, aber PNG im Monitorfarbraum.
- OmniWeb (Mac) zeigt profilloses JPEG und GIF im Monitorfarbraum,aber PNG als sRGB.
- Firefox 3.0 mit aktiviertem Farbmanagement sowie Firefox 3.5 in Mode 1 zeigen alle profillosen Formate als sRGB.
- Firefox 3.5 in Mode 2 zeigt profilloses JPEG, GIF und PNG im Monitorfarbraum.

.

Test 4: Werden außer sRGB auch andere Farbräume korrekt interpretiert?

Falls Sie für Test 2 und 3 das extra-falsche Monitorprofil aktiviert haben, machen Sie dies für diesen Test bitte wieder rückgängig. Für diesen Test verwenden Sie, falls vorhanden, wieder Ihr normales Monitorprofil. Behelfsweise können Sie sRGB als näherungsweises Monitorprofil einstellen.

sRGB AdobeRGB WideGamutRGB

Wenn wir schon Farbmanagement zur Verfügung haben, sollen natürlich alle Farbräume (nicht nur sRGB) korrekt dargestellt werden können. Dies testen wir jetzt.

In der ersten Spalte finden sich wieder die bekannten Farben in sRGB (diesmal nur die 6 vollgesättigten Grundfarben, beginnend mit rot in der obersten Zeile).
Die anderen Spalten enthalten dieselben Farben in AdobeRGB und WideGamutRGB. Diese Varianten sind entstanden, indem das sRGB-Bild der ersten Spalte in die anderen Farbräume konvertiert wurde.

Wenn das Farbmanagement des Browsers mit "relativ farbmetrischer" Konvertierung arbeitet (was für Monitordarstellung Standard ist), müssten alle vier Spalten gleich aussehen. Ist das Farbmanagement nicht in Betrieb oder ist es auf eine andere (z. B. die "perzeptive") Umrechnungsmethode eingestellt, sieht man Unterschiede zwischen den Farben.

Bisherige Beobachtungen mit farbmanagement-fähigen Browsern:
Alle farbmanagement-fähigen Browser (siehe Test 1) geben profilierte Bilder aller Farbräume korrekt wieder.

.

Test 5: Sind auf dem Monitor größere Farbräume als sRGB darstellbar?

Da sich dieser Test speziell auf Ihren Monitor bezieht, ist er nur sinnvoll durchführbar, wenn Sie ein exaktes Monitorprofil installiert haben (also eines, das im Rahmen der Kalibrierung/Profilierung an Ihrem eigenen Monitor erstellt wurde). Genauere Hinweise zur Durchführung einer Monitorkalibrierung finden Sie hier.

sRGB AdobeRGB WideGamutRGB

Dieser Vergleich ist auf den ersten Blick ähnlich wie der aus Test 4, jedoch mit einem großen Unterschied: Diesmal sind die Farben nicht auf sRGB beschränkt, sondern es zeigt jede Spalte die maximalen Farbsättigungswerte, die der jeweilige Farbraum darstellen kann.

Ob Sie hier Unterschiede sehen, hängt vom Farbraum Ihres Monitors ab. Auf einem Monitor, dessen Farbraum in keiner Farbe weiter als sRGB reicht, sehen Sie hier lauter identische Farben. Wenn Ihr Monitor etwas größer als sRGB ist, sehen Sie zumindest einen Unterschied zwischen sRGB und AdobeRGB.
Um auch irgendwo einen Unterschied zwischen AdobeRGB und WideGamutRGB zu sehen, muss Ihr Monitor einen Farbraum haben, der in mindestens einer Farbe über AdobeRGB hinausgeht.

.

Vorläufige Zusammenfassung der Browser-Fähigkeiten:

Firefox 3.0 mit aktiviertem Farbmanagement sowie Firefox 3.5 in Mode 1 sind die bisher einzigen Browser, mit denen das Farbmanagement in vollem Umfang funktioniert; leider muss hierfür nach Installation des Firefox zuerst eine spezielle Einstellung vorgenommen werden (siehe hier).
IE5 auf dem Mac beherrscht Farbmanagement weitgehend, kann aber unprofilierte PNG-Grafiken bisher nur im Monitorfarbraum anzeigen. Safari (Mac) und OmniWeb (Mac) können unprofilierte JPEGs, GIFs und die Browserfarben nur im Monitorfarbraum anzeigen. Safari (Windows) zeigt sämtliche unprofilierte Elemente nur im Monitorfarbraum.

Wenn Sie weitere Browser, die hier noch nicht erwähnt sind, erfolgreich auf Farbmanagement getestet haben, schreiben Sie mir bitte. (Das gilt auch für Versionen der genannten Browser auf anderen Betriebssystemen.) Ich nehme die Informationen dann mit in diese Seite auf:

Es geht hier nur darum, in welchem Umfang das Farbmanagement schon funktioniert. Browser, die noch gar kein Farbmanagement können, werde ich hier nicht eigens auflisten.

.

Testbilder in verschiedenen Farbräumen

Es gelten bezüglich des Monitorprofils dieselben Hinweise wie für Test 5.

Die Tests 4 und 5 zeigen nur glatte Farbfelder, an deren Übergängen man Farbunterschiede schnell erkennt. Jetzt kommen zum Abschluss noch ein paar echte Bilder in unterschiedlichen Farbräumen mit/ohne Profil. Es geht vornehmlich darum, wie stark sich die Wiedergabe von Bildern verändert, wenn sie falsch interpretiert werden. Hier können Sie an praktischen Beispielen ausprobieren, was oben nur theoretisch getestet wurde.

Um den direkten Vergleich zu ermöglichen, habe ich die Bilder so angelegt, dass sie "umschaltbar" sind. Klicken Sie einfach auf die Links und schalten Sie damit beliebig zwischen den Versionen hin und her. Zwischen manchen Versionen werden Sie Unterschiede sehen, zwischen anderen nicht.

Etwa zwischen der sRGB-Version mit und ohne Profil gibt es keinen Unterschied, wenn Ihr Browser profillose Bilder als sRGB interpretiert. Tut er dies nicht, könnte ein kleiner Unterschied sichtbar werden.

Wenn Sie ein AdobeRGB-Bild mit und ohne Profil betrachten, werden Sie auf den allermeisten Monitoren Unterschiede sehen. Das gilt auch für die anderen großen Farbräume.

Ob Sie zwischen den korrekt profilierten Bildern verschiedener Farbräume Unterschiede sehen, hängt von zwei Faktoren ab: der Größe Ihres Monitorfarbraums und dem motivabhängigen Vorhandensein von stark gesättigten Farben. Enthält das Motiv keine (oder zu wenige) stark gesättigte Farben, die den kleineren Farbraum übersteigen, gibt es einfach keinen farblichen Unterschied. Ist Ihr Monitorfarbraum nicht groß genug, können Sie die Unterschiede rein technisch nicht sehen - selbst wenn in der Bilddatei welche vorhanden sind.

.

sRGB ohne Profil
sRGB mit Profil
AdobeRGB ohne Profil
AdobeRGB mit Profil

.

sRGB ohne Profil
sRGB mit Profil
AdobeRGB ohne Profil
AdobeRGB mit Profil

.

sRGB ohne Profil
sRGB mit Profil
AdobeRGB ohne Profil
AdobeRGB mit Profil

.

sRGB ohne Profil
sRGB mit Profil
AdobeRGB ohne Profil
AdobeRGB mit Profil
eciRGBv2 ohne Profil
eciRGBv2 mit Profil
AppleRGB ohne Profil
AppleRGB mit Profil
WideGamutRGB ohne Profil
WideGamutRGB mit Profil

Autor: Andreas Beitinger
Letzte Änderung: März 2010

Zurück

Farbmanagement im Browser

Mögliche Probleme im Umgang mit Websites

Farb-Testbilder für Browser