Bildoptimering

1. Välj relevanta bilder till sidans innehåll

Det är viktigt att du väljer bilder som är relevanta till texten på din sida, både för läsbarheten och sökoptimeringens skull. Det är med hjälp av texten som sökmotorerna kan förstå vad din bild föreställer.

Kom ihåg att ju mer kringliggande, relevant information du har runt en bild, desto lättare kan sökmotorerna förstå vad bilden föreställer.

2. Välj rätt bildformat: JPEG, GIF, PNG, WebP?

Det är extremt viktigt att din hemsida laddar snabbt, och bilderna på sidan är ofta en vanlig orsak till att en sida laddar långsamt. Därför gäller det att välja rätt bildformat.

Ju snabbare sida, desto enklare är det för sökmotorerna att indexera den (och för användarna att besöka den).

Så här väljer du rätt bildformat

När det kommer till bilder finns det inget format som är rätt för alla. Vilket bildformat du bör välja beror på vad för typ av bild det är och hur du vill använda den.

Vi rekommenderar att välja…

... JPEG för större bilder. Du får en bra bild i relativt liten filstorlek.

... PNG när du vill använda en genomskinlig bakgrund eller när det är en enkel grafik med några enstaka färger, till exempel i en logotyp.

... GIF när du vill göra animationer.

... WebP när du vill göra allt (i vissa webbläsare).

3. Bild- och filstorlek

Vi har redan varit inne på det lite, men det tål att nämnas igen: När en besökare kommer in på din sida kan det ta en stund innan sidan har laddat klart, bland annat beroende på hur stora dina filer är. Tar det lång tid för sidan att ladda kan du inte förvänta dig att besökarna stannar.

Men om du optimerar bildernas fil- och bildstorlek kommer hemsidans hastighet öka och färre besökare kommer troligtvis att lämna din sida

Bildstorlek

Du bör optimera bildernas bildstorlek, alltså den fysiska storleken på bilden, till exempel 200x300 pixlar. Ju större bilder, desto längre tid tar det för sidan att ladda.

Din bild bör inte vara större än den storlek som den visas i på webben. Ska din bild visas i ett 200x200 pixelformat på hemsidan, bör den inte vara större än så i verkligheten. Ladda upp bilden i rätt pixelstorlek från början, så slipper du använda CSS-kod för att skala ner bilden.

Vilken bildstorlek bör man ha?

Under 70 kb brukar vara en tumregel för bilder inom e-handel. Det kan dock vara svårt ibland, speciellt med större bilder.

Filstorlek

Du bör även optimera bildernas filstorlek, då bilder med stora filstorlekar kan försämra din hemsidas hastighet och därmed även användarvänligheten. Därför bör du vara lite försiktig med de högupplösta bilderna och gärna komprimera bildernas filstorlek.

Kolla upp de högupplösta bildernas filstorlek. Använd gärna ett verktyg som minimerar filstorlekarna.

Vad kan man göra?

- När du beskurit bilderna till rätt mått (läs mer ovan om bildstorlek) kan du optimera filstorleken. Använd verktyg som exempelvis tinypng.com, som reducerar bildens filstorlek utan att ändra bildens faktiska storlek. Bildstorleken är alltså fortfarande 200x200 pixlar, men istället för en filstorlek på 500 kb reduceras den till 70 kb.

- Bilder som skapar enkla mönster kan du göra till GIF eller PNG-8. Du kan skapa bra bilder som bara är några hundra kilobyte i storlek.

- Försök att göra så mycket som möjligt i hemsidans CSS-kod. Istället för att använda detaljerade bilder för att skapa färgglada detaljer kan du skapa dessa i CSSen, i den mån det går.

- Har din hemsida en stor bakgrundsbild? Denna fil är med stor sannolikhet enorm. Försök skala ner bildfilen så mycket som möjligt utan att tumma på bildkvaliteten.

4. Välj rätt filnamn: Filnamnet bör innehålla ditt huvudsökord

Du vill att sökmotorn ska förstå vad bilden innehåller utan att ens titta på den – därför bör du försöka få med ditt huvudsökord i filnamnet.

Detta är egentligen ganska enkelt. Fundera på hur dina besökare söker efter dina tjänster/produkter på hemsidan och anpassa filnamnet efter detta.

Exempel:
Om din bild föreställer en vegansk paj bör filnamnet vara vegansk-paj.jpg och inte DSC4536.jpg.

vegansk-paj.jpg
DSC4536.jpg

Hur gör man om man har en hel fras?

Har du en längre fras som sökord bör du försöka få med huvudsökordet så tidigt som möjligt i filnamnet.

Visar din bild en soluppgång i Paris vid Eiffeltornet bör filnamnet vara eiffeltornet-paris-soluppgång.jpg. Huvudsökordet bör vara Eiffeltornet, eftersom det är huvudobjektet i bilden, och bör därför finnas med i början av filnamnet.

5. Använd alt-texter på alla bilder

Alt-text (eller alt-tagg), som betyder alternativ text, används för att beskriva vad en bild föreställer om bilden av någon anledning inte kan visas för besökaren. Det kan exempelvis hända om besökaren stängt av bilder i sin webbläsare.

Se till att…
… Försöka ha en alt-text på varje bild du använder.

… Ditt huvudsökord finns med i alt-texten (om det är passande), men spamma inte!

… Beskriva vad bilden föreställer och försök vara så beskrivande som möjligt, så både besökare och sökmotorer kan förstå.

Alt-textens do’s and don’ts

Att skriva en bra alt-text handlar om att hitta balansen mellan att vara tillräckligt beskrivande utan att överdriva. Här har vi tagit fram några exempel:

Dålig

                        
                            <img src="Pizza" alt="">                    
                    

Okej

                        
                           <img src=" Nygräddad pizza med grönkål och grönmögelost på mindre än 15 min" alt="">
                        
                    

Bättre

                        
                            <img src="Pizza med grönkål och grönmögelost" alt="">
                        
                    

6. Captions (bildtext)

Det är också viktigt att ha en bra bildtext, det vill säga den text du oftast brukar se under eller i närheten av själva bilden. I bildtexten kan du förklara vad bilden visar, exempelvis:Eiffeltornet i Paris.

7. Använd sitemap över dina bilder

Använder du JavaScript, pop-up eller andra flashiga inslag på din hemsida, kan en sitemap / webbplatskarta över dina bilder hjälpa dig att upptäckas av sökmotorn.

Sökmotorerna kan nämligen inte hitta bilder som inte finns med i hemsidans källkod. För att sökmotorerna ska ha en chans att hitta dina bilder bör du alltså visa upp dem i din sitemap.

Så här hjälper du sökmotorn att hitta din sitemap:

Det finns två olika sätt att hjälpa sökmotorn att hitta din sitemap.

1. Genom robots.txt
2. Att du manuellt skickar in det i Search Console.

Exempel på hur man gör detta i robots.txt (om filen för sitemapen är sitemap_images.xml).

Lägg till:
User-Agent: *

Sitemap:
https://exempel.se/sitemap_images.xml

Här kan du se ett exempel på hur en sitemap kan se ut:

                        
                            <?xml version="1.0" encoding="UTF-8"?>
                            <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9/"
                            xmlns:image="https://www.google.com/schemas/sitemap-image/1.1/">
                            <url>
                            <loc>https://example.com/sample.html</loc>
                            <image:image>
                            <image:loc>https://example.com/image.jpg</image:loc>
                            </image:image>
                            <image:image>
                            <image:loc>https://example.com/photo.jpg</image:loc>
                            </image:image>
                            </url>
                            </urlset>

                        
                    

Kom ihåg att en sitemap inte garanterar att dina bilder upptäcks av sökmotorerna, men det kan vara en av flera avgörande faktorer.

Sammanfattning

• Välj bilder med relevans till innehållet.
• Välj rätt bildformat: JPEG för större bilder, GIF för rörligt, PNG för enklare grafik och WebP till allt – men enbart i vissa läsare. WebP stödjs exempelvis inte av webbläsaren Safari i dagsläget när denna artikel skrivs.
• Försök skala ner bildstorlekarna på dina bilder.
• Försök ha med ditt huvudsökord i filnamnet och gärna så tidigt som möjligt.
• Använd gärna beskrivande alt-texter på alla dina bilder. Försök få med ditt huvudsökord och undvik att spamma.
• Beskriv gärna bilder med captions (bildtext) när det är möjligt.
• Visa gärna sökmotorerna dina bilder i en sitemap.
• Optimera filstorleken på dina bilder, exempelvis i tinypng.com.

Lycka till med bildoptimeringen!