motiv

Nepodceňujte barevné profily při publikování na webu

22.7.2016 - Michal Krause - Z praxe
Představte si, že upravíte fotografie třeba ve Photoshopu ke své plné spokojenosti, nahrajete je do webové galerie a barvy jsou náhle podstatně sytější. Dle rad zkušenějších přitom pracujete v sRGB, abyste se neztratili v temných zákoutích správy barev. Co se tedy mohlo pokazit?

Nejčastěji řešívám dotazy na situaci, kdy se jedna fotografie zobrazuje odlišně na dvou různých zařízeních, případně ve dvou různých aplikacích. V prvním případě bývají na vině odlišné zobrazovací schopnosti displejů, ve druhém pak chybějící podpora správy barev v jedné z aplikací kombinovaná obvykle s využitím profilů jako je Adobe RGB nebo Pro Photo RGB.

Tentokrát se na mě ale obrátil kamarád s odlišným problémem: fotografie byla upravená v Lightroom a Photoshopu Elements a v obou vypadala totožně. Po nahrání do webových služeb SmugMug a 500px se ale zobrazovala výrazně sytější. Aby to nebylo tak jednoduché, jiné rozměry téže fotografie, které vygeneruje SmugMug pro zařízení s menším displejem, byly v pořádku, a mně se navíc zobrazovaly i „špatné“ fotografie správně – vskutku komplikovaná zápletka, která si žádala důkladnější průzkum.

Kamarádovi se problém projevoval v Google Chrome, takže jsme začali s ním. Srovnáním originálu a zmenšené fotografie ze SmugMugu (která se zobrazovala dobře) se ukázalo, že hlavním rozdílem je absence barevného profilu v originálu. Na simulovaném příkladu je vidět rozdílná sytost barev verze bez profilu a s ním. Podotýkám, že obě fotografie jsou ve skutečnosti v sRGB, ale jen jedna z nich má profil vložen v JPEG souboru:

originál špatné barvy

SmugMug do zmenšené verze sám přidal profil sRGB a protože fotografie samotná byla z Lightroom exportována a ve Photoshopu upravena právě v sRGB, vznikla tak trochu nahodile správná kombinace barevných dat a profilu. Když jsem posléze ručně profil přidal i do originální fotografie, zobrazení v Chrome bylo najednou v pořádku.

Co se tedy vlastně s původní fotografií stalo, že byla zobrazena špatně? Google Chrome obsahuje správu barev, která pracuje bez problémů s fotografiemi s přiřazeným barevným profilem (tagged). Co by měl ale provést s barvami, pokud v souboru barevný profil nenajde? Možná byste předpokládali (stejně jako já), že v takovém případě bude explicitně počítat se sRGB, o kterém se lze snad právem domnívat, že je nejrozšířenějším prostorem fotografií na webu. Ve skutečnosti se ale na takovou fotografii správa barev vůbec neuplatní, takže se zobrazí přímo její „surová“ data. Tuto situaci jde mimochodem nasimulovat v grafickém editoru, pokud sRGB fotografii přiřadíme (nikoliv zkonvertujeme do) profil monitoru.

Rozdíly v zobrazení pak vznikají na monitorech, jejichž barevný prostor se více odchyluje od sRGB – pokud mu monitor odpovídá nebo se tak alespoň tváří, je fotografie tímto způsobem zobrazena víceméně správně (alespoň v rámci schopností daného displeje). Je-li ale gamut monitoru odlišný, fotografie, jejíž surová data jsou v sRGB, se bez správy barev zobrazí jinak. Problém se může projevit i na relativně obyčejném monitoru, používá-li vlastní profil od výrobce nebo vytvořený kalibrační sondou – u mě je například rozdíl patrný i na dosti starém MacBooku Pro s profilem dodávaným Applem – a paradoxně se prohlubuje na velmi kvalitních displejích se širokým gamutem (Adobe RGB, P3), které se postupně s klesající cenou dostávají k širšímu spektru uživatelů. V takovém případě se fotografie bez profilu zobrazí poměrně výrazně sytější – možná znáte situaci, kdy se fotografie v Adobe RGB považovaná za sRGB zobrazí vybledlá, a tohle je vlastně přesně opačný případ.

Řešení problému

Jak jsem už nastínil, řešení problému je poměrně jednoduché – v publikovaných souborech ponechávejte vždy vložený barevný profil, aby se mohla v aplikacích, které ji podporují, naplno uplatnit správa barev.

Čím se ale stane, že profil ve výsledném souboru není? Nejčastěji jsou na vině nástroje, které optimalizují velikost souboru s fotografií pro publikování na webu. Možnost (ne)vložit profil do výsledného souboru nabízí mimo jiné i Adobe Photoshop či jeho menší bráška Photoshop Elements:

Dialog Save for Web ve Photoshopu CC
Dialog Save for Web ve Photoshopu CC – volbu Embed Color Profile ponechte zaškrtnutou
Dialog Save for Web ve Photoshopu Elements
Dialog Save for Web ve Photoshopu Elements – volbu Embed Color Profile ponechte zaškrtnutou (obrázek pochází z tohoto tutoriálu)

Pokud už je fotografie uložena bez profilu, můžete jej později přidat. Technicky vzato lze použít některý fotografický editor a v něm funkci Assign Profile (Přiřadit profil). Pozor, neplést s Convert to Profile – rozdíl mezi těmito funkcemi spočívá v tom, že Assign Profile ponechá původní data beze změny a jen připojí zvolený profil do metadat, zatímco Convert To Profile převede i barevné informace do cílového profilu, což v tomto případě není žádoucí operace. Nevýhodou použití klasických grafických editorů je, že se fotografie musí otevřít a znovu uložit, což může v případě JPEGu vést k degradaci obrazu.

Bezztrátově lze do existujícího souboru vložit profil například pomocí aplikací ExifTool či případně Image Magick. Jedná se o nástroje pro příkazovou řádku, takže je to cesta spíše pro mírně pokročilé uživatele – výhodou ale je, že tak můžete napravit najednou větší množství fotografií.

  • ExifTool na Windows:

    exiftool.exe "-icc_profile<=c:WindowsSystem32spooldriverscolorsRGB Color Space Profile.icm" foto-bez-profilu.jpg

  • ExifTool na Macu:

    exiftool "-icc_profile<=/System/Library/ColorSync/Profiles/sRGB Profile.icc" foto-bez-profilu.jpg

  • ImageMagick na Windows:

    convert -profile "c:WindowsSystem32spooldriverscolorsRGB Color Space Profile.icm" foto-bez-profilu.jpg

  • ImageMagick na Macu:

    convert -profile "/System/Library/ColorSync/Profiles/sRGB Profile.icc" foto-bez-profilu.jpg

Cesty k barevným profilům sRGB v uvedených příkladech odpovídají jejich skutečnému umístění při obvyklé instalaci obou operačních systémů. Ve stejných složkách najdete i profil Adobe RGB.

Pozor: při přiřazení musíte použít profil, v němž jsou reálně uložená data – pokud by se k sRGB datům přiřadil například profil Adobe RGB nebo naopak, výsledkem bude barevný posun.

Jestliže si na ruční práci s profily netroufáte, je nejjistější exportovat zpracované fotografie znovu a tentokrát už s profilem. Chcete-li soubory fotografií optimalizovat na menší velikost, zvolte k tomu nástroj, který umí ICC profil zachovat.

Pracujete-li pouze s Adobe Lightroom nebo třeba Capture One, profily se do exportovaných fotografií vkládají vždy.

Jak jsou na tom ostatní prohlížeče?

Jak jsem na začátku zmínil, na problém jsme prvotně narazili v Google Chrome. Co ale ostatní prohlížeče?

Firefox správu barev uplatňuje jen pokud je vložen profil, takže se chová stejně, jako Chrome – fotografie bez profilu se na monitorech s širším gamutem zobrazí jinak než tentýž snímek s vloženým sRGB profilem. Color management je ve Firefoxu konfigurovatelný a chcete-li, můžete jej přenastavit tak, aby fotografie bez profilu považoval za sRGB. Nicméně osobně to nedoporučuji, protože tím se odlišíte od toho, jaké nastavení mají typicky návštěvníci vašeho webu, což může problém skrýt.

Nastavení Firefoxu do režimu, kdy se fotografie bez profilu považuje za sRGB

Volby jsou dostupné pouze přes rozšířenou konfiguraci, do níž se dostanete zadáním adresy about:config do URL řádku. Do vyhledávacího políčka zadejte text color_management a změňte parametr gfx.color_management.mode na hodnotu 1:

Konfigurace správy barev ve Firefoxu
Konfigurace správy barev ve Firefoxu

Zvláštní je, že popsané chování platí jen na Windows – na Macu se mi z nějakého důvodu ve Firefoxu zobrazují fotografie s profilem i bez něj stejně, a to v sytějším podání odpovídající chybnému zobrazení v Chrome. Pravděpodobně se jedná o chybu, kterou se mi nepodařilo napravit žádnou úpravou konfigurace.

Internet Explorer a Edge v posledních verzích na Windows 10 zobrazují obě fotografie chybně v saturovaných barvách – podle dostupných informací se zdá, že správa barev v těchto prohlížečích sjednocuje fotografie s profilem i bez profilu na sRGB, ale už dále neuplatní profil monitoru.

Safari v OS X zobrazuje fotografie s profilem i bez něj správně – u souborů bez ICC profilu se tedy uvažuje sRGB (testováno na aktuální verzi 9.1.2). V zásadě je to užitečný přístup, který podle mého názoru nemůže napáchat zásadní chyby, ovšem má tu nevýhodu, že skrývá problém, který způsobují fotografie bez profilu v jiných prohlížečích.

Mobilní prohlížeče se opravdu těžko testují, ale zdá se, že Safari podporuje od iOS verze 9.3 plnohodnotnou správu barev, zatímco ve starších verzích naopak zcela chyběla. A jelikož pravidla App Store vyžadují, aby alternativní prohlížeče (např. Google Chrome) pracovaly s jádrem Safari, získaly tak automaticky podporu správy barev rovněž. Na Androidu podle všeho správa barev není ani v posledních verzích.

Závěr

S nástupem monitorů pracujících s širším gamutem, než je sRGB, a v kombinaci s podporou správy barev v současných prohlížečích rozhodně nedoporučuji publikovat fotografie bez vloženého profilu. V současné době se takové fotografie mohou potenciálně zobrazit zkresleně v Google Chrome (a odvozených prohlížečích) i Firefoxu (pokud jej uživatel nepřenastaví), které využívá dohromady až 65 procent uživatelů. Pochopitelně zdaleka ne všichni mají monitor s širokým gamutem, na nichž se chybné zobrazení projevuje nejvýrazněji, jejich počet ale roste a mimo jiné je můžete předpokládat právě u fotografů, kterým možná častěji ukazujete vaše fotky.

Poznámka: ukázka zobrazení fotografie s profilem a bez něj na začátku tohoto článku byla vytvořena s pomocí screenshotů z Google Chrome, aby byl rozdíl viditelný na všech monitorech a ve všech prohlížečích. Pokud si chcete ověřit, jak je na tom skutečné zobrazení na vašem monitoru a ve vašem prohlížeči, zkuste tuto živou ukázku:

s profilem bez profilu

Pokud jsou obě fotografie v Google Chrome nebo ve Firefoxu (na Windows a při výchozím nastavení správy barev!) stejné, váš monitor pracuje s gamutem blízkým sRGB (pro jistotu upozorňuji, že to nemusí nutně znamenat, že jej zobrazuje správně – to se tento test nesnaží dokázat). Jestliže ale používáte profil monitoru od výrobce nebo vytvořený kalibrační sondou (zvláště pak na displejích s širším gamutem), rozdíl by měl být viditelný. V Safari, Internet Exploreru a Edge by měly být obě fotografie stejné za všech okolností.

Michal Krause
https://www.michalkrause.com/
Další články autora

1   2   3   4   5   
1 - výborný ... 3 - průměrný ... 5 - špatný
Diskuse k článku
Darksome11.1.2017, 13:36odpověď
Michal Krause13.1.2017, 16:52odpověď
Darksome13.1.2017, 20:33odpověď
Michal Krause14.1.2017, 13:27odpověď
Darksome16.1.2017, 14:07odpověď
Darksome16.1.2017, 16:24odpověď
Michal Krause17.1.2017, 09:12odpověď
Darksome17.1.2017, 19:29odpověď
Michal Krause17.1.2017, 19:34odpověď
Michal Krause17.1.2017, 08:49odpověď

přidat příspěvekpříspěvky e-mailemzobrazit vše stromovězobrazit vše podle data

Možná by vás mohlo zajímat


aktuální akce


 

 

Tento web používá k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte. Další informace