10 tips der tager din billedoptimering til helt nye højder

Et billede siger mere end 1.000 ord, og måske derfor glemmer mange ofte at inkludere billedoptimering, som en del af SEO arbejdet.

Problemet er, at søgemaskinerne ikke kan se på et billede og forstå, hvad det forestiller, på samme måde som vi mennesker kan. Dertil er billeder ofte store og tunge filer, som skaber udfordringer i forbindelse med website hastighed.

Er dine billeder derfor ikke optimerede, får du ikke den optimale værdi ud af dem i forhold til rankings i Google.

Billed optimering

 

Flere billeder i SERP’en

Billeder får stadig større bevågenhed i Google, som oftere og oftere viser billeder på søgeresultatsiden (SERP’en). Det giver dig mulighed for opnå synlighed på dine billeder i både Google Image Search og Google Search.

Også i de såkaldte featured snippets ser vi flere og flere billeder. Featured snippets er Googles måde at præsentere svaret på en søgeforespørgsel direkte i søgeresultatet – og ofte i toppen af søgeresultatsiden.

Featured snippets har ofte et billede tilknyttet, som ikke nødvendigvis stammer fra den samme side, hvorfra svaret hentes. Har du optimeret dine billeder, øger du dermed dine chancer for at opnå en rank 0 med et billede.

Læs mere om, hvordan du optimerer mod featured snippets her.

Optimering af billeder = optimering af load speed

Vi ved efterhånden alle, at load speed er en ranking faktor, som har stor betydning for websitets performance i Google. Derudover bliver brugerne mere og mere utålmodige og klikker hurtigt væk, hvis dit website er for langsomt om at loade.

Læs mere om load speed og hvad bare ét sekund kan gøre for din forretning.

Load speed er derfor en vigtig del af SEO arbejdet, og her er billeder et oplagt sted at starte. Billeder har en stor effekt på load speed, og samtidig er det en relativ nem metode til at reducere dit websites hastighed.

Google forstår billeder gennem Machine Learning

Ved hjælp af Machine Learning bliver Google hele tiden bedre til at forstå, hvad billeder forestiller. Et nyt værktøj fra Google giver dig mulighed for at tjekke, hvordan søgemaskinen forstår dine billeder ved hjælp af en simpel drag and drop funktion: https://cloud.google.com/vision/docs/drag-and-drop.

Vi anbefaler dog ikke, at du udelukkende forlader dig på Machine Learning, men at du i stedet følger denne guide, hvor vi giver dig 10 tips, der tager din billedoptimering til helt nye højder.

1. Optimér billedets filnavn

Et optimeret filnavn hjælper søgemaskinerne med at forstå, hvad billedet forestiller og forbedrer ikke kun billedets, men også websitets samlede performance i søgemaskinerne.

Når du skal navngive billedet, skal du være opmærksom på, at…

  • Filnavnet er beskrivende for, hvad billedet forestiller
  • Bruge bindestreg (-) til at adskille ordene i filnavnet
  • Filnavnet ikke indeholder specialtegn eller æ, ø, å

Billedets filnavn bør være så relevant som muligt og skal være beskrivende for, hvad billedet forestiller. Undgå at keyword stuffe filnavnet og hav kun relevante keywords med der, hvor det er relevant og en naturlig del af billedbeskrivelsen. Brug i stedet billedets ALT tag til at relatere billedet til relevante keywords.

Sørg også for at adskille ordene i filnavnet med en bindestreg (-) og ikke underscore (_), da søgemaskinerne ikke forstår betydningen af underscore og vil læse filnavnet som ét langt ord. Undgå også at anvende specialtegn og æ, ø og å i filnavnet.

Tip! Tænk på, hvordan du ville beskrive billedet for en blind og brug dette til at give dit billede et godt filnavn.

2. Skab en god billedfilstruktur på sitet

Det er også væsentligt at skabe en god billedstruktur på sitet, da søgemaskinerne bruger URL-stien til at forstå, hvad billedet forestiller.

Den mappestruktur, du har til websitets billeder i CMS’et, bliver billedets URL. Så på samme måde, som du arbejder med en god URL struktur på sitet, bør du også optimere billedstrukturen.

Billedstrukturen kan følge din URL struktur på sitet, men det vigtigste er, at den er logisk og relevant for billedet.

3. Anvend optimerede ALT-tags

ALT-tagget spiller en vigtig rolle i forhold til at få Google til at forstå, hvad billedet forestiller og dermed rangerer det korrekt.

ALT-tagget bruges ikke kun til at videregive oplysninger til søgemaskiner, men det bruges også, når billedet af tekniske årsager ikke kan vises korrekt i browseren, eller hvis personer med synsnedsættelse besøger hjemmesiden.

Vær derfor opmærksom på følgende, når du udformer ALT-tags:

  • De bør beskrive billedet
  • De bør indeholde relevante keywords
  • De bør ikke være længere end 80 tegn

4. Optimér placeringen af billeder på siden

Ved at placere billeder strategisk på siden, hjælper du også Google med at forstå, hvad billedet forestiller.

Google læser nemlig også den omkringliggende tekst, når indholdet af billedet skal tolkes. Derfor er det væsentligt, at placere billedet i nærheden af tekst, der omhandler det, billedet forestiller.

På den måde skaber du synergi og sammenhæng mellem brødtekst, billedets filnavn og ALT tagget.

5. Brug et billedsitemap

Indeholder dit website mange billeder, som du gerne vil sikre, at Google finder og indekserer, kan du hjælpe det på vej med et sitemap over dine billeder, som angiver placeringen af websitets billeder.

Et billedsitemap garanterer ikke, at Google finder dem, men det giver dig mulighed for at ”fortælle” søgemaskinerne om de billeder på websitet, du ønsker gennemgået og indekseret.

Google har sin egen bot til crawling af billeder, Googlebot Images. En fordel ved at have et billedsitemap er, at du begrænser brugen af Googlebot ved at udnytte Googlebot Images til crawling af billeder, og på den måde udnytte dit crawl budget bedst muligt.

Du kan tilføje billedoplysninger til dit eksisterende sitemap, eller du kan vælge at oprette et separat sitemap til at liste websitets billeder.

Husk at indsætte dit billedsitemap i din robots.txt fil eller indsend det til Google via Google Search Console.

6. Vælg det rette filformat

Der findes flere forskellige filformater til webbilleder, og anvender du dem strategisk på dit website, kan du spare unødvendige kilobytes og forbedre sitets hastighed.

JPEG

JPEG har længe været standardformatet til webbilleder. JPEG-billeder er særlig brugbar til komplekse billeder med mange farver, og kan ofte komprimeres betydeligt uden at gå på kompromis med kvaliteten.

GIF

GIF billeder har en lavere kvalitet end JPEG. Det gør GIF formatet mindre egnet til store og inspirerende billeder, men til gengæld særdeles relevant til de mere forenklede billeder, som ikoner samt 2D figurer og modeller, som kun omfatter få farver.

PNG

PNG-billeder er et populært alternativ til GIF formatet. Fordelen ved PNG er, at formatet understøtter flere farver end GIF, og filtypen anvendes ofte, når der ønskes fritlagte billeder uden baggrund.

WebP

WebP er den nyeste billedstandard til webbilleder og anvender en ny og mere effektiv billedkomprimeringsalgoritme, som gør billeder af typen WebP betydeligt mindre end JPEG og PNG.

WebP er således det billedformat, der giver bedst kvalitet for mindst mulige kilobytes og er derfor et godt valg til dig, der ønsker at reducere load time.

De fleste browsere understøtter WebP, men enkelte, som bl.a. Internet Explorer, understøtter endnu ikke WebP. Vil du være sikker på, at IE brugere også får vist dine WebP billeder, bør de også ligge i et format, som browseren understøtter.

7. Optimér filstørrelsen på billederne

Optimering af filstørrelsen på dine billeder hænger nøje sammen med optimering af load speed. Jo større billedfiler på en given webside, desto længere tid tager det browseren at indlæse den – og du risikerer, at folk mister tålmodigheden og klikker væk igen.

Tommelfingerreglen er her, at billedstørrelsen skal holdes på 100 kb eller derunder. Det gør du ved at komprimere dine billeder, som gør filstørrelsen så lille som muligt, men uden at gå på kompromis med billedkvaliteten.

Mange anvender Photoshop til billedkomprimering, men der findes også andre online og gratis værktøjer, du kan bruge til billedkomprimering, som tinypng.com og compressor.io. Test gerne forskellige niveauer af komprimering af, for at opnå det bedste resultat.

8. Skalering af billeder

De fleste moderne websites er i dag responsive, hvilket er en god løsning til at sikre, at dit website vises optimalt på skærme af forskellig størrelser, som desktop, tablet og smartphones.

Ideen bag responsive billeder er, at der kun skal uploades ét billede til websitet, som så vises i forskellige størrelser afhængig af brugerens viewport. Problemet er dog, at browseren stadig skal downloade hele den oprindelige billedfil, selvom den kun skal bruges i mindre udgave pga. en mindre viewport.

Det er derfor, det er vigtigt, at du ikke uploader et billede, der i højden og bredden ikke er større end den største mulige udgave, der anvendes på websitet. På den måde undgår du, til en vis grad, at browseren skal downloade unødvendige kilobytes.

Skalering via srcset-attributten

En anden metode er at anvende sourceset (srcset) på dine billeder. Fordelen ved srcset-atributten er, at du undgår, at browseren skal downloade det originale billede, hvis kun en lille udgave af det skal bruges.

Srcset anvendes ved, at angive de forskellige udgaver af dit billede, hvad angår størrelse, opløsning og evt. også ratio (højde-bredde forholdet) i kildekoden på alle billederne på dit website.

Her kan det være relevant at angive billedversioner, der imødekommer de mest gængse devices, men fordelen ved srcset er netop, at browseren selv vælger den version, der passer bedst til viewportens størrelse, opløsning og ratio.

Skaleres viewporten op (ved fx at rotere din smartphone), downloades en ny version af billedet, der svarer til de nye forhold, mens ingen yderligere downloads finder sted, hvis viewporten nedskaleres.

Med scrset sikrer du, at besøgende altid får vist det bedst mulige billede i den mindst mulige størrelse og opløsning ud fra brugerens viewport. Og da browseren kun skal downloade den udgave, der anvendes, er der meget at vinde i forhold til load speed.

De fleste moderne browsere understøtter srcset, men anvendes Internet Explorer, som endnu ikke understøtter attributten, vil det originale billede fungere som backup og være det, browseren viser.

9. Lazy load af billeder

Lazy load af billeder er også en metode til optimering af brugeroplevelsen på sitet og den generelle performance, og metoden er særlig relevant til websites med mange billeder.

Lazy load af billeder betyder, at browseren loader billeder på websiden asynkront. Det vil sige, at kun de billeder, der er synlige i viewporten downloades af browseren. Hvis en bruger aldrig scroller videre ned på siden, hentes de billeder, der ligger her, ikke.

Det kan potentielt forbedre dit websites hastighed betydeligt, og samtidig giver det en god brugeroplevelse, da de ikke skal vente på, at hele sidens billeder hentes, hvis de aldrig benyttes.

10. Browsercaching af billeder og CDN’s

Hver gang en browser indlæser en webside, skal den downloade alle filer, der udgør siden. Det er filer som HTML, CSS, JavaScript og billeder.

Browsercaching fungerer ved, at første gang en bruger besøger dit website, kopieres filerne og lagres midlertidigt i browseren. På den måde kan siden hurtigere gengives, næste gang den besøges fra samme browser.

Browsercaching kan anvendes til alle slags filer, men er særlig relevant til billeder, som ofte er relative statiske elementer af dit website. Det kunne fx være dit logo, et baggrundsbillede eller en CTA knap, som også ligger som billedfiler på dit website.

Ved at indstille browsercachingen af billeder efter, hvor ofte de i gennemsnit ændres på websitet, kan du optimere oplevelsen og hastigheden af dit website for genbesøgende og reducerer brugen af båndbredde.

CDN til levering af billeder

Vil du tage din billedcaching endnu videre kan du anvende et CDN (Content Delivery Network) til leveringen af dine billeder.

Et CDN, som også kan benyttes til andre ressourcer end billeder, fungerer ved midlertidigt at lagre kopier af dine billeder på proxyservere, som ofte befinder sig tættere på slutbrugerne end din oprindelig server. På den måde gøres leveringen af billederne hurtigere, da afstanden til serveren bliver reduceret.

En anden fordel ved CDN er, at der kun cachelagres én kopi af billederne på proxyserveren, som bruges til alle besøgende. Derfor optimerer et CDN ikke kun oplevelsen for genbesøgende, som det er tilfældet ved browsercaching, men også nye brugere oplever en forbedring.

Du sikrer periodisk opdatering af billeder gennem serverens caching politik, som angiver, hvor ofte proxyserven skal kommunikere med den oprindelige server og tjekke for opdateringer.

Mens browserens cache kan slettes eller ændres af en bruger og på den måde underkende din caching politik, kontrollerer du fuldstændig selv, hvilke ressourcer eller billeder der skal cachelagres og hvor længe med et CDN.

Start din billedoptimering i dag!

Du burde nu være blevet klogere på metoder til, hvordan du optimerer billeder, så du kan tage din billedoptimering til helt nye højder.

Er det hele stadig lidt uoverskueligt, så tøv ikke med at kontakte Resolution for hjælp og vejledning til, hvordan du håndterer din billedoptimering.