Meny
Att hantera bilder på sin hemsida kan vara knepigt för de ovana. Som med allt annat är det däremot inte svårt när man väl lärt sig det. Om bilderna är i fel format, väger för mycket eller är beskurna på ett felaktigt sätt kan det få förödande konsekvenser. Inte bara för det visuella intrycket hos besökaren, utan också för din SEO-placering då sökmotorerna anser att hemsidan inte håller tillräckligt hög kvalité.
Bortsett från filmer är det i regel bilder som väger mest på en hemsida. Desto mer en hemsida väger, desto längre tid tar det att hämta hem och läsa in den. Därför vill vi göra bilderna så lätta som möjligt, samtidigt som de bibehåller sitt utseende och inte ser pixliga/suddiga ut.
Det finns ingen gyllene regel för hur mycket en bild får väga, då förutsättningarna och förväntningarna skiljer sig markant från fall till fall. Låt oss först kika på bildens dimensioner då de har en stor påverkan på bildens totala vikt.
Beroende på skärmens pixeltäthet, eller PPI (pixels per inch) som det ofta benämns, kommer en bild med samma pixelmått se olika stor ut på olika skärmar. Det går helt enkelt inte att beräkna bildens storlek i centimeter när den ska ligga på en hemsida. Men om vi ska försöka generalisera så ska en bild som täcker hela skärmen vara runt 1600 pixlar i bredd. Ska den vara hälften av en skärmbredd – ja, då halverar vi den. Till en iPhone 11 som är 375 pixlar bred, och har hög PPI, kan därför en bild på det dubbla 750 pixlar) vara passande.
Bildens vikt är också en knepig historia. Motivet (hur detaljrikt det är), antal färger och personlig smärttröskel för pixlighet har stor påverkan. Det enda vi kan säga med säkerhet är att desto mindre en bild väger – desto bättre är det. Om vi ska generalisera en gång till så vill vi ge rådet att en bild som är 1600 pixlar bred, och kanske 500 pixlar hög, ska väga någonstans mellan 200 till 400 kb (kilobyte). Det finns aldrig någon anledning att komma över 1 mb i bildvikt, vilket annars är ett vanligt problem hos redaktörer med låg kunskap om bildhantering för webben.
När du har sparat bilden från ditt redigeringsprogram (mer om det längre ner) rekommenderar vi att alltid ladda upp den i ett verktyg för bildoptimering. En bra sida att göra detta på är TinyPNG som tillhandahåller inte bara en exceptionell tjänst, utan också en tilltalande grafisk profil (om man gillar pandor – men det gör vi väl alla?). Även om namnet antyder att de bara hanterar PNG’s, så fungerar JPEG’s också utmärkt. Om du istället behöver optimera en GIF rekommenderar vi EZGIF.com.
Om din hemsida är byggd i Wordpress finns det massor av plugins som optimerar bilder direkt vid uppladdning. Oftast finns det en gratisversion och en premiumversion av plugin:et, där gratisversionen täcker de flesta behov. Det finns många att välja på, men av erfarenhet rekommenderar vi antingen Smush eller EWWW som bägge har bra gratisplaner.
Det är viktigt att välja korrekt format bilden ska ha innan bilden laddas upp på ditt CMS (Content Management System). Att göra det i efterhand medför rejält med extrajobb – och i många fall att göra om hela processen.
De populäraste filformaten för bilder på webben är:
Producerar bilder med hög kvalité, men som i gengäld väger ganska mycket. Finns möjlighet till transparent bakgrund, och bör endast användas när detta behövs.
Fun fact: Formatet var 1997 skapat för enbart bilder på nätet, och stödjer därmed inte CMYK som är färgpaletten som används vid print.
Producerar bilder med lika hög kvalité som PNG, men där du själv kan justera kvalitén och vikten på bilden. I regel det bästa valet för en klassisk fotobild på webben.
Fun fact #2: Det är ingen som helst skillnad mellan en JPEG och en JPG. Den sistnämnda finns bara för att Windows inte hade stöd för fyra bokstäver i en filändelse förr.
Producerar bilder med ganska låg kvalité, då enbart 256 färger kan användas. För att få lite perspektiv finns det 16 miljoner färger på JPEG. Huvudsyftet för GIF är istället att skapa animerade bilder.
Fun fact #3: På senare år har ett nytt filformat som heter APNG fått mycket uppmärksamhet. Som namnet antyder är det en PNG, men med möjlighet för animering. Problemet är att äldre webbläsare inte stödjer formatet, och därmed gör det ganska oanvändbart i många fall. Tillsvidare får vi helt enkelt nöja oss med GIF om det ska finnas något rörligt i själva bilden, men standarden kommer garanteras ändras framöver.
Först och främst behöver du hitta en bild som passar i det sammanhang som önskas. Motivet är trots allt A och O. Kvalitén och storleken behöver vara relativt bra, så vi har en grund att jobba med. Om alla andra bilder är close up’s, behöver givetvis denna också vara det.
Därefter är det viktigt att vi redigerar bilden så den går i samma linje med övriga bilder på hemsidan. Snarlik mängd kontrast, snarlik mängd färgbalans och snarlik nyans och mättnad. Om filter används bör samma filter användas genomgående.
Det är också viktigt att inte beskära bilden på ett opassande sätt som till exempel att klippa bort ett huvud på en människa. Eller att beskära bilden väldigt nära inpå ett objekt – där behöver vara lite extra avstånd mellan kant och till exempel ett huvud för att blir rätt.
För professionellt bruk av bildredigering är Adobe Photoshop fortfarande det mest populära. Dess komplexitet skrämmer dock iväg många, och därför är Adobe Lightroom på väg att ta över tronen. Ett program som har fångat vår uppmärksamhet på sistone är Affinity Photo, som dock enbart finns till Mac, men som är ett betydligt enklare och billigare program än både Lightroom och Photoshop.
Det finns en uppsjö av bildredigeringsprogram både till datorn och online. Redigeringen som behövs för att webbanpassa en bild kan göras i samtliga, och därmed blir det en personlig preferens vilken som används.
Om du ska redigera din första bild föreslår vi gratisprogrammet GIMP, alternativt webbaserade Pixlr.com. De har en enkel inlärningskurva och är framförallt gratis.
Om du saknar motivet du behöver finns det riktigt bra stockbilder på nätet. Det behöver inte ens kosta något om du vet var du ska leta. Därför har vi gjort en sammanställning av bra hemsidor att leta på innan du går över till jättarna som kostar allt mellan 400 (t.ex. iStockPhoto) och 10 000 kr (t.ex. Johner eller Maskot) per bild. Då det finns väldigt många, kommer här några av våra favoriter:
Om inte denna guide täcker ditt behov får du gärna kontakta oss så hjälper vi dig på rätt spår.
Låt användarna visa vägenHur tar man fram digital gränssnittsdesign som både älskas av användarna och är bra för affärerna?
UX-förbättringar för e-handelDe här är de viktigaste viktigaste sakerna vi tycker e-handlare bör kika på.
Vad är användarskapat innehåll och varför är det viktigt?Att låta användarna skapa innehållet på webbplatsen har många fördelar. Inte bara sparar det tid och pengar, det upplevs även som mer äkta och trovärdigt.
7 sätt AI kan användas för att öka den digitala tillgänglighetenAI har fått stort genomslag inom innehållsproduktion. Men artificiell intelligens kan även användas för att öka den digitala tillgängligheten. Och hjälpen är välkommen.
