Bilder används ofta på nätet, men samtidigt så är frågan: hur gör man sina bilder webbanpassade? Det är en inte helt enkel fråga att svara på, då det finns flera saker att tänka på. Den första är då att tänka på att bilder inte är en självklarhet – i en del fall så visas de inte i webbläsaren, men det kan också vara så att besökaren inte kan se dem. Därför är det första steget för att skapa webbanpassade bilder att skriva en bra ALT-text. Enligt Google så är en bra ALT-text viktigt när de rankar bilder i sin sökmotor, förutom att de förbättrar sidans tillgänglighet. En bra TITLE-text gör också sitt till, men är, enligt Google, betydligt mindre viktigt.

Olika filformat

Låt oss börja från början: vilket filformat ska användas? Till en viss del avgörs det redan av vilken sorts bild det rör sig om. .gif är det enda bildformatet som tillåter animerade bilder, till exempel, så om det är vad man vill ha så måste man använda en sådan. Men för alla andra bilder så finns det i princip två bildformat att välja mellan: .png och .jpg, där det sistnämnda är det absolut vanligaste valet idag. Skillnaden mellan dem är att .png-bilder är okomprimerade, och därför kan se bättre ut, medan .jpg-bilder är komprimerade. .jpg tappar i kvalitet, beroende på hur kraftigt man väljer att komprimera dem, men har en stor fördel: de är mycket mindre.

Storleken på bilden är en av de viktigaste aspekterna när det gäller att anpassa sin bild till webben. För exempelvis foton så ser en bild bättre ut i 861 kilobytes storlek än i 49 kilobyte – vilket vi demonstrerar nedan: Båda bilderna är 1500 x 977 pixlar stora, och det är samma bild. Men den övre har sparats med minimal komprimering, och den undre med hög sådan. Nu ska erkännas att komprimeringen här är lite överdriven, för att illustrera själva principen om vad den gör med .jpg-bilder, men det tydliggör ändå vad som händer med komprimerade bilder
En bild av norrsken med låg komprimering.
En bild av norrsken med hög komprimering.
Hur pass mycket bildkvalitet man vill offra för att en webbsida ska ladda snabbare beror på hur pass viktigt det är med skarpa bilder. Stora bilder gör att en webbsida laddar långsammare, vilket gör att risken finns att en besökare tröttnar och lämnar sidan innan den laddat klart, vilket vi nyligen skrev om. Samtidigt så är det lite mer komplicerat än så: en webbsida kommer att visas på små mobiltelefoner och stora 4k-skärmar, och en bild som ser bra ut i det lilla formatet kan ha tydliga skavanker i det större. Därför är det bra att se efter hur bilderna ser ut på olika bildskärmar.

Det leder oss också in på ytterligare en sak man ska tänka på när det gäller att webbanpassa bilder: dess dimensioner. Bilder kan skalas ned och upp beroende på hur stor yta som webbsidan visas på. Att ladda upp en bild som är 1500 x 1000 pixlar är onödigt om den aldrig kommer att visas i större storlek än 1000 x 750, till exempel. Den kommer fortfarande att kräva lika mycket minne, och därmed laddtid. Det är ett misstag som är rätt så vanligt; att de bilder man laddar upp till sin webbsida har större dimension än vad som krävs, och är alltså ytterligare ett sätt på vilket laddtiden kan förkortas.

Är ditt webbinnehåll optimerat, eller gör långa laddningstider att dina besökare hellre surfar vidare? Hör av dig så berättar vi mer om hur vi kan hjälpa dig!