Hur och varför du ska optimera dina bilder för bildsöket

Bil­der­na utgör en otro­ligt vik­tig del av besö­ka­rens upp­le­vel­se av en webb­plats sam­ti­digt som de gör webb­plat­sen mer lätt­läst och intres­sant. Är bil­der­na dess­utom opti­me­ra­de på ett kor­rekt sätt dri­ver bild­sö­ket den orga­nis­ka trafiken.

Att opti­me­ra bil­der för bild­sö­kets skull är en rela­tivt enkel pro­cess och behö­ver inte ta lång tid. Ändå är det något som ofta glöms bort och leder till att du går mis­te om rele­vant tra­fik. I den­na arti­kel går jag ige­nom de vik­ti­gas­te delar­na vid upp­ladd­ning av bil­der med syf­te att för­bätt­ra din syn­lig­het i bildsöket.

Välj ett relevant filnamn

Fil­nam­net är en kor­ta­re beskriv­ning av vad bil­den visar. Redan innan du lad­dar upp en bild behö­ver du se över bil­dens fil­namn för att säker­stäl­la att det är rele­vant och åter­speg­lar bil­dens innehåll.

Ett van­ligt miss­tag är att inte se över fil­nam­net alls, utan istäl­let ta bil­den direkt från kame­ran med ett namn som ”IMG_​9100”. Det­ta namn säger var­ken besö­ka­re eller sök­mo­tor något och gör det där­för svårt för bil­den att nå bra posi­tio­ner i bild­sö­ket – så det vill vi änd­ra på!

Vad vi behö­ver göra är att änd­ra nam­net på bil­den till de sökord som vi vill att bil­den ska synas på i sökre­sul­ta­tet. Vid namn­giv­ning­en är det vik­tigt att du tän­ker på att sepa­re­ra orden med bin­de­streck istäl­let för att använ­da mel­lanslag eller skri­va ihop orden.

Alt-texten beskriver bilden för sökmotorn

Till skill­nad från fil­nam­net som är en kor­ta­re beskriv­ning av vad bil­den visar, är alt-tex­ten en läng­re alter­na­tiv beskriv­ning av bil­dens information.

Alt-tex­ten är en för­kort­ning av ”alter­na­ti­ve text” och utgör en av de vik­ti­gas­te delar­na när det kom­mer till bil­dop­ti­me­ring. Eftersom sök­mo­to­rer­na än så länge inte kan läsa av inne­hål­let i en bild behö­ver vi använ­da ord som beskri­ver för sök­mo­torn vad bil­den föreställer.

Alt-tex­ten bör vara beskri­van­de och lätt att för­stå sam­ti­digt som den inklu­de­rar rele­van­ta sökord. Men tänk på att tex­ten endast behö­ver använ­das för de bil­der som vi vill ska indexe­ras av sök­mo­to­rer­na. Bil­der på desig­ne­le­ment som exem­pel­vis bak­grun­der kan där­för ignoreras.

Den­na kor­ta­re beskriv­ning av bil­den är inte bara bra för sök­mo­to­rer­na utan blir ock­så syn­lig för använ­da­ren om bil­den av en eller annan anled­ning inte kan visas just då. Alt-tex­ten läses ock­så upp av skärm­lä­sa­re eller and­ra enhe­ter som hjäl­per per­so­ner som har för­säm­rad syn.

Exempel på bildoptimering

För att för­stå hur det häng­er ihop har jag tagit fram tre exem­pel på hur en bild på en kat­tunge kan opti­me­ras för bildsöket.

Först en bild som är dåligt opti­me­rad, som var­ken säger myc­ket för sök­mo­tor eller besö­ka­re med skärmläsare:

<img src="IMG_0003.png" alt=""/>

Sedan en bild som är okej opti­me­rad – viss infor­ma­tion finns men det går att för­bätt­ra ytterligare:

<img src="katt.png" alt="kattunge"/>

Och avslut­nings­vis ett exem­pel på hur en välop­ti­me­rad bild, som ger mer rele­vans för sök­mo­tor och använ­da­re, kan se ut : 

<img src="devon-rex-kattunge.png" alt="Devon rex kattunge sover i fönstret">  

Bildernas laddningstid påverkar webbplatsen

Det är all­tid vik­tigt att strä­va efter en så snabb webb­plats som möj­ligt för en posi­tiv använ­darupp­le­vel­se. Och något som ten­de­rar att avse­värt höja ladd­nings­ti­den är sto­ra och högupp­lös­ta bilder.

Har ni myc­ket bil­der på er webb­plats? Då är det­ta en extra vik­tig punkt. Se till att bil­der­na är kom­pri­me­ra­de så att de inte för­drö­jer webb­plat­sens ladd­nings­tid. En rekom­men­da­tion är att kom­pri­me­ra samt­li­ga bil­der, men att läg­ga fokus på de som är stör­re än 100 kb.

Om ni använ­der Word­press är två popu­lä­ra plu­gins som ni kan använ­da WP Smush Pro och EWWW Image Opti­mi­zer, vil­ka kom­pri­me­rar bil­der­na utan att gå mis­te om kvalité.

Beskär inte bilder med HTML eller CSS

Und­vik att beskä­ra sto­ra bil­der med hjälp av HTML eller CSS attri­but eftersom de gör att den ful­la bil­dens stor­lek häm­tas vid inladd­ning av sidan, vil­ket i sin tur leder till en lång­sam­ma­re laddningstid.

Se där­för till att bil­der­na är i kor­rek­ta mått för sitt ända­mål redan vid uppladdningen.

Vill du läsa mer om ladd­nings­ti­der och hur du kan göra din webb­plats snab­ba­re? I mitt tidi­ga­re inlägg, 5 tips på hur du för­bätt­rar webb­plat­sens ladd­nings­tid, delar jag med mig om just detta.

Webbplatskartor för bilder

En webb­platskar­ta hjäl­per sök­mo­to­rer­na att lät­ta­re för­stå och index­e­ra inne­hål­let på en webb­plats, vil­ket även inklu­de­rar bilderna.

För att hjäl­pa sök­mo­to­rer­na att hit­ta våra bil­der sam­ti­digt som vi ger dem så myc­ket infor­ma­tion som möj­ligt behö­ver vi se till att bil­der­na är inklu­de­ra­de i en webb­platskar­ta anpas­sad för bilder.

Vill du läsa mer om det­ta ämne rekom­men­de­rar jag Goog­les rikt­lin­jer om webb­platskar­tor för bil­der.