Korrekta och förutsägbara färger på webben
Att arbeta med bilder och färger digitalt kan ställa till det om man inte är noggrann med vad man gör. Speciellt vid webbdesign kan utseendet på en färg skilja sig åt beroende på om den visas i en bild eller som bakgrundsfärg. Här går vi igenom hur allt hänger ihop.
Att få förutsägbarhet i färgåtergivningen genom en hel produktionskedja kallas för färgstyrning och är välkänd bland formgivare som jobbar med trycksaker. Där har problemet alltid funnits, och det får också större genomslag när man arbetar digitalt med additiva färger (RGB) som sedan konverteras till subtraktiva (CMYK) för att kunna tryckas.
På nätet är problemet inte lika märkbart, men det finns där trots det.
Färgrymder och färgomfång
I datorer återges färg utifrån en tänkt arbetsfärgrymd där ett värde representerar en färg i en CIE LAB-färgrymd. Det värdet konverteras sedan för att visas på en skärm genom att skärmens återgivningsegenskaper jämförs med arbetsfärgrymden. Den färg i CIE LAB-färgrymden man vill återge renderas då till skärmens färgrymd med justeringar för renderingsmetod och den arbetsfärgrymd som färgen ursprungligen är angiven i.
Lät det rörigt? Det är faktiskt ganska enkelt. Om man tittar på hur ett tänkt scenario kan se ut så blir det lite lättare. Illustrationen nedan beskriver referensfärgrymnden CIE Lab som motsvarar de färger ögat klarar av att uppfatta. Inuti den finns arbetsfärgrymden – alltså bildens färgrymd – tillsammans med den färgrymd skärmen klarar av att återge.
Här syns tydligt att de färger ögat klarar av att uppfatta, och de färger skärmen klarar av att återge inte är desamma. Skärmen har begränsningar, och beroende på skärm så varierar begränsningarna. En billig skärm är till exempel oftast sämre än en dyr på att återge ljusa nyanser. De har en tendens att frätas ut och upplevas som vita. Man har också olika hög kontrast mellan det mörkaste och ljusaste, olika bra betraktningsvinkel och ljusstyrka.
Det här brukar man benämna färgomfång, tryckbarhetsomfång eller gamut (på engelska), och är ett sätt att beskriva varje primärfärgs placering i LAB-färgrymden.
Varje enhet som kan hantera färger har sitt eget – unika – färgomfång, och för att kunna få en förutsägbarhet mellan alla enheter så måste man göra en karakterisering för att kunna veta varje unikt färgomfång. Man mäter då färgåtergivningen för varje primärfärg och placerar in dem i LAB för att ha som referens. Man kan också gå ett steg längre och göra en kalibrering av enheterna. Då säger man åt dem att de ska bete sig på ett annat sätt än fabriksinställningen. En skärm kanske ska arbeta i en annan färgtemperatur, en skrivare kanske ska anpassas mot en viss pappersfärg. Det finns massor av sätt som man kan vilja justera färgåtergivningen på.
När det gäller återgivning på skärmar är det, förutom omfånget på färgrymden, gammavärdet (γ) som spelar in i hur vi uppfattar färgernas återgivning. Gamma påverkar fördelningen mellan ljusa och mörka nyanser i en bild. Om gamma är 1,0 fördelas ljusa och mörka nyanser linjärt matematiskt, medan ett annat värde gör att bildens ljushet justeras när den visas.
Som jämförelse kan vi nämna att negativ film har γ 0,7 och diapositiv har γ 1,7 ungefär. Traditionellt har Mac OS arbetat med γ 1,8 medan Windows arbetat med γ 2,2. TV-formatet NTSC använder också γ 2,2. I och med Mac OS X 10.6 är standardinställningen även där γ 2,2.
Foto: Macbloggen
Bildformatens egenskaper
Bildformaten har så klart olika egenskaper både när det gäller hur själva bilddata lagras och vilken typ av metadata som formatet klarar av att hantera. När det gäller färger finns det två saker som används för att beskriva hur bildens färger ska återges.
- Färgrymden bilden använder.
- Gammavärdet bilden använder.
Här kan det bli lite klurigt eftersom Photoshop inte hanterar allt som formatet hanterar. Men för de tre pixelbaserade formaten som används på webben ser det ut så här:
- JPEG/JFIF kan lagra inbäddade färgprofiler.
- GIF klarar inget.
- PNG kan lagra inbäddade färgprofiler och gammavärde på bilden (
gAma-tagg).
Webbläsarnas egenskaper
De fyra största webbläsarna har lite olika sätt att hantera färger på. På samma sätt som de beter sig lite olika när det gäller annan rendering av layout. Men det går att hitta ett arbetssätt som gör att man får godtagbart resultat i allihop. Vad de olika egenskaperna innebär kommer lite längre fram i artikeln.
- Internet Explorer förutsätter alltid sRGB i både bild, arbetsfärgrymd och skärm, men läser
gAma-taggen i PNG (γ-värdet). - Firefox förutsätter också alltid sRGB i både bild, arbetsfärgrymd och skärm, och läser även den
gAma-taggen i PNG. - Chrome använder skärmens färgrymd som arbetsfärgrymd, läser och respekterar inbäddade färgprofiler i bilder, läser
gAma-taggen men förutsätter att skärmen alltid använder gamma 2,2 oavsett vad skärmprofilen säger. - Safari använder skärmens färgrymd även som arbetsfärgrymd, läser och respekterar inbäddade färgprofiler och även
gAma-taggen i PNG.
Bildhanteringsprogrammens egenskaper
Grundregeln för att få förutsägbara färger från Photoshop är att veta vad man gör, hur färghantering och färgstyrning fungerar plus att förstå hur Photoshop hanterar färger. Det senare är inte helt konsekvent i programmet, och det är lätt att missa något steg i arbetsflödet. Framförallt för att Photoshop inte följer bildformatens kapacitet helt fullt ut. Speciellt PNG är det format som behandlas ganska styvmoderligt.
Dessutom har beteendet ändrats vid uppdateringar av programmet. Till och med CS3 sparade Photoshop γ-värdet i gAma-taggen om man valde Spara och Spara som, men inte om man valde Spara för webben. Dessutom enbart om bilden hade en inbäddad profil, inte annars.
Av någon anledning kan heller inte Photoshop bädda in ICC-profiler i PNG, oavsett hur man sparar bilden. Men däremot kan den läsa inbäddade profiler i samma bildformat. Inte speciellt konsekvent, och därför något som man måste veta och vara medveten om.
Det inbyggda bildbehandlingsprogrammet Förhandsvisning kan både läsa och bädda in profiler, men kan inte konvertera mellan profiler. Till det behöver man Colorsync-verktyg som finns i Verktygsmappen på macen. Detsamma gäller Pixelmator och Graphic converter.
Hur man ska göra då?
Frågan som man önskar hade ett enkelt svar, men som tyvärr inte har det. Det går inte att ha en enda inställning som alltid funkar för alla under alla omständigheter. Det finns nämligen minst två scenarior som skiljer sig åt:
- Bilden ska matcha färger som genereras av webbläsaren från CSS.
- Färgerna ska återges så likt originalet som möjligt.
Den första punkten gäller förmodligen i första hand illustrationer och logotyper med någon typ av genomskinlighet som ska läggas ovanpå en bakgrundsfärg som finns beskriven i CSS:en för sidan. I det läget är det bäst att göra följande:
1. Börja med att ha färginställningarna i programmet rätt konfigurerade. Det här är den bästa inställningen för den här typen av bildbehandling:
2. Se till att bilden använder sRGB som färgrymd genom att tilldela den profilen.
3. Spara för webben och se till att inte infoga ICC-profilen vid exporten. För PNG går det inte ens i Photoshop, men för jpeg finns det valet tillgängligt.
Få färgerna så likt originalet som möjligt
I fallet där man istället vill ha färgerna så likt originalet som möjligt måste man göra lite annorlunda. Punkterna 1 och 2 är desamma som ovan, men för att få en färgstyrning av bilden måste man se till att en ICC-profil finns inbäddad när man sparar bilden.
För jpeg så går det att göra från Photoshop genom att man väljer jpeg och kryssar i att profiler ska bäddas in.
Om man istället har en PNG som man vill bädda in ICC-profilen i så måste man öppna den i Förhandsvisning och tilldela en profil och sedan spara.
Observera att man kan se och vilken profil som finns inbäddad i bilden genom att ta fram informationsfönstret i Förhandsvisning.
Om man har en annan profil än sRGB inbäddad i bilden så måste man göra en konvertering av färgerna till den nya profilen. Detta är något som inte Förhandsvisning klarar av. Istället måste man använda Colorsync-verktyg som ligger i verktygsmappen. Öppna bilden där och välj att ”Matcha med profil” och den profil man vill konvertera till. Det går också att välja konverteringsmetod, vilket gör programmet till helt kompetent för hantering av färgstyrning i bilder. Naturligtvis klarar även Photoshop detta.
Slutligen är det viktigt att tänka på att all färg i webbläsaren är relativ till det som visas i just den webbläsaren. Oavsett hur man färghanterar så är det omöjligt att få en överensstämmelse mellan webbläsarna.
Men å andra sidan är det enbart webbdesigners som sitter och jämför samma sida i olika webbläsare samtidigt. Räkna ändå med att vi kommer att ta upp det här ämnet fler gånger här på Macbloggen. Det är en av de vanligaste frågorna som ställs av formgivare som jobbar med webb.