Bildoptimering

Konsten att optimera bilder för sökmotorer

Bilder får en text att kännas mer levande, men sökmotorerna kan ännu inte förstå innehållet i bilder på webben – även om de ständigt utvecklas och blir allt bättre på det – därför behöver vi hjälpa dem på traven genom bildoptimering.

Men när du ska optimera bilder för en sökmotor är det några saker du bör tänka på. Vi går igenom dem här:

Så här lyckas du med bildoptimeringen

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).

JPEG

PNG

GIF

JPEG/JPG (Joint Photographic Experts Group)

JPEG (också JPG) är troligtvis det vanligaste bildformatet som används på webben. Formatet är mycket kompatibelt och har en liten filstorlek med mycket liten kvalitetsförlust.

JPEG-bilder sparas med förlustkomprimering, så du kan alltid räkna med lite sämre kvalitet när du använder det här formatet.

Du bör helst inte använda JPEG till loggor eller grafiska element, då komprimeringen kan få dem att kännas kantiga och se pixliga ut.

Fördel: Mångsidig, liten filstorlek.

Nackdel : Förlorar detaljer.

Använd till : Färgglada, detaljlösa bilder.

PNG (Portable Network Graphics)

PNG använder förlustfri komprimering och liknar på många sätt GIF-filer. PNG-formatet skapades som ett öppet format för att ersätta GIF-formatet, men har till skillnad från GIF ett komplett färgutbud och bättre komprimering. PNG är det mest använda förlustfria bildkomprimeringsformatet för webben.

Till bilder är PNG inte alls lika bra som JPEG, eftersom det skapar en större fil.

PNG är det bästa formatet för skärmdumpar. De flesta datorer sparar skärmdumpar automatiskt som en PNG, eftersom de flesta skärmdumpar är en blandning av bild och text.

Fördel: Mångsidig, stödjer transparent bakgrund.

Nackdel : Större filstorlek.

Använd till : Grafiska element, exempelvis loggor.

GIF (Graphics Interchange Format)

GIF-formatet använder förlustfri komprimering, vilket innebär att du kan spara en bild flera gånger utan att förlora någon data. Formatet stödjer max 256 färger.

En unik egenskap för GIF-formatet är dess förmåga att animeras. En massa bilder kan ”spelas upp” en efter en för att ge animerade och rörliga bilder.

GIF-formatet är perfekt för begränsade färgbilder i små storlekar. Bilder och fullfärgbilder som sparas i GIF-format ger hög komprimering med märkbart sämre kvalitet.

Fördel: Små filstorlekar, animation.

Nackdel : Sämre kvalitet.

Använd till : Ikoner, loggor eller andra små, enkla bilder.

via GIPHY

WebP

WebP (uttalas ”Weppy”) är ett nytt, modernt bildformat som har utvecklats av Google. Formatet är speciellt framtaget för att användas på webben.

WebP förenar de bästa delarna av det förlustfria PNG-formatet och förlustkomprimeringsformatet JPEG, och gör dessa tillgängliga i en kompakt fil. Detta skalar ner filstorleken rejält och behåller samtidigt originalbildens kvalitet.

Bilder i WebP är 26% mindre jämfört med PNG och 25–34% mindre än jämförbara JPEG-bilder med motsvarande kvalitet.

WebP kan användas på genomskinliga och grafiska bilder, och låter användaren justera komprimeringen för att göra en avvägning mellan bildkvalitet och filstorlek.

WebP stöds i dagsläget inte av alla webbläsare (exempelvis Safari), men är under utveckling.

Fördel: Mångsidig, mindre filstorlek, bilder av bra kvalitet.

Nackdel : Stöds inte av alla webbläsare i dagsläget, är under utveckling, behöver backupbilder.

Använd till : Nästan allt!

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.

Orginal

W:420px | H:280px | Size:105KB

Komprimerad

W:420px | H:280px | Size:67KB

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="paj.png" alt="vegansk paj med broccoli och spenat vegansk paj med broccoli vegansk paj med spenat paj vegansk vegansk paj recept">                    
                    

Okej

                        
                           <img src="paj.png" alt="vegansk-paj">
                        
                    

Bättre

                        
                            <img src="paj.png" alt="vegansk paj med broccoli och spenat">
                        
                    

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.

Eiffeltornet i Paris
Varför är bildtexten viktig för SEO?

Bildtexten är viktig eftersom besökaren använder den för att skanna av hemsidan, artikeln eller vad det nu kan vara. Vi människor har nämligen en tendens att skanna av rubriker, bilder och bildtexter när vi skummar igenom en hemsida.

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!