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.

8 comments ↓

#1 Serge Van Cauwenbergh on 01.10.09 at 16:23

Ik veronderstel dat je de Pisang Ambon nadien hebt opgedronken? :-)

Nog iets dat volgens mij meespeelt, is de kwaliteit van de monitor. Niet iedereen zal de foto op zijn/haar monitor op een identieke manier zien dan de maker van het beeld bedoeld heeft. Ik merk dat mijn foto’s op een crappy monitor er ook crappy uitzien, het is misschien sterk overdreven, maar je begrijpt allicht wat ik bedoel.

#2 Thomas on 01.10.09 at 23:05

‘t Is eigenlijk een foto die ik ergens eind vorig jaar getrokken heb. Wat je ziet is pure Pisang en alhoewel ik graag wel eens iets drink heb ik dat glas netjes aan mij voorbij laten gaan ;)

Maar je hebt gelijk hoor Serge. Het is maar een heel klein deel van het volledige kleurprofielverhaal wat ik hier vertel. Een degelijke en gecalibreerde monitor is natuurlijk ook uitermate belangrijk. Eén dezer zal ik wel nog eens iets meer schrijven daarover.

#3 jurgen on 01.11.09 at 21:16

Knappe log Thomas.
Wat de monitorproblemen betreft, dat is iets wat je helemaal niet in de hand hebt. Het enig de dat je kan doen is ze zo goed mogelijk online zetten en dan maar hopen dat je klanten het op een degelijke monitor bekijken. Maar als dat niet zo is, bedenk dan dat die persoon ALLE beelden op dat scherm op die manier bekijkt en die ogen gewoon worden aan de “kwaliteit”, waardoor het niet zo zeer zal opvallen.

#4 Joeri on 01.12.09 at 16:54

Handig dat mensen mijn probleem even samenvatten. Zou je dit ook voor persoonlijke alsook werkproblemen kunnen doen Thomas? :-) Bedankt voor je tips…Het beloofde boek stuur ik je volgende week door…

#5 ysabje on 01.13.09 at 00:54

de pisang foto is mooi. maar ik verschiet er wel van: dat da nog bestaat! dat er nog mensen zijn die dat drinken! Ik heb het alleen maar gedronken in mijn puberteit en die is al lang geleden.

#6 Cedric on 01.18.09 at 15:30

Internet Explorer 8 (nu in beta) heeft ondersteuning voor AdobeRGB en sRGB ICC profielen (jpeg & png). ;-)

Dus binnen afzienbare tijd is ook dit (gedeeltelijk) van de baan.

#7 Thomas on 01.18.09 at 18:47

Cedric: dat is goed nieuws!

#8 Fototineke on 02.07.09 at 16:26

Ik was net naar deze informatie op zoek en ben dus blij die in mijn Google Reader aan te treffen. Ik surf met Firefox en heb de aanpassing meteen doorgevoerd.

Leave a Comment