Zarządzanie kolorem w przeglądarkach internetowych

Wprowadzenie

Nie tylko profesjonalni projektanci stron, ale i zwykli użytkownicy regularnie publikują zdjęcia w sieci: na stronach firm, w sklepach internetowych, na blogach czy w mediach społecznościowych. Jaką mamy pewność, że oglądające je osoby widzą kolory tak, jak zamierzał autor? Często okazuje się, że ten sam obraz wygląda inaczej w różnych przeglądarkach internetowych. Publikując grafiki w Internecie, warto zrozumieć, skąd biorą się te różnice i jak zapewnić spójną kolorystykę niezależnie od używanej przeglądarki. Poniżej omawiamy podstawy zarządzania kolorem w przeglądarkach WWW, opierając się na wynikach testów przeprowadzonych przez EIZO, oraz podpowiadamy, jak uniknąć nieprzyjemnych niespodzianek z przekłamanymi barwami.

Dlaczego kolory wyglądają inaczej w różnych przeglądarkach?

Jeśli zdarzyło Ci się obejrzeć w przeglądarce internetowej obraz przygotowany wcześniej w programie graficznym i zauważyć, że prezentuje się on zbyt jaskrawo, wyblakle albo odcienie wyglądają inaczej niż zamierzone, nie jesteś sam. Taka niespójność kolorów może sprawić poważne problemy, np. produkt prezentowany w sklepie internetowym może wyglądać inaczej niż w rzeczywistości, wprowadzając klienta w błąd, albo fotograf traci czas na niepotrzebne poprawki. Istnieją dwie główne przyczyny tego, że ten sam obraz może wyglądać różnie w poszczególnych przeglądarkach:

1. Brak odpowiedniego profilu barwnego osadzonego w obrazie. Jeśli obrazek nie zawiera informacji o docelowej przestrzeni kolorów (np. sRGB czy Adobe RGB), przeglądarka nie wie, jak go interpretować.

2. Różnice w mechanizmach zarządzania kolorem w przeglądarkach. Każda przeglądarka ma własne ustawienia i sposób obsługi kolorów, co może powodować odchylenia barw.

Aby zapewnić wierne odwzorowanie kolorów, musimy zadbać zarówno o właściwe przygotowanie plików graficznych, jak i o zrozumienie specyfiki poszczególnych przeglądarek. Równie ważne jest korzystanie z odpowiedniego monitora i poprawna kalibracja, tak aby środowisko pracy pozwalało nam zobaczyć obrazy takimi, jakie są w rzeczywistości. Poniżej przedstawiamy zasady, których warto przestrzegać, by kolory wyświetlały się prawidłowo w różnych przeglądarkach.

Podstawy zarządzania kolorem

Osadzanie profilu barwnego w obrazach

Podstawową zasadą zarządzania barwą jest zawsze osadzać profil barwny w plikach graficznych publikowanych w sieci. Profil barwny zawiera informacje o przestrzeni kolorów, w jakiej zapisano obraz. Dzięki niemu przeglądarka wie, jak interpretować kolory piksela. Najczęściej zdjęcia w Internecie zapisujemy w standardowej przestrzeni sRGB, która jest domyślnym „językiem kolorów” w sieci (to w sRGB zdefiniowane są kolory w arkuszach CSS na stronach WWW). W środowisku profesjonalnym używa się też szerszych przestrzeni jak Adobe RGB, ale decydując się na nie, koniecznie trzeba osadzić odpowiedni profil w pliku.

Osadzony profil barwny sprawia, że większość przeglądarek prawidłowo odczyta kolory obrazu. Ten sam obraz z dołączonym profilem sRGB ma znacznie większą szansę wyglądać tak samo w różnych środowiskach. Jeśli nie osadzimy profilu, różne przeglądarki mogą domyślać się przestrzeni barwnej obrazu na różne sposoby, przez co kolory mogą wyświetlać się niepoprawnie (np. zbyt intensywne albo za blade). Dlatego zawsze zapisuj pliki JPG/PNG z dołączonym profilem ICC (np. sRGB lub innym właściwym) przed publikacją.

Korzystanie z profilu monitora

Drugim filarem zarządzania kolorem jest profil monitora. Nie należy mylić go z profilem barwnym obrazu – profil monitora to plik informujący system i aplikacje, jak dane urządzenie wyświetla kolory. Każdy monitor (czy ekran laptopa) ma nieco inne właściwości, m.in. gamę barw, charakterystykę tonalną czy punkt bieli. Profil monitora opisuje te cechy, co pozwala systemowi operacyjnemu i wspierającym to aplikacjom kompensować różnice.

Aby uzyskać profil monitora, wykonuje się kalibrację i profilowanie urządzenia za pomocą kolorymetru lub spektrofotometru oraz odpowiedniego oprogramowania. Do monitorów graficznych EIZO ColorEdge dołączone jest oprogramowanie EIZO ColorNavigator, które umożliwia sprzętową kalibrację ekranu i zapisanie profilu ICC monitora. Taki profil jest następnie używany przez system i aplikacje do prawidłowego wyświetlania kolorów.

Jeśli przeglądarka korzysta z profilu monitora, potrafi skorygować wyświetlane kolory tak, by obraz wyglądał poprawnie na danym ekranie. Na przykład ta sama czerwień zostanie nieco inaczej wysłana do monitora o wąskiej gamie sRGB, a inaczej do monitora szerokogamutowego – tak, by odbiorca zobaczył możliwie ten sam odcień czerwieni na każdym z nich. Warunek: przeglądarka musi być świadoma profilu monitora i stosować zarządzanie kolorem. Nie wszystkie to robią, do czego za moment wrócimy.

Spójne środowisko pracy

Warto zadbać, by nasze środowisko pracy było jak najbardziej przewidywalne. Oprócz kalibracji głównego monitora pamiętaj o ustawieniach systemowych: w Windows należy ustawić profil ICC monitora jako domyślny dla danego ekranu (Windows zwykle robi to automatycznie po instalacji sterowników lub po profilowaniu). W macOS system sam zarządza kolorem poprzez ColorSync, przypisując profil do każdego podłączonego wyświetlacza.

Jeśli pracujesz na wielu monitorach jednocześnie, miej na uwadze, że niektóre programy (w tym przeglądarki) mogą poprawnie zarządzać kolorem tylko na głównym monitorze. Dla bezpieczeństwa zawsze finalnie sprawdzaj kolory na tym monitorze, który jest oznaczony jako główny w systemie, zwłaszcza w przypadku przeglądarek takich jak Firefox (o czym dalej). Tę kwestię omówimy szczegółowo przy porównaniu przeglądarek.

Podsumowując: osadzony profil barwny w pliku + aktualny profil ICC monitora + aplikacja wspierająca zarządzanie kolorem to recepta na spójne kolory. Przyjrzyjmy się teraz, jak popularne przeglądarki sobie z tym radzą w praktyce.

Zarządzanie kolorem w popularnych przeglądarkach

Każda przeglądarka internetowa może inaczej podchodzić do kwestii kolorów. Poniżej przedstawiamy, w jaki sposób najpopularniejsze przeglądarki (zarówno na Windows, jak i macOS) obsługują profile barwne i profile monitorów. Informacje te bazują na testach EIZO pierwotnie przeprowadzonych w 2019 r. i zostały uaktualnione o zmiany w nowszych wersjach przeglądarek do roku 2024​.

Legenda:
(1) Czy przeglądarka obsługuje osadzone profile barwne w obrazach?
(2) Jak traktuje obrazy bez osadzonego profilu?
(3) Czy korzysta z profilu monitora (czyli czy koryguje kolory do właściwości ekranu)?
(4) Czy obsługuje profile wszystkich monitorów w konfiguracji wielomonitorowej?

† Przeglądarka Internet Explorer została wycofana w 2022 roku; jej miejsce zajmuje Microsoft Edge oparty na Chromium.

Analiza: Jak widać, już kilka lat temu wszystkie główne przeglądarki poprawnie odczytywały osadzone profile ICC w obrazach (pyt. 1 – Tak). Oznacza to, że jeśli prawidłowo osadzimy np. profil Adobe RGB w zdjęciu, to zarówno Chrome, Firefox, Safari, jak i dawny IE wczytają te informacje. Ważne są jednak pozostałe kwestie, które wpływają na końcowy wygląd obrazu:

• Obrazy bez osadzonego profilu (sytuacja, której chcemy unikać):
  Przeglądarki Chrome/Edge oraz Safari zakładają, że brak profilu oznacza kolor w standardzie sRGB i tak go wyświetlają. To podejście chroni przed dużymi przekłamaniami i zapewnia względną uniwersalność, bo większość niezawodnie widzialnych kolorów w sieci i tak mieści się w sRGB.
  Z kolei Firefox przez wiele lat traktował obraz bez profilu jako zapisany w przestrzeni barwnej monitora, co na monitorach szerokogamutowych skutkowało nadmiernym nasyceniem kolorów. (Na monitorze sRGB efekt nie występował, bo przestrzeń monitora i sRGB są zbliżone.) Na szczęście od wersji Firefox 78 te ustawienia uległy zmianie i przeglądarka zaczęła domyślnie traktować brak profilu jako sRGB. Jeśli jednak ktoś zmienił ręcznie konfigurację lub używa bardzo starej wersji, brak profilu może w Firefoksie powodować błędne kolory.
  Internet Explorer również wyświetlał obrazy bez profilu w przestrzeni monitora, co na szerokim gamucie dawało przesadnie jaskrawe barwy.

• Wykorzystanie profilu monitora (kolor na wyjściu):
  Safari na macOS zawsze używa systemowego ColorSync. Kolory są wówczas automatycznie dostosowywane do profilu bieżącego ekranu, więc obraz jest odwzorowany poprawnie niezależnie od właściwości monitora. Chrome/Edge od pewnego czasu także korzystają z profilu monitora (zarówno w Windows, jak i macOS), dzięki czemu potrafią np. zredukować intensywność koloru na monitorze Adobe RGB tak, by obraz sRGB nie był przejaskrawiony. Firefox obsługuje profil monitora na głównym ekranie i tam koryguje kolory poprawnie. Internet Explorer 11 natomiast miał poważne ograniczenie: traktował każdy monitor jak standard sRGB niezależnie od rzeczywistej gamy. W praktyce na monitorze o szerokim gamucie IE niepoprawnie wyświetlał kolory (bo np. obraz Adobe RGB interpretował dobrze, ale monitor zawsze zakładał jako sRGB, co prowadziło do nadmiernej saturacji kolorów poza sRGB). To jedna z przyczyn, dla których IE na monitorach Adobe RGB nie nadawał się do przeglądania zdjęć.

• Wiele monitorów:
  Gdy korzystamy z więcej niż jednego wyświetlacza, Chrome/Edge i Safari radzą sobie dobrze: na każdym monitorze stosują odpowiedni profil (system Windows udostępnia aplikacjom informacje o profilach przypisanych do poszczególnych ekranów, a macOS ColorSync zarządza tym automatycznie). Firefox niestety wciąż obsługuje tylko profil monitora głównego. Jeśli więc okno Firefoksa przeniesiemy na drugi monitor o innej kalibracji, kolory mogą być niepoprawne, np. za ciepłe, za zimne lub z nieprawidłową gammą. Internet Explorer również nie uwzględniał osobnych profili dla dodatkowych ekranów. Co więcej, jak wspomniano, zakładał, że każdy z nich to sRGB, co dla monitorów o szerszej palecie powodowało błędy.

Wskazówka dla konfiguracji wielomonitorowych

Jeżeli pracujesz na kilku monitorach, pamiętaj, że nie wszystkie aplikacje prawidłowo obsługują profile dla każdego ekranu. W przypadku przeglądarek takich jak Firefox (oraz historycznie IE) zarządzanie kolorem działa poprawnie tylko na głównym monitorze. Niektóre programy graficzne również tak się zachowują. Dlatego zawsze ustalaj jeden, najlepiej najlepszy jakościowo ekran jako główny i na nim dokonuj ostatecznej oceny kolorów. Monitory EIZO ColorEdge podłączone przez USB do komputera mogą dodatkowo informować system o aktywnym trybie pracy i profilu, co ułatwia utrzymanie spójności kolorów w takich środowiskach.

Podsumowanie

Zarządzanie kolorem w przeglądarkach internetowych bywa źródłem zamieszania, ale trzymając się kilku zasad, możemy zminimalizować problemy:

• Zawsze osadzaj profil barwny w obrazach – bez tego przeglądarki mogą nie wiedzieć, jak interpretować kolory, co prowadzi do przekłamań.

• Używaj uniwersalnego profilu sRGB przy publikacji w sieci. Osadzenie profilu sRGB (ICC w wersji 2) zapewnia największą zgodność we wszystkich przeglądarkach i urządzeniach. Ta przestrzeń jest domyślna w Internecie, więc minimalizujesz ryzyko niespodzianek.

• Kalibruj monitor i używaj jego profilu ICC. Dzięki profilowi monitora przeglądarka (jeśli daje taką możliwość) dostosuje kolory do Twojego ekranu. Bez tego możesz niewłaściwie oceniać barwy. Sprzętowa kalibracja za pomocą narzędzi w rodzaju EIZO ColorNavigator 7 zagwarantuje, że Twój monitor wyświetla kolory wiernie.

• Twórz i sprawdzaj grafiki na sprzęcie odwzorowującym kolory z dużą precyzją. Do przygotowania treści WWW najlepiej nadaje się monitor pokrywający 100% przestrzeni sRGB i poprawnie skalibrowany. Przykładem mogą być monitory graficzne EIZO ColorEdge z serii CS, które zapewniają wierność barw i jednolitość wyświetlania. (Zobacz także ofertę monitorów graficznych EIZO ColorEdge, które idealnie sprawdzają się do pracy z kolorem.)

Pamiętając o powyższych zasadach, zwiększysz szansę, że Twoje zdjęcia i grafiki będą wyglądać tak samo dobrze we wszystkich przeglądarkach i na różnych urządzeniach. W kolejnej części serii skupimy się na profilach ICC – wyjaśnimy, czym są wersje profili i jak wpływają na zgodność kolorów w Internecie.