Hur man åtgärdar färg- och mättnadsförlust i bilder i WordPress

Du lägger timmar på att redigera ett foto för att det sedan ska se matt och urtvättat ut när det laddas upp till WordPress. Vi har stött på exakt samma frustration många gånger med våra egna utvalda bilder.

Det här problemet uppstår oftast på grund av en enkel missmatchning mellan färgprofiler. Lyckligtvis kan du åtgärda det på bara några sekunder genom att konvertera filen innan du laddar upp den.

I den här guiden visar vi hur du åtgärdar färg- och mättnadsförlust i bilder i WordPress.

Här är en snabb översikt över de ämnen vi kommer att täcka i det här inlägget:

• Varför förlorar vissa bilder färg och mättnad i WordPress?
• Hur man åtgärdar färg- och mättnadsförlust för bilder i WordPress med Photoshop
• Hur man åtgärdar färg- och mättnadsförlust i WordPress med GIMP
• Vanliga frågor om bildfärger i WordPress
• Ytterligare resurser för bildoptimering

Varför förlorar vissa bilder färg och mättnad i WordPress?

En av de främsta orsakerna till förlust av färg och mättnad i bilder är färgrymden.

En 'färgrymd' är ett specifikt spektrum av färger som en kamera eller skärm kan visa. Du kan tänka på det som en specifik låda med kritor. Vissa lådor har fler nyanser än andra.

Olika former av RGB (röd, grön, blå) färgrymd används på internet. De två vanligaste formerna är Adobe RGB och sRGB.

Många professionella fotografer tar fotografier med Adobes RGB-färgrymd, som har fler färger och ger mycket bättre resultat.

De flesta innehållshanteringssystem (CMS), som WordPress, förlitar sig dock på sRGB-färgrymden. När du laddar upp en bild komprimerar WordPress den och tar ofta bort den inbäddade metadata för 'ICC-profil' (etiketten som talar om för skärmar vilka färger som ska användas).

Utan den här etiketten behandlar webbläsare bilden som sRGB, vilket gör att färgerna ser urtvättade ut.

Bilder som är tagna med Adobe RGB-färgrymd är mer levande och visar färger korrekt i höga toner. När de konverteras av WordPress ersätts de levande färgerna med något dämpade toner.

Till exempel, här är en jämförelse av en bild med olika bildkvaliteter. Bilden till vänster är tagen med Adobe RGB-färgutrymmet. Men när den laddas upp till WordPress, förlorar bilden sin lyster och ser matt ut.

WordPress komprimerar också de storleksändrade bilderna, vilket kan bidra till en liten kvalitetsförlust. För mer information, läs vår guide om hur man ökar eller minskar WordPress JPEG-bildkomprimering.

Med det i åtanke, låt oss titta på hur du enkelt kan förhindra färg- och mättnadsförlust i bilder i WordPress.

Hur man åtgärdar färg- och mättnadsförlust för bilder i WordPress med Photoshop

Det enklaste sättet att åtgärda detta problem är att konvertera dina bilder till sRGB-färgrymden innan du laddar upp dem till WordPress. Detta kan enkelt göras med ett bildredigeringsverktyg som Adobe Photoshop.

Detta är den exakta metoden som vårt eget designteam använder här på WPBeginner. Det säkerställer att alla skärmdumpar och funktionsgrafik som du ser i våra handledningar är skarpa och färgkorrekta varje gång.

Metod 1: Konvertera bilder till sRGB

Först måste du öppna din bild i Adobe Photoshop.

Härifrån går du helt enkelt till Arkiv » Exportera » Spara för webben (äldre) i menyn högst upp.

Detta öppnar dialogrutan Spara för webben. Här är det viktigt att du markerar rutan 'Konvertera till sRGB'.

Detta säkerställer att bilden kommer att se likadan ut på WordPress som den gör i Photoshop.

Metod 2: Redigera färginställningar i Photoshop

Å andra sidan kan du använda den här metoden om du inte är nöjd med resultatet av den första metoden.

I Adobe Photoshop, gå till Redigera » Färginställningar. Detta öppnar dialogrutan för färginställningar.

Du behöver välja 'Nordamerika Webb/Internet' från rullgardinsmenyn med inställningar.

Välj sedan under avsnittet Flerhanteringspolicyer RGB-inställningarna till Konvertera till arbets-RGB. Klicka sedan på knappen 'OK' för att spara dina inställningar.

Nu måste du öppna originalfotot eller bilden som du ville ladda upp.

Om arbetsutrymmesprofilen inte matchar, kommer Photoshop att visa en varning och fråga dig vad du ska göra.

Du bör välja 'Konvertera dokumentets färg till arbetsrymd' och sedan klicka på 'OK'. Din fotos färgprofil är nu mer exakt konverterad. Du kan nu spara bilden för att behålla dina ändringar.

Upprepa processen för alla bilder du vill ladda upp. Nu kan du säkert ladda upp dessa konverterade bilder utan färg- eller mättnadsförlust i WordPress.

Hur man åtgärdar färg- och mättnadsförlust i WordPress med GIMP

GIMP är ett kraftfullt gratisalternativ till Adobe Photoshop. Du kan använda det för att konvertera färgutrymmet för dina WordPress-uppladdningar.

GIMP känner i princip av varje bild du försöker öppna för att se om den har en inbäddad färgprofil. Om din bild är i Adobe RGB-färgrymd, kommer GIMP automatiskt att visa en dialogruta för att konvertera den.

Ibland kan en bild inte ha en inbäddad färgprofil, eller så kan GIMP misslyckas med att läsa den korrekt. I så fall måste du manuellt ändra färgrymden.

Först måste du veta vilken färgrymd ditt fotografi kan använda. Vanligtvis är det Adobe RGB, men det kan vara annorlunda. Om du är osäker kan du kontrollera din kamerautrustning för att ta reda på detta.

Öppna helt enkelt din bild i GIMP. Gå sedan till Bild » Färghantering » Konvertera till färgprofil.

När du har tillämpat färprofilen kan GIMP nu säkert konvertera den till sRGB utan att förlora färger.

Gå helt enkelt till Bild » Färghantering och välj sedan alternativet ‘Konvertera till färprofil’.

En ny dialogruta öppnas nu.

En ny dialogruta öppnas. Ställ in alternativet 'Konvertera till' till 'sRGB inbyggd' (eller ibland bara märkt 'Inbyggd RGB') och klicka på knappen 'Konvertera'.

GIMP kommer nu att konvertera färgprofilen till sRGB, och du kan spara din bild. Upprepa helt enkelt processen för andra bilder du vill ladda upp till WordPress.

Vanliga frågor om bildfärger i WordPress

Under åren av att hjälpa tusentals användare har vi märkt att några frågor om WordPress-bilder dyker upp om och om igen. Här är svar på de vanligaste vi får.

Minskar WordPress alltid bildkvaliteten?

Som standard komprimerar WordPress bilder för att hjälpa din webbplats att laddas snabbare. Detta kan ibland orsaka en viss pixlig bild, men färgförlusten orsakas vanligtvis av den saknade sRGB-profilen som vi diskuterade tidigare.

Kan jag åtgärda färgen på bilder som redan har laddats upp till mitt mediebibliotek?

För närvarande kan WordPress inte automatiskt åtgärda färgprofilen för bilder som redan har laddats upp. Du måste konvertera originalbilden till sRGB på din dator och sedan ladda upp den igen till ditt mediebibliotek.

Är sRGB det bästa färgutrymmet för alla webbbilder?

Ja, sRGB är standardfärgrymden för webben. Nästan alla webbläsare och enheter är utformade för att visa den korrekt. Att konvertera dina bilder till sRGB säkerställer att färgerna ser konsekventa ut för alla dina besökare.

Ytterligare resurser för bildoptimering

Här är några guider du kan gå igenom för att säkerställa att dina bilder är korrekt optimerade:

• Hur man lägger till bilder korrekt i WordPress (steg för steg)
• WebP vs. PNG vs. JPEG: Bästa bildformatet för WordPress
• Nybörjarguide till bild-SEO – Optimera bilder för sökmotorer
• Hur man massredigerar utvalda bilder i WordPress
• Hur du väljer den bästa programvaran för webbdesign (jämförd)
• Nybörjarguide till WordPress bildstorlekar (+ bästa praxis)
• Bästa WordPress-plugins för bildkomprimering jämförda

Vi hoppas att den här artikeln hjälpte dig att åtgärda förlust av bildfärg och mättnad i WordPress. Du kanske också vill se vår guide om sätt att förhindra bildstöld i WordPress och hur du städar upp ditt WordPress mediebibliotek.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.