Van foto's, browsers en kleuren

Jaja, het aloude probleem van beelden op je blog plaatsen en merken dat de kleur van je beeld plots helemaal anders lijkt (meestal veel gedesatureerder) dan in Lightroom of Photoshop.  Joeri had er een weekje terug blijkbaar ook een beetje last van.  Ik heb toen een poging gedaan om uit te leggen in de comments wat precies de reden was, maar vermits ik in het verleden dezelfde vraag al meermaals heb mogen beantwoorden pen ik het hier ook even neer.

Au fond is het niet zo’n heel complex probleem.  Het heeft alles te maken met kleurprofielen (hoor ik daar gezucht achteraan in de zaal?) en hoe bepaalde webbrowsers er rekening mee houden en anderen helemaal niet.  Op zijn eenvoudigst gezegd bepalen kleurprofielen hoe de kleuren in de foto moeten weergegeven worden.  I know, het is ietsje complexer dan dat, maar het is voldoende als basis voor mijn uitleg.

Laten we gewoon een voorbeeld nemen.  Ik heb foto’s getrokken en ik heb die ingeladen in Lightroom.  De beelden worden bewerkt en op een bepaald moment ben ik blij met het eindresultaat (bijvoorbeeld de onderstaande close up van een wijnglas gevuld met Pisang Ambon en plastiek ijsblokjes):

Lightroom CM original

Nu wil ik dat beeld gaan gebruiken in een blogpost en moet ik het dus gaan exporteren als JPG vanuit Lightroom.  Dus ik kies File/Export en krijg een dialoogvenster met een aantal opties, waaronder de mogelijkheid om te kiezen welk kleurprofiel ik in het JPG beeld wil steken:

Lightroom export dialog

Het probleem is nu dat niet alle webbrowsers die kleurprofielinformatie in de JPG gaan lezen.  Internet Explorer bijvoorbeeld gaat steeds van de veronderstelling uit dat alle JPG beelden opgeslaan werden met het sRGB profiel (dus ook als dit niet het geval is).  Safari op Mac maakt die veronderstelling niet en houdt steeds rekening met het profiel waarmee de foto geëxporteerd werd.  Firefox is dan weer een speciaal geval.  Standaard werkt het op dezelfde manier als Internet Explorer (kleurprofielen in JPG bestanden worden niet gelezen en er wordt verondersteld dat het steeds over sRGB gaat), maar je kan dit gedrag aanpassen via een configuratieoptie.  Verder meer daarover.

Nemen we nu een standaard Firefox en gaan we daarin een versie van de Pisang foto met AdobeRGB kleurprofiel gaan tonen dan krijgen we dit:

Firefox - AdobeRGB - CM disabled

Open om het verschil goed te zien eens de Lightroom screenshot en het beeld hierboven in een aparte tab en wissel eens tussen beide.  Je zal merken dat de kleuren in de tweede foto anders zijn.  Dit komt omdat de foto opgeslaan werd met een AdobeRGB kleurprofiel, maar Firefox leest dit niet en maakt de veronderstelling dat het over een sRGB profiel gaat.  Gevolg: het beeld ziet er niet correct uit.

Ok, tweede poging.  Laten we gewoon het beeld exporteren vanuit Lightroom en aangeven dat we ditmaal een sRGB profiel willen in plaats van AdobeRGB:

Firefox - sRGB - CM disabled

Not too shabby.  ‘t Is al beter maar mensen met goeie kijkers zullen merken dat er alsnog een klein verschil in kleur is tussen dit beeld en het origineel.  De reden?  Firefox leest nog steeds niet het kleurprofiel uit de JPG.  De browser veronderstelt een sRGB profiel en gaat dit profiel vanuit het systeem opladen en gebruiken.  Tussen het sRGB profiel dat in de foto zit en het profiel dat meegeleverd wordt met het operating system (wat default door Firefox en Internet Explorer gebruikt wordt) kan er een lichte afwijking zitten.  Niet echt veel, maar soms merkbaar.

Maar zoals ik al zei kun je in Firefox (vanaf versie 3) een setting aanpassen waarna de browser rekening gaat houden met de kleurprofielinformatie die in JPG bestanden zit (en ze dus altijd correct gaat tonen).  Typ in de adresbalk ‘about:config’ (zonder quotes), lees de waarschuwing en klik op de knop om door te gaan.  Geef vervolgens in het filterveld ‘management’ in (terug zonder quotes) en zoek de regel gfx.color_management.enabled.  Dubbelklik om de waarde te veranderen naar true.  Herstart Firefox en klaar is kees.

Firefox CM config

Als we nu de JPG foto met AdobeRGB kleurprofiel in de webbrowser gaan bekijken dan zien we dat het beeld ditmaal wel correct weergegeven wordt:

Firefox - AdobeRGB - CM enabled

De JPG foto met sRGB kleurprofiel ook (en ditmaal zo goed als identiek aan het origineel en de AdobeRGB versie hierboven):

Firefox - sRGB - CM enabled

Zoals je kan zien zijn ze nu allebei gelijk aan elkaar en aan de originele Lightroom screenshot.  Jeuj!  Probleem opgelost dus!  Wel ja en neen.  Dit werkt wel voor Firefox, maar Internet Explorer gaat hiermee niet opeens kleurprofieldata uit JPG bestanden gaan lezen.  Vandaar de gouden regel wanneer je JPG bestanden gaat gebruiken op het net: exporteer ze steeds met een sRGB profiel.   Als de browser het profiel uit de foto leest: super.  Indien niet, wordt er toch sRGB verondersteld, wat dus ook correct is.

Mocht je het zelf eens willen testen, hier zijn alvast beide versies van de foto: met AdobeRGB profiel en met sRGB profiel.  Gewoon downloaden en vervolgens openen in een webbrowser naar keuze.

Lightroom kleurprofielen

Toen Lightroom 2 gelanceerd werd heb ik het al gehad over de nieuwe DNG Camera Matching Profiles.  Hoewel ik ze sinds dan gebruik heb ik nooit echt een vergelijking gemaakt tussen de Nikon Picture Controls die je in zowat elke Nikon DSLR kan instellen en de equivalende DNG Camera Matching Profiles die je (na installatie ervan) in Lightroom en Camera Raw 4.5 kan gebruiken.  Onderstaande foto toont wat het gevolg is (klikkerdeklik voor een groter beeld).

Links de foto zoals die als JPG uit de camera komt met de Vivid Picture Control.  In het midden het RAW bestand zoals Lightroom het met het standaard ACR 4.4 profiel weergeeft (wat gebruikt wordt indien je de DNG Camera Matching Profiles niet geinstalleerd hebt) en rechts hetzelfde RAW bestand maar ditmaal na toepassen van het Vivid profiel.  Los van het feit dat Vivid niet echt de beste keuze was voor deze foto, is het denk ik wel duidelijk dat de Camera Matching Profiles de JPG’s die in de camera aangemaakt worden veel beter benaderen.

Bovenstaande informatie is natuurlijk ook geldig voor Canon camera’s.  Ik gebruik nu eenmaal een Nikon en kan dus niet testen voor Canon, maar na installatie zijn gelijkaardige profielen ook voor alle Canon digitale spiegelreflex camera’s beschikbaar.  Zij noemen die profielen trouwens Picture Styles in hun camera’s.  Bedankt trouwens aan Erik de Marsman (lang verhaal) om model te spelen.

Kleurprofiel troubles

Ik weet het, ik weet het, het zijn complexe toestanden kleurprofielen en het opzetten van een degelijke workflow met kleurbeheer van begin tot einde is niet van de poes.  Wanneer het echter tussendoor ook nog eens begint te flippen word ik al helemaal nerveus.  Even de situatie schetsen.

Ik gebruik OS X (Leopard 10.5.3 om precies te zijn) en calibreer mijn monitor (gamma 2.2, witpunt 6500K) met een Spyder3Elite.  Over de colorimeter geen slecht woord, dat ding doet dat goed.  OS X daarentegen begint serieus mijn botten uit te hangen.  Af en toe als ik uit screensaver mode ga is het alsof OS X vergeten is welk kleurprofiel het ook alweer moest gebruiken.  Dan moet ik even naar Preferences / Display gaan en dan heeft OS X het opeens weer door.  Op zich niet zo’n complex probleem, maar het is niet normaal en dat stoort enorm.

Ook Safari en Preview durven nu en dan vergeten welk kleurprofiel ze moeten gebruiken.  Dan lijkt de OS X desktop qua kleur en contrast OK, maar foto’s zien er dan in beide applicaties gewoon – pardon my French – kut uit (terwijl het terzelfdertijd in Lightroom en Photoshop dan weer wel correct is).  Enkel een reboot kan dan de boel rechttrekken.  Firefox 3 laat ik trouwens even buiten beschouwing in dit verhaal vermits het nog in beta is, maar eerlijk, daar is er ook nog wel wat werk aan.

Dus, mocht er iemand een ideetje hebben wat de oorzaak zou kunnen zijn van dit probleem, laat het gerust weten.  Ondertussen doe ik gewoon verder met klikken op display preferences en af en toe de boel eens volledig te herstarten.