Wångstedt nova

• Trycksaksproduktion
  • Färgtemperatur
  • Typografihjälp
• Webbdesign
  • Färgstyrning i webbläsare
  • Koda unicode i XHTML
  • Färgstyrning på webben igen
  • ICC-profil i PNG
• Mac och Mac OS X
  • Radera användare
  • Nollställ användare i OSX
  • Svenska vid OD-inloggning
  • Koppla filer del 2
  • Koppla filer till program
  • Autoinloggning över appletalk
• Formgivning
  • Typsnitt i Indesign
  • Divis, minus och bindestreck

Färgstyrning på webben igen

Färghantering överlag är ett lite knepigt kapitel att förstå och klara av att hantera. Speciellt när färghanteringen har expanderat till att inte bara inkludera trycksaksproduktion, utan även digitala media som webben, bildspel, multimedia och i viss mån film och video.

Det färghanteringen syftar till är att få en förutsägbarhet och kontroll över hur färgerna ser ut och visas, och att kunna få en färgriktighet och -överensstämmelse mellan olika utenheter (skrivare, skärmar, tryckpressar och så vidare).

Färger är nämligen så mycket mer än hexvärden för rött, grönt och blått. Färger är upplevelser, suggestioner och väldigt subjektivt samtidigt som vi förutsätter att de ska vara helt statiska. Vem har inte råkat in i en diskussion någon gång om en färg är grön eller gul (lime, gröngul, gulgrön, snorfärgad eller något annat försök till beskrivning). Oftast slutar ett sånt argumenterande med att den ena parten helt enkelt ger upp. Man kommer inte överens, helt enkelt.

Var är sanningen?

Precis samma sak uppstår när färg ska beskrivas av olika digitala manicker. Skillnaden här är att det finns en sorts ”sanning” i form av de digitala färgvärdena för de additiva primärfärgerna rött, grönt och blått. Men, så klart, är det inte hela sanningen.

Utan att gå djupare in på de olika typer av färgrymder som finns, så kan man i alla fall nämna de tre vanligaste; additiv (RGB) som används av skärmar, subtraktiv (CMYK) som används vid tryck och utskrift, och enhetoberoende (LAB) som är en referensfärgrymd som används vid konvertering mellan andra färgrymder.

Olika skärmar är olika

Beroende på vilken skärm man använder så har de olika möjlighet att återge olika färger. En billig LCD-skärm är till exempel sämre än en dyr CRT-skärm 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, och så vidare.

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.

LAB-färgrymd med RGB och CMYK

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å.

Hur man vill ha det

För att kunna justera färger så att de visas på så lika sätt som möjligt mellan enheter så finns det några saker man vill ska hända med färgerna.

• Om bildens färgrymd är densamma som utenhetens ska ingen justering förekomma
• Om bildens färgrymd inte överensstämmer med arbetsfärgrymden ska bildens färgrymd användas
• Om bilden inte har någon färgrymd angiven ska arbetsfärgrymden användas som bildens färgrymd
• Alla bilder ska justeras mot utenheten utifrån sin egen färgrymd

Vet man inte om det här, eller jobbar på något annat sätt så kommer man förmodligen inte att ha kontroll över färgernas utseende, och man får vara beredd på överraskningar.

Men webben då?

Det finns tre bildformat som är vanligt förekommande på webben; Jpeg/JFIF, Gif och PNG. De här bildformaten har olika egenskaper som jag tänker förklara lite kortfattat.

Jpeg är en förstörande komprimeringsalgoritm för pixelbilder som oftast är lagrat i en behållare som heter JFIF. Alla pixeluppbyggda bilder kan komprimeras med Jpeg, och komprimeringen kan finnas i andra behållare som EPS eller Tiff också. Den behållaren som är vanligast på webben är JFIF, och den kan bland annat lagra färgprofiler tillsammans med 24-bitars bilddata.

Gif är en ickeförstörande komprimering men som endast kan beskriva 255 färgtoner. Det här brukar man kalla indexerad färg eftersom färgtonerna kan väljas fritt utifrån en 24-bitarspalett. Gif kan inte lagra färgprofiler, utan färgerna renderas utifrån arbetsfärgrymden på den enhet där färgerna visas.

PNG har möjlighet att lagra färgprofiler, och även en separat del av färgprofilen som kallas gamma. Det är enkelt uttryckt en instruktion till vilken färgnyans som ligger på mitten av kontrastskalan. I trycksaksproduktion kallar man det här för gråbalans.

Blanda färger och färgrymder

Om man då vill lägga en bild ovanpå en färg som är angiven i hexadecimal form på en webbsida så måste man ha tungan rätt i mun. Renderingen av färgerna ska ske utifrån kriterierna som jag nämnde ovan, men det gäller i praktiken inte alltid!

De tre vanligaste webbläsarna beter sig lite olika här. Jag har gjort ett enkelt test för att se hur exakt samma färgvärde tolkas och visas av olika webbläsare beroende på hur bilderna är sparade, och om det finns någon inbakad färgprofil i bilden.

Om vi börjar med Internet explorer under windows så använder den en arbetsfärgrymd som heter sRGB, vilket är den färgrymd som flest enheter har möjlighet att återge i sin helhet. Den är alltså rätt liten jämfört med hur mycket andra additiva färgrymder klarar av. Den här färgrymden är en standardfärgrymd som många program faller tillbaka på om inget annat är sagt. Viktigt att veta om sRGB är att den har ett gammavärde på 2,2.

IE/win

De två bilderna som IE inte hittar är i själva verket Tiff-bilder som jag lagt upp som referens, och IE klarar inte av att tolka dem över huvud taget.

För att förklara lite här så har de två bilderna på översta raden sparats som Jpeg/JFIF utan färgprofil, och med sRGB inbakad. Som synes är det ingen skillnad i återgivning av dem. IE använder sRGB som arbetsfärgrymd, och eftersom arbetsfärgrymden ska användas om ingen annan finns angiven så blir bilden samma nyans som bakgrunden.

Men tittar vi på nästa rad så har jag först en PNG utan gamma angiven, och utan färgprofil. Nästa har gamma 1,8 (Mac-standard) angiven men ingen profil, och här får vi en liten färgförskjutning. Den bilden är sparad med Spara för webben i Photoshop i Mac OS X, vilket resulterar i det angivna gammavärdet på 1,8.

Nästa är samma bild, men istället sparad på normalt sätt från Photoshop och där satt till gamma 2,2 eftersom bilden ligger i sRGB i PS och programmet bevarar arbetsfärgrymdens gammainställning.

Den fjärde är sparad för webben och sedan taggad med sRGB. Även här får vi en färgförskjutning jämfört med bakgrunden, och det beror på att IE struntar i inbakade profiler. Men däremot läser den gamma-värdet i PNG-bilden. Den här bilden har alltså en konflikt med ett PNG-gamma angivet till 1,8 och profilens gamma angivet till 2,2.

Längst ned är en Gif som varken har profil eller något annat angivet.

Går vi vidare till Firefox så ser det ut så här.

Firefox

Här körs läsaren under Mac OS X, vilket gör att gamma-värdet genererar färgförskjutningarna lite annorlunda än i IE/win. Men även här kan man se att inbakade färgprofiler ignoreras. Även FF använder sRGB som arbetsfärgrymd, vilket gör att Jpeg-bilderna renderas lika som bakgrunden även här.

Går vi vidare till Safari så blir resultatet på det här viset.

Safari

Det första man lägger märke till är att Tiff-bilderna syns, men tittar man en gång till så ser man att Jpeg-bilden med färgprofil får en annan nyans än bakgrunden. Det här är helt korrekt eftersom Safari – till skillnad från sina kompisar IE och FF – använder bildskärmens profil som arbetsfärgrymd. På det viset maximeras färgomfånget till vad som är möjligt att återge på skärmen, och begränsas inte till lägsta gemensamma nämnare som i IE och FF.

Både inbakade profiler och gamma-tagg respekteras i Safari, vilket är helt riktigt att göra. De respekteras i den ordningen att finns inget angivet används arbetsfärgrymden, finns ingen profil används gamma-inställningen och finns både profil och gamma-inställning används profilen. Rätt prioritetsordning, alltså.

Slutsats

Jämför man de tre läsarna så kan man konstatera att för att få färger i bilder att visas lika som samma färger angivna i HTML (arbetsfärgrymden) kan man antingen använda Jpeg utan profil, PNG utan något alls eller Gif.

Färgerna kommer inte att se likadana ut om man lägger webbläsarna bredvid varandra (olika standardgamma i och med de olika arbetsfärgrymderna), men de relativa återgivningarna av färgerna på sajten kommer att stämma.

Det finns ett bra program som man kan använda för att rensa bort gAma-taggen i sina PNG-bilder som heter GammaSlamma, men enklast är ändå att exportera sina bilder till PNG från Förhandsvisning istället för från Photoshop. Förhandsvisning skriver nämligen inte någon gAma-tagg, och bevarar därmed bildens möjlighet att renderas helt och hållet i webbläsarens arbetsfärgrymd.

Mitt enkla test finns här, så du kan prova själv.