Anpassa bilder för webben

Publicerad 070527.

Hur gör du för att förbereda din bild för visning på webbsidor, eller bildspel på datorer, på bästa sätt?

Förutom den vanliga digitala bildbehandlingen, där du ser till att ge bilden rätt kontrast, färger och ljushet, så är det huvudsakligen 4 steg du behöver ta dig genom för att förbereda din bild. Här beskrivs det arbetsflöde som jag själv använder.

Exempel på bild som varken har konverterats till rätt färgprofil eller skärpts (till vänster) jämfört med en bild som har genomgått samtliga 4 steg (till höger). Notera den vänstra bildens blaskiga färger som kommer av att bilden ej konverterats till rätt färgprofil.

1 - Bildens format

Till skillnad från arbete med trycksaker där bilderna mäts i centimetrar mäter man bilder som ska visas på bildskärmar i pixlar (bildpunkter). Detta därför att bildskärmar består av ett antal pixlar, t.ex. 1024 pixlar i bredd och 768 pixlar i höjd. Så om du vill att en bild ska täcka hela skärmen på en sådan skärm ska den alltså mäta 1024 * 768 pixlar. Och följdaktligen - om du vill att bilden bara ska täcka ungefär en fjärdedel av bredden på samma skärm behöver den förminskas ned till 256 pixlar i bredd.

Exempel på bild i 256 * 192 pixlar storlek.

Olika skärmar kan visa olika mängder pixlar beroende främst på skärmens storlek, men de brukar följa olika standarder. En skärm som kan visa 1024 * 768 pixlar kallas för XGA-skärm. En skärm som endast kan visa 800 * 600 kallas SVGA. Idag är det allt mer vanligt med widescreenskärmar vilka ofta kan visa väsentligt mer pixlar i bredd än XGA.

Att förminska en bild gör du i Photoshop med Bild/Bildstorlek. Så här ser dialogrutan ut (Photoshop CS2):

Se till att rutan "Ändra bildupplösning" längst ned är förbockad.

Egentligen räcker det med att du nu ändrar antingen Bredd eller Höjd i pixlar räknar, längst upp. När du ändrar det ena måttet, t.ex. bredden, så ändras automatiskt höjden så att bilden fortfarande får rätt proportion. Bestäm dig för vilken parameter som är viktigast för dig att hålla koll på. (Om du tycker att bilden har fel proportioner är det inget du kan göra något åt här - du får i så fall avbryta och först beskära bilden.)

När du valt bredd eller höjd skulle du kunna trycka OK och gå vidare, men det finns en parameter till som kan vara intressant: "Upplösning". Den har att göra med hur tätt bildpunkterna sitter (alltså hur små pixlarna är). På gamla bildskärmar sitter det minst 72 pixlar per tum ("72 ppi"). Idag har de flesta bildskärmar en täthet närmare 100 pixlar per tum. Webbläsare brukar inte bry sig om denna parameter, du kan alltså lämna den oförändrad och bilderna kommer att visas lika stora på webbsidan oavsett upplösning. Men om du ska använda vissa presentationsprogram kan det hända att de bryr sig om detta värde vilket innebär att bilden visas olika stort på skärmen beroende på denna inställning (trots samma pixelmått). Därför brukar jag själv alltid ställa in mina webbbilder i 72 pixlar per tum - i det fall jag skulle vilja använda bilden i annat än webbläsare.

Notera att när du ändrar värdet för upplösning så kommer Photoshop att ändra bredd- och höjdvärdet till något helt annat än vad du valt. Därför brukar jag alltid börja med att ändra upplösningen, och sedan fortsätta med att ändra bredd eller höjd.

Summering:

• Med Bild/Bildstorlek ändrar du bildens pixeldimensioner.
• Börja gärna med att sätta upplösningen till 72 pixlar per tum.
• Därefter ändrar du antingen bredd eller höjd i pixlar räknat till en pixeldimension som passar webbsidan och den skärmstorlek du designar för.

2 - Bildens färgprofil

En färgprofil beskriver hur mättade, mörka och ljusa färger som en viss enhet (skrivare, bildskärm, tryckpress ...) förmår att reproducera. Samma röda färg har olika värden beroende på vilken färgprofil som värdena utgår ifrån.

Då många webbläsare fortfarande förväntar sig att alla bilder är definierade enligt färgprofilen sRGB kan detta leda till att bilderna ser lite konstiga ut på skärmen om de egentligen har en annan färgprofil. Detsamma gäller presentationsprogram.

Den vänstra bilden har färgprofil Adobe RGB och sparades som JPEG-fil utan att först konverteras till sRGB. Den högra bilden konverterades först till sRGB.

Varje bild som ska visas för webben bör först konverteras till färgprofil sRGB, om den inte redan har den profilen. Det sker med Bild/Konvertera till profil. I listan vid Målfärgrymd kan du välja sRGB och sedan trycka OK.

Nu ser du normalt ingen skillnad på skärmen och det kan vara lätt att tro att inget har hänt. Men andra program än Photoshop kommer nu att visa bilden utan konstiga färgdefekter.

Summering

• Många webbläsare och presentationsprogram förväntar sig bilder med färgprofil sRGB. Om bilden har annan färgprofil uppstår färgdefekter vid visning.
• Använd kommandot Bild/Konvertera till profil... för att utföra konverteringen.
• (Använd INTE den näraliggande funktionen Tilldela profil som aldrig ska användas annat än om bilder av misstag fått fel profil tilldelad.)

3 - Skärp bilden

Nu har bilden rätt pixeldimensioner och rätt färgprofil. Här kan du stanna om du vill, men ofta ser bilden lite mjuk ut, dvs den skulle må bra av att skärpas upp lite.

Att skärpa en bild för skärm sker med samma funktion som används för att skärpa bilder för tryck, men med helt andra värden. En bild som ska tryckas och rastreras kräver en ganska hård skärpa som ser ful ut på skärmen. Här ska vi istället tänka tvärtom - det ska se snyggt ut på skärmen.

Börja med att se till att du ser din bild i 100% skala i Photshop. (Det innebär att en pixel ur din bild upptar en pixel på din bildskärm - dvs du ser all bilddata som finns kvar i bilden efter förminskningen.) Jag brukar dubbelklicka på förstoringsglaset för att enkelt komma till detta visningsläge.

Nu kan du främst välja mellan filtret Oskarp mask eller Smart skärpa. Båda finns under Filter/Skärpa/...

Då jag själv föredrar Smart skärpa ger jag här exempel på hur min inställning brukar se ut:

Ställ först in radien till 0,3. Därefter kan du experimentera med mängd-värdet för att hitta en inställning som passar din bild. Jag brukar ofta hamna på värden mellan 75-150%.

Om du vill detaljstyra skärpan kan du klicka på Avancerat och sedan styra inställningarna i Skugga och Högdagrarna separat via flikarna som nu dyker upp.

Summering

• Bilder som skalats ned brukar bli ganska mjuka.
• Skärp upp bilden för skärmen genom att använda ett lågt radievärde och sedan experimentera med mängden.

4 - Spara bilden

Slutligen ska bilden lagras. För fotografiska bilder finns främst ett val: JPEG. Det finns flera alternativ såsom JPEG2000 eller PNG8/24 men vill du använda ett format som garanterat fungerar i alla applikationer är det standard-JPEG som gäller. GIF går också bra men kan bara definiera 256 färger vilket är alldeles för lite för de flesta bilder.

Om du sparar som JPEG med funktionen Arkiv/Spara som... kommer bildfilen att bli väsentligt större än om du sparar som JPEG med Arkiv/Spara för webben... Detta därför att den förstnämnda funktionen även sparar med filinformationen (fototeknisk data, kategorisering etc).

Dialogrutan Spara för webben ser ut så här:

Välj JPEG som bildformat och sedan kompressionsgraden därunder. För de flesta bilder brukar Hög eller Mycket hög bli bra. Ju sämre kvalitet desto mindre fil och desto hårdare komprimerad bild. Komprimeringen syns som fyrkantiga områden kring kontrastrika/detaljerade områden i bilden. Prova gärna genom att välja Låg - du ser resultatet direkt på skärmen.

Det är inte ett krav att ha ICC-profil (dvs färgprofilen sRGB i vårt fall) förbockat därför att om bilden sparas utan färgprofil kommer webbläsarna och andra program ändå förutsätta att bilden är baserad på sRGB. Men då filstorleken bara växer med ca 3 K tycker jag gott att du kan låta denna vara förkryssad om du är lite ovan att hantera färgprofiler. Varför? Jo, det är annars alltid så att färgprofilen ska sparas tillsammans med bilden och du gör det lättare för dig själv att ha som regel att alltid se till att spara med färgprofilerna.

Summering

• JPEG är ett bra standardformat som passar utmärkt för webbsidor och presentationsprogram.
• Använd Arkiv/Spara för webben... som ger en mindre bildfil än vanliga Spara som...

//
Petter Stahre