Nu för tiden kan snygga bilder vara en av de viktigaste delarna av din webbplats. Det oavsett om du har en blogg, en webbsida som presenterar dig eller ditt företag, eller om du har en webbutik som säljer produkter. Studier 2018 har dessutom visat att webbplatser med bilder får mer trafik än webbplatser utan dem. Det är givetvis någonting som inte kan anses som orelaterat till det faktum att Google tar större och större hänsyn till bildmaterial vid sökranking. En bild säger trots allt mer än tusen ord. Men det finns fallgropar som du måste undvika för att inte dina bilder ska knuffa dig längre ner i Googles sökresultat. Dina bilder kan nämligen påverka din webbplats laddningstid, någonting som kan kosta dig både besökare och sökplaceringar.
Vad är webbanpassning av bilder?
Först och främst är det viktigt att förstå skillnaden mellan att minska en bilds storlek i pixlar och att minska en bilds storlek i kilobyte.
I exemplet nedan är alla tre bilder 800 x 533px. Men bild 1 är ca 367kb, bild 2 är ca 84kb och bild 3 är ca 36kb. Bild 3 kommer alltså att vara den bild som går snabbast att ladda, men den kommer också att vara den bild som har sämst kvalitet.
bild 1 (800 x 533px ca 367kb)
bild 2 (800 x 533px ca 84kb)
bild 3 (800 x 533px ca 36kb)
Du kan alltså påverka din bilds laddningstid utan att minska din bilds mått. Bilderna på din webbplats kan skalas upp och ned med hänsyn till storleken på den ytan bilden har att visas på. Säg därför att du har en yta som är 400 pixlar bred att tillgodose för din bild, det är då onödigt att ladda upp en bild som är 800 pixlar bred till den ytan. Även om bilden skalas ned för att passa in i ytan, så kommer den att kräva lika stort minne som den ursprungligen gjorde. Att anpassa bildstorleken för ytan den ska täcka redan innan du laddar upp bilden, är därför ett enkelt knep för att minska laddningstiden.
Stora bilder gör att en webbsida laddar långsammare. Det skapar en betydligt större risk för att dina besökare ska tröttna och lämna din webbplats innan den har laddat klart. Frågan du således bör ställa dig är alltså, hur mycket av bildens kvalitet du är beredd att offra för att din webbplats ska ladda snabbare.
Formatet gör skillnad
Att välja rätt bildformat är viktigare än du tror. För att göra det finns några enkla tumregler. De vanligaste bildformaten är .png och .jpg.
- .jpg går att komprimera. Det är alltså en risk att få sämre kvalitet med en .jpg, men med den stora fördelen att din filstorlek blir liten.
- .png går inte att komprimera. Därför kan .png se bättre ut än .jpg, men filstorlekarna tenderar att bli stora.
Vilket format ska jag välja?
För dina vanliga bilder/fotografier väljer du i regel .jpg, .jpg och gissa vad…? Helt riktigt, .jpg! Använd helt enkelt .jpg så långt det bara går. Den stora fördelen med .jpg är den att du kan ta kontroll över filstorleken och därmed din webbplats laddningstid. Detta är en fördel som inte går att bortse från. Men som alla regler finns det undantag.
- Använd .png när du har rasterbaserad grafik som exempelvis måste ha en genomskinlig bakgrund, som ikoner eller andra liknande element.
- Använd .gif när du vill skapa en animation av rasterbaserade grafik.
- 3. Använd .svg när du vill arbeta med vektorbaserad grafik som ska gå att ändra och skala, detta kan vara allt ifrån text till ikoner och animationer. (Detta är ett magiskt litet filformat som genererar bilder, grafik och animationer i små filstorlekar och med stora möjligheter.)
Har du tänk på att alla inte ser dina bilder?
Hur snygg webbplats du än bygger, så måste du ha i åtanke att bilder faktiskt inte är en självklarhet för alla dina besökare. Vissa webbläsare visar inte bilder och det finns också en risk att din besökare faktiskt inte kan se bilder. Det är anledningen till att ge din bild en riktigt grym ALT-text. ALT-texten är den text som visas om din bild inte kan visas. ALT-texten är också en viktig del för att du ska rankas bra hos Google.
Så vad ska en ALT-text innehålla? Det är egentligen ganska enkelt. Texten ska beskriva din bild på ett sådant vis att din besökare kan förstå och ta till sig budskapet, även om denne inte kan se bilden.
Ta hand om dina besökare, så får du högre användbarhet och bättre ranking i Googles träfflistor. Sätt igång och webbanpassa dina bilder idag.
"Men jag kan vet inte hur man gör?"
Att webbanpassa bilder kan låta överväldigande. Vad betyder det? Hur gör man? Men att se till att dina bilder är optimerade, behöver inte vara svårt. Tidigare har vi gått igenom vad det betyder att webbanpassa sina bilder. Men nu till frågan ”hur”. Du behöver faktiskt inte vara en fena på photoshop eller andra bildredigeringsprogram för att förbättra webbanpassningen av dina bilder. Vi har samlat några smarta länkar:
- tinyjpg.com släpp dina .jpg och .png bilder direkt i webbläsaren och få tillbaka webbanpassade versioner med minskade filstorlekar. Perfekt för dig som bara är ute efter att pressa bildens kilobytes med bibehållen kvalitet och mått.
- pixlr.com är ett gratis bildredigeringsprogram du kan använda direkt i din webbläsare. Pixlr ger dig möjlighet att webbanpassa dina bilder genom att bland annat styra bildens mått i form av höjd och bredd. Perfekt för dig som verkligen vill ta kontrollen över din webbanpassning.