Varför ser bildens färger annorlunda ut på min webbplats?

Jämför tre versioner av samma bild

Ett foto ser rätt ut i bildredigeraren, men färgerna ändras på din webbplats. Det är lockande att göra fotot ljusare eller mer färgstarkt. Kontrollera först om problemet ligger i bilden, sidan eller skärmen.

Jämför originalet, kopian du sparade för webbplatsen och bilden som webbplatsen faktiskt visar. Att spara en färdig kopia från en redigerare kallas ofta att exportera. Därefter kan webbplatsen skapa en egen mindre eller komprimerad version.

1. Behåll originalet. Använd det ursprungliga fotot eller den redigerbara designfilen som referens. Arbeta med kopior så att du kan gå tillbaka till originalet.
2. Kontrollera den sparade kopian. Öppna den bredvid originalet i bildredigeraren. Dra också filen till en flik i webbläsaren för att se hur den visas där.
3. Kontrollera webbplatsens version. På en dator kan du högerklicka på bilden på den publicerade sidan och leta efter Öppna bild i ny flik eller ett liknande alternativ. Längre ner finns steg för när alternativet saknas.
4. Jämför samma område. Använd samma skärm, ungefär samma visningsstorlek och en liknande bakgrund. Välj en del där skillnaden syns tydligt, till exempel tyget på en produkt eller en enfärgad yta i en logotyp.

Låt ljusstyrka och andra skärminställningar vara oförändrade tills vidare. Om du tittar på en bild på mobilen och den andra på en bärbar dator blir det svårare att avgöra om filen eller skärmen orsakar skillnaden.

Välj nästa kontroll utifrån det du ser

Vad är en färgprofil och varför behövs den?

En bild sparar färger som tal. En färgprofil talar om för en app hur talen ska visas. När profilen sparas i själva bildfilen kallas den en inbäddad profil. Du kan också se benämningen ICC-profil, som syftar på standarden för profilerna. International Color Consortiums vanliga frågor förklarar hur de fungerar.

sRGB är ett vanligt sätt att definiera färger för webbilder. Tänk på det som gemensamma instruktioner för färgåtergivning. Det är ett praktiskt val för vanliga foton och illustrationer som visas på många olika enheter. Adobe RGB och Display P3 definierar andra, större färgomfång.

Om färginformation saknas eller läses fel kan en app visa bilden annorlunda. En saknad profil betyder däremot inte automatiskt att filen är fel. En bild som redan förberetts för sRGB kan fortfarande se ut som avsett. Problemet uppstår när appen antar fel instruktioner för bildens färger. Läs Adobes förklaring av bildprofiler.

En skärm har också en egen profil som beskriver hur den återger färger. Skilj den från bildens profil: din skärms profil är inte den du ska lägga till i alla webbilder för besökarna.

Konvertera färgerna i stället för att bara byta profilen

Bildredigerare kan ha både Assign Profile (tilldela profil) och Convert to Profile (konvertera till profil). De gör olika saker:

• Att tilldela en profil ger befintliga färgvärden en ny tolkning. Talen är oförändrade, men bilden kan ändra utseende.
• Att konvertera till en profil anpassar talen till de nya färginstruktionerna och försöker behålla bildens utseende.

Använd konvertering för att göra en sRGB-kopia av en Adobe RGB-bild vars profil är korrekt identifierad. Att bara tilldela sRGB kan ändra färgerna. Vissa mycket intensiva färger kan inte återges exakt inom sRGB:s mindre färgomfång, så granska resultatet. Adobes profilinstruktioner beskriver båda kommandona.

Om originalprofilen är okänd, leta efter den ursprungliga designfilen eller fråga den som skapade bilden. Välj inte en profil bara för att bilden blir mer färgstark. Redigeraren kan ha antagit en profil när filen öppnades. Profilen som visas nu bevisar därför inte vilken profil bilden skapades med.

Spara en webbkopia med sRGB-färger

För ett vanligt webbplatsfoto eller en illustration kan du skapa en separat sRGB-kopia och behålla originalet. Du behöver en redigerare med färgkonvertering, till exempel Photoshop. Andra program kan ha Convert to sRGB i exportinställningarna. Photoshop-menynamnen nedan kommer från det engelska gränssnittet.

1. Kontrollera originalets profil. Leta efter dokumentets färginställningar. Öppna Edit → Convert to Profile i Photoshop och läs Source Space. Om appen varnar för en saknad profil, kontrollera originalfilens inställningar eller fråga skaparen innan du gissar.
2. Välj sRGB för kopian. Välj sRGB IEC61966-2.1 som mål i Photoshops konverteringsruta. Aktivera Preview för att granska ändringen och bekräfta sedan. Adobe har hela arbetsgången för Photoshop.
3. Spara eller exportera kopian. Om alternativet Embed Color Profile finns, bädda in den matchande sRGB-profilen. Konverteringen ändrar färgvärdena; inbäddningen sparar instruktionerna för att läsa dem.
4. Öppna den sparade filen igen. Kontrollera den i redigeraren och webbläsaren innan uppladdning. Använd ett annat filnamn så att du känner igen den nya kopian.

Om redigeraren saknar inställningar för färgprofiler, läs i dokumentationen hur den exporterar färger. Be designern om en sRGB-kopia för webben om du inte kan kontrollera inställningarna själv.

Välj filformat separat. JPG passar ofta foton; PNG kan vara användbart för grafik med transparent bakgrund. Vår guide till bildformat för webben förklarar alternativen. Ett byte från JPG till PNG rättar inte i sig felaktig färginformation.

Kontrollera om webbplatsen ändrar bilden

Om den sparade filen ser rätt ut men webbplatsens bild inte gör det, kontrollera vad som händer efter uppladdningen. En webbplatsbyggare, ett bildtillägg eller en tjänst som levererar bilder kan ändra måtten, komprimera bilden eller byta format.

Börja med bilden du öppnade i en egen flik. Spara kopian på datorn och jämför den med filen du laddade upp i samma bildredigerare. Mindre bildmått bevisar inget färgfel, men visar att du kanske jämför olika versioner.

Om du inte kan öppna bilden direkt

Webbläsarens utvecklarverktyg visar vilken fil sidan laddar. Det är enklast på en dator:

1. Öppna sidan och leta i webbläsarens meny efter Utvecklarverktyg eller Developer tools, ofta under Fler verktyg.
2. Välj fliken Network eller Nätverk och ladda om sidan. Då visas filerna som sidan hämtar.
3. Använd bildfiltret, som oftast heter Img eller Images. Välj en fil och titta i fliken Preview eller förhandsgranskningen för att hitta din bild.
4. Högerklicka på raden och välj Öppna i ny flik om alternativet finns. Annars kopierar du filens webbadress, även kallad URL, till en ny flik. Spara bilden för jämförelsen.

Chromes guide till Network-panelen visar verktygen. Menynamn och placering kan variera mellan webbläsare och språk.

Sidan kan välja olika bildfiler i mobil- och datorvyn. Guiden till responsiva bilder förklarar detta närmare.

Om du inte ansvarar för webbplatsens tekniska inställningar, skicka den uppladdade filen och webbplatsens kopia till den som gör det. Be personen kontrollera om bildbehandlingen tar bort färgprofilen eller konverterar färgerna fel. Efter en rättning kan bildversionerna behöva skapas om och cacheminnet tömmas. Cacheminnet sparar tidigare skapade filer. Kontrollera att du ser den nya versionen.

Färginformation är något annat än privata uppgifter som ett fotos GPS-position. Att ta bort all metadata, alltså informationen som sparas tillsammans med bilden, kan även ta bort färgprofilen. Kontrollera både integritet och utseende när du gör en kopia för delning. Guiden till fotometadata beskriver arbetsgången.

Kontrollera sidans effekter och bakgrund

Om webbplatsens bild ser rätt ut i sin egen flik men annorlunda på sidan kan sidan ändra dess utseende. Prova webbplatsens ljusa och mörka tema och se om bilden ändras när du för muspekaren över den.

• Färg- och ljuseffekter: ett tema kan göra bilder mörkare, mindre färgstarka eller grå. Dessa effekter kallas ofta filter. MDN:s filter-referens visar hur de påverkar bilden.
• Delvis genomskinlighet: bilden eller avsnittet runt den kan låta bakgrunden synas igenom, så att färgerna ser bleka ut. Inställningen kallas opacitet. Den kan påverka bilden även när den gäller det omgivande avsnittet; se MDN:s förklaring av opacity.
• Ett lager över bilden: ett färgat överlägg eller en effekt när du pekar på bilden kan tona den utan att ändra filen.
• En annan bakgrund: transparenta och delvis transparenta områden blandas med sidans bakgrund. Även helt täckande färger kan uppfattas olika med vitt eller mörkgrått omkring sig.

Jämför en transparent bild på samma bakgrund som i designen. Om den bara ser fel ut på en viss bakgrund, granska utformningen för den placeringen. Guiden till transparenta bakgrunder förklarar alternativen.

Leta efter bildeffekter i sidredigeraren eller temainställningarna. Om du behöver hjälp, berätta för webbplatsens utvecklare att bilden ser rätt ut för sig själv och be om kontroll av filter, opacitet och överlägg. Enskilda stilregler kan tillfälligt stängas av för att hitta orsaken. MDN:s guide till CSS-felsökning förklarar metoden.

Jämför skärmar under liknande förhållanden

Om samma fil ser olika ut på två skärmar, låt filen vara oförändrad medan du kontrollerar skärmarna. Ljusstyrka, rummets belysning och skärmens egenskaper påverkar det du ser.

Stäng tillfälligt av funktioner som avsiktligt ändrar skärmens utseende. Apples Night Shift gör skärmen varmare och True Tone anpassar färg och intensitet efter omgivningsljuset. Läs Apples guide till skärminställningar. På andra enheter kan du leta efter blåljusfilter, nattläge eller ett läge för livfulla färger.

Om hela sidan ser ungefär lika varm eller färgstark ut är skärminställningarna en bra början. Om bara ett foto skiljer sig, återgå till dess färginformation och kontrollera om det är en HDR-bild. HDR förklaras i de vanliga frågorna.

När pålitliga produktfärger är viktiga i ditt arbete ger en kalibrerad skärm en bättre referens. Kalibrering justerar skärmen mot ett känt mål; en skärmprofil beskriver dess färgåtergivning. ICC:s vanliga frågor förklarar skillnaden. Rätt bildförberedelse hjälper till att ge ett enhetligt resultat, men gör inte alla besökares skärmar identiska.

Exempel: ett produktfoto ser blekt ut i webbläsaren

Tänk dig ett produktfoto vars originalfil har en känd Adobe RGB-profil. Det ser rätt ut i redigeraren, men den sparade kopian ser blek ut i webbläsaren. Detta är ett tänkt exempel: en förlorad profil påverkar inte alla bilder likadant.

1. Hitta den första skillnaden. Den sparade filen skiljer sig redan före uppladdningen, så börja med exportinställningarna.
2. Kontrollera vad som sparades. I det här exemplet försvann Adobe RGB-profilen vid exporten utan att färgerna konverterades till sRGB.
3. Gör en ny kopia från originalet. Konvertera den till sRGB och spara den med matchande profilinformation.
4. Jämför före uppladdning. Öppna den nya kopian i redigeraren och webbläsaren på samma skärm.
5. Kontrollera även webbplatsen. Ladda upp kopian och jämför bilden som sidan faktiskt använder.

Ökad mättnad gör färgerna starkare. Det kan få den första exporten att se bättre ut i en app men för färgstark i en annan. Att rätta exporten åtgärdar orsaken och håller originalet användbart för andra ändamål.

Använd Pixilo när bildens färger ser rätt ut

När den sparade kopian har de färger du vill ha kan du använda Pixilo för att anpassa bildmåtten till sidan eller minska filstorleken. Behåll den förberedda kopian för jämförelse med nedladdningen.

Pixilo erbjuder storleksändring och komprimering men inga inställningar för att reparera eller välja färgprofiler. Vid storleksändring och många formatkonverteringar ritar webbläsaren om bilden. Om du behöver bevara Display P3- eller HDR-egenskaper, granska resultatet noga. Utgå inte från att varje åtgärd bevarar dem.

Börja med en bild innan du behandlar flera. Jämför viktiga färger och detaljer efter nedladdningen och kontrollera sedan det publicerade resultatet. Om skillnaden uppstår först efter uppladdningen, undersök webbplatsens bildbehandling eller sidans effekter.

Vanliga frågor

Ska Display P3-bilder alltid konverteras till sRGB?

Nej. Display P3 ger ett större färgomfång och kan vara användbart när webbplatsen och besökarnas enheter stöder det. Om du inte vet hur webbplatsen hanterar det är en sRGB-kopia en enklare början för vanlig publicering. Behåll originalet. WebKit förklarar hur bilder med profil anpassas till en skärm.

Varför tappar de ljusaste delarna av mobilfotot sin ljusstyrka?

Originalet kan vara HDR, en förkortning för high dynamic range. Det innebär ett större ljusomfång, där skillnaden mellan mörka och ljusa delar kan vara större. En standardkopia kanske inte behåller det utseendet. Leta efter ett exportalternativ för standardomfång, ibland kallat SDR. Redigeraren kan kalla anpassningen tone mapping eller tonmappning: HDR-ljusstyrkan anpassas till standardomfånget. Granska särskilt ljusa partier och skuggor. Att bara byta färgprofil gör inte den anpassningen. WebKits HDR-översikt förklarar skärmens förmåga.

Garanterar PNG korrekta färger?

Nej. PNG kan behålla sparade pixelvärden oförändrade, men appen måste fortfarande tolka dem rätt. Ett formatbyte reparerar inte en felaktig eller okänd färgprofil.

Vad gör jag om designern skickar en CMYK-bild?

CMYK använder cyan, magenta, gult och svart för tryck. RGB använder rött, grönt och blått för skärmbilder. Be om en separat sRGB-kopia för webben eller skapa den i en redigerare med färgkonvertering. Behåll tryckoriginalet. Adobes guide till färglägen förklarar skillnaden.

Varför matchar logotypen inte sidans färgkod?

En kod som #336699 är en hexadecimal färgkod och beskriver en sRGB-färg på en webbsida. En logotyp med andra färginstruktioner behöver inte matcha den. Kontrollera också transparens och sidans effekter. Jämför en enfärgad yta inne i logotypen, eftersom mjuka kanter kan innehålla delvis transparenta pixlar. MDN:s referens för hex-färger förklarar skrivsättet.