Hur du SEO anpassar dina bilder för användarna och sökmotorer som Google

Hur optimerar man bilder på Google?

Att synas på Google med bilder har under åren blivit ett smart sätt att få ökad synlighet och trafik till sin webbplats. Men det är fortfarande många som gör enkla misstag i bildsöket. Affärsnyttan med bilder handlar om betydligt mer än att lägga till alt-och något som många undervärderar betydelsen av och missar i sin marknadsföring. Bilder kan leda till förbättrad SEO, konverteringar och i slutändan fler kunder.

Använd rätt bildstorlek

Att använda rätt bildstorlek är viktigt så de blir mindre i storlek. Att ha för stora bilder kan öka sidans laddningstid, medan mindre format kan göra att de ser suddiga ut. Du bör använda en bildredigeringsprogramvara som Photoshop för att justera storleken på så att de passar perfekt på din webbplats.

Komprimera bildernas storlek

Att komprimera bilderna på sin webbplats är en av de största förbättringsmöjligheterna som många slarvar med på sina webbplatser, särskilt för mobilen. Att ha för stora bildfiler kan påverka din webbplatsens prestanda negativt och göra att sidan laddas långsammare. Vi har vant oss med snabba bredband där vi kan använda stora bilder för desktop användare. Men om du använder stora bilder på din webbplats kommer det ta längre tid för mobila användare att ladda sidan. Just snabbheten är några av de saker Google tar hänsyn till när den rankar din webbplats i framförallt mobilsöket.

De flesta komprimerar nog direkt från verktyg som Photoshop men det finns verktyg som komprimerar bilder innan du lägger upp dem som ImageOptim för Mac. Du kan använda en onlinetjänst som TinyPNG för att minska bildstorleken utan att förlora för mycket kvalitet eller använda ett plugin till WordPress som hjälper dig komprimera bilderna exempelvis Smush, WP Optimize och Siteground Optimizer.

Vilket bildformat ska du använda?

Välj rätt bildformat
Se till att välja rätt bildformat. JPEG, PNG och GIF har traditionellt varit de vanligaste formaten som används för webbplatser.PNG är bäst för bilder med mindre färger eller med transparent bakgrund och GIF är bäst för enkla animationer. Nya bildformat som börjat slå igenom är WebP, AVIF och APNG.

De vanligaste bildformaten är PNG, JPG, WebP och SVG.

JPEG-filer är ett bra val för både utskrifts- och webb. innehåll. JPEG är det bästa valet för fotografier eller bilder med många färger, Den här typen av bildfil använder något som kallas ett ”förstörande” format. Det innebär att när en större bild konverteras till en JPEG går en del av informationen i filen förlorad. Att konvertera till JPEG resulterar i en mindre filstorlek, men det kan finnas vissa uppoffringar i bildkvalitet. Det finns också nya format som JPEG 2000, JPEG XR

PNG-filer är också användbara för webben men eftersom PNG-filer kan ha transparenta bakgrunder är de mer mångsidiga och praktiska för webbgrafik och ikoner. Filformatet är pixelbaserat och all information om bilden behålls när filen komprimeras. Det innebär att det finns en gräns hur stor du kan göra bilderna tills du ser pixlarna. Men om png-filen är för stor kommer att sakta ner din hemsida PNG bilder håller ofta högre kvalitet, men erbjuder en mindre förbättring av filstorlekar och sidhastigheter. De är ett bra alternativ för grafik och ikoner och mycket högkvalitativa bilder.

WebP är ett bildfilformat som utvecklades av Google som ett alternativ till  JPEG och PNG. WebP är utformat för att ge hög bildkvalitet med mindre filstorlekar, vilket kan göra webbsidor snabbare att ladda eftersom mindre data behöver överföras över nätverket. WebP är en förlustkomprimeringsalgoritm som fungerar genom att ta bort viss information från bilden som inte är särskilt viktig för mänsklig uppfattning av bilden. Detta gör det möjligt att få mindre filstorlekar utan att försämra bildkvaliteten alltför mycket.  Det finns stöd i många webbläsare som Google Chrome, Firefox och Microsoft Edge, och det finns också verktyg som gör det möjligt att konvertera befintliga bilder till WebP-format.

SVG
Filerna fungerar samma som png-filer och du kan använda en genomskinlig bakgrunden men filen är vektorbaserad (samma som Illustrator), vilket innebär att du kan göra logotypen mycket stor och det kommer att beräkna förhållandet så bilden exempelvis en logotype alltid ser skarp ut.

ESP
Precis som SVG: s är ESP vektorbaserat och kan användas i Illustrator eller Sketch.

Många bildfiler skapas i verktyg som Photoshop och Illustrator men också i Sketch. Vill du ha ett gratis program som alternativ till Photoshop finns Photopea.

Lazy load

Det kan ta tid innan en sida och bilderna visas vilket är något som går att förbättra med lazy load teknik. Den instruerar din webbplats på att först läsa in text, bilder och andra element som är omedelbart synliga. Först därefter börjar den läsa in innehåll som bara är synligt genom att rulla nedåt på sidan. Lazy load är ett bra sätt att snabba upp din webbplats och förbättra dina besökares upplevelse.

Det finns plugin som Lazy Load som hjälper till att fixa det.

Använd en CDN

Att använda en Content Delivery Network (CDN) kan hjälpa till att optimera dina bilder så de laddas snabbare. En CDN kan hjälpa till att leverera filerna snabbare till användare runt om i världen genom att placera kopior på servrar närmare dina användare.

Verktyg som hjälper dig med att optimera

Genom verktyg som Screaming Frog hittar du lätt de största bilderna. Du kan också köra en Google Page Insight mot sajten, eller identifera långsamma sidor med Google Analytics. Ett lättanvänt verktyg för att optimera bilder är TinyPNG.

Plugins i WordPress

Det finns en mängd olika plugins i WordPress för att snabba upp bilder:

• Smush som används för att komprimera bilder.
• ShortPixel Image Optimizer -komprimerar bilder och PDF:er i media katalogen
• TinyCompress images använder TinyPNG-tjänsten
• Ewww image optimizer
• Kraken image optimizer

Skapa infografiska bilder

Att skapa en infografik kan vara en bra sätt att visualisera information och göra den lättare att förstå för målgruppen. Det finns  flera verktyg för att skapa infografiska bilder som:

1. Piktochart – ett verktyg med många olika teman och designelement att välja mellan.
2. Snappa
3. Infogram– ett verktyg med många olika teman och designelement, samt möjlighet att lägga till interaktiva element i infografiken. 
4. Freepic
5. Canva – Ett enkelt och intuitivt verktyg med många färdiga mallar och designfunktioner.
6. Venngage
7. Visme
8. Adobe Creative Cloud Express
9. Adobe Illustrator – kostar pengar man väldigt populärt bland designers med många avancerade funktioner.

Olika tjänster som använder bildsöket

Google Images är en söktjänst som ägs av Google och som gör det möjligt för användare att söka efter bildinnehåll. Bildsöket infördes den 12 juli 2001 på grund av en efterfrågan på bilder av Jennifer Lopez gröna Versace klänning på catwalken som den vanliga Google-sökningen inte kunde hantera.

Utöver Google images finns det andra tjänster som använder bildsöket som

• Google Cloud Vision
• Bing Visual Search
• IBM Watson Image recogntion
• Amazon Recognition
• Amazon Web services DeepLens
• Amazon Web services visual search code
• Perficient Digital Smart Images Evaluator
• Facebook
• Youtube
• Duckduckgo

Vad kan du göra för att få bättre synlighet på Google för dina bilder?

• Se till att bilderna går snabbt att ladda ner
• Använd stora bilder som gärna är 1200 pixlar breda
• Använd alt beskrivningar
• Döp filnamnet till beskrivande namn och det som du vill synas på. Tänk på vad webbsidan ska handla om och ha en unik bild utifrån det begreppet. Att använda relevanta sökord i dessa beskrivningar kan också hjälpa till att förbättra din ranking på Google.
• Du kan lägga till en sajtkarta för bilder
• Google rekommenderar WebP för att öka upp hastigheten
• Använd caption
• Använd image description om du har bild gallerier
• Använd XML sitemaps för bilder
• Se till att texten runt bilden är i samklang med det som bilden vill säga
• Använd AMP
• Se till att bilderna går att crawla från Google roboten
• Läs mer om Googles bildsök och att söka med en bild på Google