Många människor har problem med färgen på sina foton när de publicerar dem online. Det finns flera anledningar till varför detta kan vara så, men de vanligaste synderna är bildens färgrymd och huruvida profilen är inbäddad eller inte. Båda färginställningarna kan radikalt påverka webbläsarens färg och hur dina foton ser ut.
Låt oss titta på några av de potentiella fallgroparna närmare.
Vikten av att bädda in färgprofilen
När du redigerar dina foton i ett redigeringsprogram som Photoshop gör du det med ett specifikt RGB-arbetsfärgutrymme. För att vara säker på att bevara färgen du ser när du redigerar måste du bädda in profilen innan du sparar bilden.
Enkelt uttryckt är ICC-profilen en översättare. Det gör att olika appar och enheter kan tolka färgen som du tänkt dig. Om du vanar dig att bädda in profiler i dina bilder när du sparar dem, minskar du risken för att färgen ser fel ut på webben eller i tryck.
Den rika färgen i denna ProPhoto RGB-bild ser bra ut i många webbläsare trots att de inte är sRGB som normalt rekommenderas. Om det ser tyst ut och dräneras av mättnad för dig beror det på att du tittar på det i en webbläsare som inte hanteras i färg. Genom att bädda in profilen har jag gett den bästa chansen att se ut som avsedd för de flesta människor. På en bredskärmsmonitor kommer färgerna att dyka upp lite mer.
Genom att bädda in profilen i en bild läggs filstorleken till cirka 3-4 kB, så den enda gången det är vettigt att utesluta den är när du laddar upp stora mängder foton till Internet.
Om du måste lämna profilen ute, se till att bilden finns i sRGB-färgutrymmet, vilket kommer att begränsa eventuella skador. Två eller tre av de mer populära webbläsarna visar fortfarande färgen troget eftersom de automatiskt gissar profilen korrekt (dvs. sRGB).
Även om de flesta webbläsare har förbättrat färghanteringen nyligen, är det fortfarande bra att bädda in profilen. Lämna det inte utan goda skäl.
Eftersom profilen har utelämnats av samma ProPhoto RGB-bild kommer ljusstyrkan och färgen att se hemsk ut i de flesta webbläsare och på de flesta bildskärmar. Däremot skulle en saknad profil för en sRGB-fil inte kunna detekteras för ett stort antal personer.
Hur man bäddar in profilen
Att bädda in profilen i bilder handlar vanligtvis bara om att markera en ruta när du exporterar fotot. Om ett sådant alternativ inte finns kommer antingen standardprogrammet att vara det fördefinierade arbetsområdet för programmet eller så är det sRGB för webbspecifik utdata.
Om du vill kontrollera färgen på dina webbbilder innan du publicerar öppnar du dem direkt i en webbläsare (helst en pålitlig som Chrome) och ser hur de jämför med originalet i ditt fotoredigeringsprogram. Var lite försiktig med att ladda upp bilder till plattformar som tar bort profilen, även om dessa vanligtvis inte kommer att vara fotogallerisidor.
Bädda in eller ta bort profiler kräver vanligtvis bara att du markerar eller avmarkerar en ruta när du sparar. Detta är "spara som" -fönstret i Photoshop.
Konverterar till profil
Du kan använda "konvertera till profil" i Photoshop för att skapa en sRGB-bild, vilket är det säkraste färgvalet för webben. Var noga med att inte skriva över originalfilen och spara den på detta sätt, eftersom större färgutrymmen är ett bättre val för utskrifter som bläckstråleskrivare.
Använd inte "tilldela profil" för profilkonvertering, eftersom det orsakar en färgförskjutning och inte är avsedd för detta ändamål.
Att använda "tilldela profil" i Photoshop för att konvertera mellan profiler kommer att orsaka färgförskjutning. Färgen på bilden till höger ovan har blivit platt som ett resultat av att en sRGB-profil tilldelas en Adobe RGB-bild. Du måste använda "konvertera till profil" om du vill skapa en sRGB-version av ditt foto för webben.
Varför Monitor Gamut Matters
Färghantering behöver minst två profiler för att fungera (bildprofil och bildskärmsprofil i det här fallet). Om du publicerar bilder utan inbäddade profiler litar du på att tittarens webbläsare gissar färgutrymmet korrekt.
När färghantering saknas i webbläsaren eller appen av någon anledning är följande uttalanden sanna:
- En Adobe RGB-bild ser ungefär korrekt ut på en bredskärmsskärm.
- En Adobe RGB-bild ser tyst ut i färg på en standardskärm.
- sRGB-bilder ser ungefär korrekt ut på en standardskärm.
- En sRGB-bild ser övermättad ut i färg på en bredskärmsdisplay.
Observera att en Adobe RGB-bild utan inbäddad profil ser tyst ut i de flesta situationer och måste undvikas. Webbläsare kommer att gissa färgutrymmet som ska vara sRGB om de alls gissar.
Grafen ovan visar skillnaden mellan en standardskärm från Dell (färgad kontur) och sRGB-profilen (prickad kontur). Även på en vanlig skrivbordsskärm är det ganska troligt att vissa färger överskrider sRGB-färgutrymmet och ser för mättade ut när de visas i Microsoft-webbläsare.
I monitorn ovan är det röda som är mest överdrivna i den situationen. Om du inte har profilerat din bildskärm eller om skärmens omfång omfattas av sRGB kommer du inte att stöta på detta.
Webbläsarbeteende 2022-2023
För att förstå färgprofiler hjälper det att veta hur olika webbläsare beter sig med färg. Jag testade fem webbläsare för den här artikeln för att ge dig en uppfattning om vad du kan förvänta dig. Fråga gärna om du tycker att någon av dessa observationer är fel:
Google Chrome
Chrome är en helt färghanterad webbläsare som tilldelar sRGB till alla "omärkta" bilder (dvs. de utan inbäddade profiler). Den läser alla inbäddade profiler.
Opera
Opera är en färghanterad webbläsare som automatiskt antar att foton är sRGB om profilen saknas. Liksom Chrome läser den alla profiler, inklusive Adobe RGB eller ProPhoto RGB.
Firefox Quantum
Du kan konfigurera Firefox för att tilldela sRGB till alla omärkta foton. Den läser alla inbäddade färgprofiler.
Om du råkar köra två bildskärmar behåller Firefox inte full färghantering över dem båda. För optimal färg måste du ringa in en bildskärmsprofil och sedan hålla fast vid den skärmen. Detta gäller bara om dina skärmar har anpassade profiler.
Microsoft Edge / Internet Explorer
Microsoft Edge har en halvbakad lösning för färghantering. Den läser olika färgprofiler och konverterar allt till sRGB för visning. Det största problemet är att den inte använder bildskärmsprofilen. Således fungerar det bäst om din bildskärm inte överstiger sRGB i omfång. Annars ser du oärliga färger.
Safari (för Windows)
Safari kan läsa profiler i bilder och använder bildskärmsprofilen (till skillnad från MS Edge eller MS IE), men den tilldelar inte en profil till en bild om en saknas. I den situationen visar den färg felaktigt som Microsoft Edge gör.
I Photoshop kan du använda “Monitor RGB” -säkra färger för att visa dig hur fotot kommer att se ut i Internet Explorer på din egen bildskärm. Du måste först konvertera bilden till sRGB. Om färgerna ser ljusare ut än de gör utan korrektur betyder det att din bildskärms inbyggda spektrum överstiger sRGB-profilen.
Ett andra experiment är att visa korrekturfärgerna på en Adobe RGB- eller ProPhoto RGB-bild med hjälp av "Internet Standard RGB". Detta visar hur foton i större färgutrymmen ser ut på internet om du utelämnar profilen.
Välja sRGB för webben
Anledningen till att sRGB är ett säkrare val av färgutrymme för webben är att de flesta skärmar eller bildskärmar inte är breda. Således, om profilen går vilse eller avlägsnas, eller om en enhet eller app inte stöder färghantering, ser färgen fortfarande ut okej. Detta är vad Microsofts webbläsare litar på för att fungera.
Om du vill att färgen på dina foton ska se “okej” ut för en så bred publik som möjligt behöver du bara göra två saker:
- Se till att bilden finns i ett sRGB-färgutrymme antingen genom att använda den som ditt arbetsutrymme eller genom att konvertera till sRGB innan du laddar upp den till webben.
- Bädda in sRGB-profilen i bilden innan du sparar.
I Photoshops "Spara för webben" kan du konvertera till sRGB i sista stund genom att markera en ruta. Om du inte markerar rutan sparas fotot i vilket färgutrymme du redigerade det i. Du kan inte ta bort profilen med den här kryssrutan: det är enbart för konvertering.
Andra alternativ: Adobe RGB och ProPhoto RGB
Eftersom de flesta populära webbläsare nu är färgkunniga finns möjligheten att använda andra färgutrymmen på webben. Du kan till exempel publicera foton med en inbäddad Adobe RGB- eller ProPhoto RGB-profil och de skulle fortfarande se bra ut för de flesta. För en minoritet skulle de se bättre ut.
Färgen på bredbildskärmar överstiger vanligtvis Adobe RGB på platser. Därför finns det teoretiskt en anledning att publicera foton i ProPhoto RGB. Detta kompenseras dock av den hemska färgen som uppstår när profilerna saknas eller ignoreras. Det är hög risk.
Adobe RGB är ett intressant perspektiv för webben eftersom det fortfarande gynnar användare av bredbildskärmar. Det är viktigt att det inte ser lika illa ut som ProPhoto RGB när saker går fel. Om du publicerar i Adobe RGB gör du det fortfarande för en relativt liten publik.
Om du använder dessa bredare färgutrymmen för webben, du absolut måste bädda in profilen. Så fort det går vilse kommer färgen på dina foton att se lite platt ut för många människor. När det gäller ProPhoto RGB ser det troligtvis hemskt ut.
Detta 3D-diagram (ovan) visar sRGB-profilen som omfattas av profilen för en bredskärm. Du noterar särskilt det utökade utbudet av cyaner och gröna i det senare.
Tanken med att använda större färgutrymmen på webben är tilltalande, särskilt om du är en landskapsfotograf för vilka dessa färger ofta är avkortade. Det betyder att du skulle använda mer av din kameras funktioner. Det är dock i sig riskabelt och du spelar för en relativt liten publik. Det säkra valet är fortfarande sRGB.
Sammanfattningsvis
Även om moderna webbläsare är mer flexibla är sRGB fortfarande det säkraste valet av färgutrymme för webben. Återigen beror det på att det ungefär matchar sortimentet för de flesta elektroniska skärmar. Att använda större färgutrymmen riskerar att tömma dina foton av färg, särskilt på surfplattor eller smartphones som kanske inte är färghanterade.
Jag hoppas att detta har varit till nytta. Ställ gärna frågor om du behöver något förtydligande.