Sökoptimering av bilder är viktigt eftersom det kan få dina inlägg att synas bättre både på Google Sök och Google Bildsök.
Men vad innebär bildoptimering inom SEO egentligen?
Det korta svaret är:
- Hjälp sökmotorer att förstå vad dina bilder illustrerar.
- Låt inte bilder försämra webbsidans laddningstid alltför mycket.
- Optimera med användarvänlighet i fokus.
Därför är sökmotoroptimering av bilder en väsentlig del av den mer heltäckande on page-optimeringen.
Nedan kollar vi mer in på hur du kan du kan uppnå detta med hjälp av 9 konkreta tekniker. Men, först förklarar jag varför bilder är så viktiga på webbplatser.
Bilder förbättrar upplevelsen på webbsidan
För många webbplatser är bilder inte endast ett bra tillägg, men snarare något som besökarna förväntar sig att se när de landar på webbsidan – speciellt på webbshops.
Bilder förbättrar användarupplevelsen bland annat genom att:
- Komplettera texten med visuell information.
- Förbättra webbplatsens utseende/estetik (i vissa fall).
- Agera som bevis för hur produkter ser ut på t.ex. webbshops.
…och som man brukar säga: En bild är värd tusen ord – speciellt om bilderna du visar är beskrivande och lämpliga i det specifika sammanhanget.
Visuell information är alltså guldvärt online! Men när vi kollar på frågan från ett sökmotoroptimeringsperspektiv blir det aningen nördigt eftersom bilderna tekniskt sett ska vara optimerade för sökmotorer.
Nedan kollar vi närmare in på hur denna optimering sker.
Bildoptimering – 9 steg till sökoptimerade bilder
- Relevanta bilder
- Optimal bildstorlek
- Komprimera bilder
- Välj rätt bildformat
- Ta bort metadata
- Att döpa bilder SEO-vänligt
- Alt-text – vad ser du på bilden?
- Placering och användarvänlighet
- Automatiserade lösningar för bildoptimering
1.Relevanta bilder
Först och främst ska du ha relevanta bilder i dina inlägg. Det kanske låter intetsägande, men ibland kan det gå fel.
Så vad är relevanta bilder?
Jag tycker att det är visuell information som gör det lättare och snabbare att förstå budskapet av SEO-texten (brödtexten). Beroende på innehållet kan det alltså vara allt från fotografier till mer beskrivande diagram och infografer.
Exempel:
På en webbshop är det naturligt att du ska ha bilder på produkter du säljer som incitament och bekräftelse. I en guide om hur du ändrar inställningar på WordPress däremot kanske skärmavbilder ger mest värde för besökaren.
2. Optimal bildstorlek
Bilder är bland de tyngsta filerna på webbsidor och kan påverka laddningstiden märkbart. Nästa steg är därför att minska storleken på din bild så att den inte är större än vad som är nödvändigt.
Sträva till att minska bildens storlek så att den inte överstiger den pixelbredd som bilden visas på sidan.
Exempel: Om dina bilder visas max 1000 pixel (px) breda på webbsidan så är det onödigt att ladda bilder som är större än det. Så om du har en bild som är 2591px bred, då lönar det sig att minska den till 1000px innan du laddar upp den på sidan. Då har du redan minskat bilden med omkring 60%!
Hur ändrar man bildstorleken?
Det finns flera bildmanipuleringsverktyg för detta. Photoshop är mitt favoritverktyg när det gäller bildoptimering, men det finns även andra gratisverktyg som du kan göra det med, såsom:
Det finns även automatiserade lösningar för justering av bildstorlek, vilket vi går mer in på i rubrik 9 nedanför.
3. Komprimera bilder
Nästa steg är att komprimera bilden som du har nu minskat i storlek. Bildkomprimering innebär i sin korthet att du “försämrar” bildens kvalitet.
Målet är att du försämrar kvaliteten endast så mycket att den upplevda bildkvaliteten hålls mer eller mindre samma. I många fall kan du tekniskt sett försämra bildkvaliteten mycket innan du faktiskt upplever någon märkbar förändring i upplevd bildkvalitet.
För att exemplifiera detta, jämför de länkade bilderna nedanför:
- Original bild (1.118 kb)
- Komprimerad bild (254 kb)
Ser du stor skillnad? Knappast. Trots att komprimeringen har ”försämrat” kvaliteten med 77% och sparat 864 kb!
Det kommer därmed inte som en överraskning att experterna på Google rekommenderar starkt att vi ska både komprimera och minska storleken på våra bidler.
Hur komprimerar man bilder då?
Själv brukar jag använda “Save for web” funktionen på Photoshop, eftersom jag tycker den ofta ger bästa resultat.
Men det finns även andra användarvänliga komprimeringsverktyg som är gratis och som ger bra resultat, såsom:
4. Bildformat – vilket format är bäst?
Bildformaten påverkar både bildkvalitet och filstorlek, vilket betyder att det har en direkt inverkan på användarupplevelsen och sidans laddningstid.
Så vilken bildformat är den bästa?
Det beror på den specifika bilden/illustrationen du optimerar, men du kan utgå från följande tumregler…
JPEG för fotografier
JPEG filtypen passar bäst för fotografier med många färger och nyanser eftersom de kan med relativt liten filstorlek bevara hög kvalitet. Notera att JPEG inte stöder bilder med transparent bakgrund.
PNG ikoner och grafik
Använd därför PNG-filer främst för grafik, ikoner och liknande illustrationer som är mer “enkla” med tanke på antalet färger och nyanser.
Då kan du utnyttja PNG-filens höga kvalitet samtidigt som du kan bevara relativt liten filstorlek. PNG kan även användas om du behöver transparent bakgrund.
SVG för loggan
SVG är ett vektorgrafik-format som definieras i XML-textfiler. Om du har en SVG-version av din logga kan det vara en god idé att placera den i navigeringsmenyn.
Filtypen går nämligen att skala upp utan kvalitetsförluster, så då hålls loggan alltid skarp och professionell oavsett storleken.
WebP och moderna bildformater
Tanken bakom nya bildfilstyper såsom WebP (utvecklat av Google) är att de kan bevara hög kvalitet i mindre filstorlekar jämfört med traditionella JPEG-filer.
Så varför inte helt enkelt köra WebP överallt på din webbplats?
Problemet är att de moderna bildformaterna stöds inte av alla webbläsare. Det i sin tur riskerar att vissa besökare inte ser dina bilder. Därför lönar det sig att använda moderna formater endast i kombination med dynamiska lösningar som presenteras under rubrik 9 nedanför.
5. Ta bort metadata från bilder
Bilder har oftast någon form av metadata. Det kan vara kamerainformation, GPS information eller någon annat osynlig data som endast hittas när man inspekterar bilden.
Om du inte behöver denna information så kan du lika väl bli av med den – så sparar du några ytterligare kilobytes!
Imageoptim är väldigt användarvänligt och effektivt verktyg för just detta ändamål. Tyvärr stöds programmet endast av Mac. Liksom TinyPNG är det ett simpelt drag & drop verktyg som optimerar bilden blixtsnabbt, utan att försämra kvaliteten.
[Bild]
Nu har du bilderna optimerade och redo för att publiceras på webbplatsen, utan att försämra på hemsidans snabbhet!
6. Filnamn och URL – att döpa bilder SEO-vänligt
Nästa stegen handlar om att göra bilderna mer begripliga för sökmotorer. Börja med att döpa bilderna (filnamn) så att de är beskrivande, innehåller nyckelord och att de inte innehåller onödiga tecken.
Kolla på bilden nedanför som exempel:
En beskrivande URL (och filnamn) kunde vara t.ex.:
exempel.se/images/nike-sneaker-vit-svart-röd
…istället för exempelvis:
exempel.se/images/produkt-9800967
…vilket man ännu ser väldigt ofta på flera webbshops.
Första alternativet beskriver produkten mer specifikt än det andra. Det blir alltså lättare för sökmotorn att avgöra vad bilden illustrerar, om någon söker produkten med sökmotorn.
Exemplet kan förmodligen förbättras med mer specifik modellbeskrivning, eller t.ex. genom att specificera typ av sneaker (high tops).
Huvudsaken är att bildens URLen är unikt, beskrivande och innehåller relevanta nyckelord med tanke på din SEO-strategi.
7. Alt-text – för att beskriva vad bilden illustrerar
När du har bilden uppladdad i ditt CMS-system är nästa steget att optimera alt-texten för bilderna i dina inlägg. Alt-text, eller alternativ text, är en html-kod som används för att beskriva bildens innehåll.
I skärmdumpen nedanför ser du både hur bildfilen och alt-texten ser ut när du inspekterar bildens html-kod.
Bland annat Google använder Alt-taggen som den primära taggen för att förstå vad bilder illustrerar. Det är därmed ytterst viktigt att du optimerar dina alt-texter både för att:
- sporra din on-page optimering, och
- öka sannolikheten att dina bilder syns i bildsök.
Så skriver du en bra alt-text
Skriv en kort och koncis beskrivning på vad du ser på bilden, helst i en mening. Inkludera även relevanta nyckelord om de faller in naturligt i beskrivningen.
Det är viktigt att du skriver naturliga texter i dina alt-taggar, eftersom de inte endast används för att hjälpa sökmotorer att förstå bildens innehåll. Den används även för att hjälpa personer med funktionshinder, till exempel blinda, att förstå vad bilderna på sidan illustrerar.
8. Placera bilder där de ger mest nytta
Tänk på placeringen av dina bilder för att förbättra användarvänligheten. Placera dem där var de ger mest nytta för läsaren och stöder brödtexten.
Tänk också på att innehållet ska möjliggöra content-scanning, dvs. att det går enkelt att ögna igenom texten och ändå få ut den viktigaste informationen. Bilder i kombination med rubriker och andra framträdande typsnitt kan hjälpa dig att uppnå detta.
Går dina inlägg att ögna igenom? Testa själv!
Välj ett av dina inlägg du vill testa. Skrolla sedan ner i en takt så att du hinner endast läsa allt innehåll som står ut ur mängden.
Typiska utstickande element är:
- Rubriker, fetmarkeringar, avvikande färger i texten osv.
- Bilder och illustrationer som bryter texten.
- Tabeller, punklistor och så vidare.
Tanken är att du ska kunna snabbt uppfatta vad innehållet handlar om utan att behöva läsa texten ord för ord.
Men varför göra detta? Folk läser ju…
Nej, vissa läser och andra “skannar”. Många webbsurfare har inte tålamod att läsa allt ord för ord, så se till att ditt innehåll fungerar för olika typer av webbsurfare. Detta är även viktigt när du konverteringsoptimerar webbsidan.
9. Automatiserade lösningar för bildoptimering
Bildoptiomering i SEO syfte innefattar alltså flera steg och kan därmed vara tidskrävande. Om du vill bli av med arbetsbördan men ändå optimera dina bilder så bra som möjligt, då rekommenderar jag att kolla in eventuella tekniska lösningar för att ta hand om optimeringen. I detta fall kanske du måste vara färdig att betala för vissa tjänster.
Lazy loading
Lazy loading är en smart teknisk lösning som ser till att bilder endast laddas då det finns behov för det.
Tänk ett inlägg med tiotal tunga bilder långt nere på sidan. Då är det onödigt att låta dessa bilder, som inte är synliga för besökaren direkt när de landar på sidan, att påverka laddningstiden på det innehåll som besökarna faktiskt ser längst upp på sidan.
Lazy loading ser alltså till att bildfilerna längre ner på sidan laddas först när besökaren har skrollat fram till dem.
Med tanke på att bilder är bland de tyngsta filerna på webbplatser så kan lazy loading ha en märkbar effekt på webbsidans snabbhet och användarupplevelsen.
Bilden nedan är från Google och exemplifierar hur lazy loading fungerar på Mediums hemsida. Läs mer på Google Developers.
Automatisk justering av bildstorlek
En annan smart lösning är att låta systemet automatiskt justera storleken på dina bilder.
Så istället för att du ska själv ändra storleken på bilderna för varje inlägg, kan du ladda en stor bild och systemet sköter om resten. Du bestämmer endast hur stor bilden ska vara i de olika sektionerna på din webbplats, och systemet minskar storleken automatiskt.
En lösning som denna är ett mycket bra sätt att garantera hög bildkvalitet oavsett skärmstorlek, samt ett sätt att garantera att för stora bildfiler inte laddas på sidan.
CDN
Att leverera dina bilder via en CDN (Content Delivery Network) till webbplatsen kan göra dina sidor snabbare och på så vis förbättra upplevelser. Det går i princip ut på att dina bilder finns på en skild snabb server där bilderna laddas från. Så det blir aningen mindre belastning på din primära server.
Speciellt om du har en global webbplats med många bilder är CDN ett mycket effektivt bildhanteringssystem. Många CDN leverantörer har nämligen servrar utspridda över världen vilket gör att de är alltid inom kort räckvidd från användarna och kan därmed erbjuda snabba laddningstider.
Välj bildformat automatiskt baserat på besökarens webbläsare
Som konstaterat finns moderna och snabba bildformater som i dagens läge inte stöds av alla webbläsare. Om du vill gå all-in så kan du automatisera denna process så att moderna bildformater används alltid då webbläsaren stöder dem.
Exempel: Första besökaren använder Google Chrome, så bilderna laddas i de snabba WebP formatet. Andra besökaren använder Internet Explorer som inte stöder WebP, så bilderna laddas i traditionella bildformat.
Dessa lösningar är dock aningen avancerade och ses främst bland större företag.
Tjänsteleverantörer som Cloudinary kan erbjuda just denna typ av lösningar med CDN och bildoptimering inkluderat, vilket kan vara värt pengarna.
Hoppas dessa tips hjälper dig i traven. Läs mer om hur du kan identifiera tunga bildfiler genom SEO-analys (rubrik 5).
Vi ses på Google! 🙂