Optimera bilder för sökmotorer – så förbättrar vi fart, tillgänglighet och synlighet

Varför bildoptimering spelar större roll än många tror

Bilder gör en sida tydligare, mer engagerande och lättare att ta till sig.

Men om de är för tunga, fel namngivna eller saknar beskrivningar kan de istället bromsa sidan. De kan också göra innehållet svårare för både användare och sökmotorer att förstå.

När vi optimerar bilder handlar det därför om tre saker samtidigt:

• snabbare laddningstid
• bättre tillgänglighet
• starkare synlighet i sökresultat

Det här är inte bara en teknisk detalj. Det påverkar hur sidan upplevs i praktiken.

En bra bild ska hjälpa innehållet framåt – inte sakta ner sidan eller skapa oklarhet för sökmotorer.

Vill du se hur bildoptimering hänger ihop med resten av webbplatsen? Läs mer om teknisk SEO och vårt arbetssätt inom SEO.

Börja med rätt storlek och rimlig filvikt

Det vanligaste felet vi ser är att bilder laddas upp i mycket större storlek än vad sidan faktiskt visar.

Om en bild visas i 1200 pixlars bredd finns det sällan anledning att ladda upp en version som är 4000 pixlar bred. Det skapar onödigt tunga filer och längre laddtid.

Det vi alltid ser över först

1. Visningsstorlek på sidan
2. Pixelmått före uppladdning
3. Komprimering utan tydlig kvalitetsförlust
4. Antal bilder på samma sida

Det talas ibland om DPI, men för webben är det framför allt bildens pixelmått och filstorlek som spelar roll. DPI är i praktiken mer relevant för tryck än för skärm.

Praktisk tumregel

För en vanlig innehållsbild i en artikel räcker det ofta långt med rätt bredd och bra komprimering. Vi tjänar sällan något på att ladda upp originalfiler direkt från kamera eller mobil.

Välj format efter bildens innehåll

Olika bildformat passar olika bra beroende på motiv och användning. Här finns ofta mycket att vinna, både i laddtid och bildkvalitet.

Format	Passar bäst för	Fördelar	Att tänka på
JPEG/JPG	Fotografier och detaljrika bilder	Bra balans mellan kvalitet och filstorlek	Klarar inte transparens
PNG	Grafik, skärmdumpar och bilder med transparens	Skarp återgivning och stöd för transparent bakgrund	Ofta tyngre än JPEG och WebP
WebP	De flesta webb-bilder	Mycket bra komprimering med bibehållen kvalitet	Kräver stöd i arbetsflöde och publiceringsmiljö
SVG	Logotyper, ikoner och enkel vektorgrafik	Skalar utan kvalitetsförlust och är ofta mycket lätt	Passar inte för fotografier

Vår enkla grundregel

• använd JPEG för foton
• använd PNG när transparens behövs
• använd WebP när webbplatsen stödjer det
• använd SVG för logotyper och ikoner

Har du en WordPress-webbplats? Då kan det vara klokt att kombinera rätt bildformat med löpande webbunderhåll så att nya bilder inte gradvis drar ner prestandan.

Skriv alt-text som faktiskt hjälper

Alt-text är den text som beskriver en bild när den inte kan visas eller när någon använder skärmläsare. Den hjälper också sökmotorer att förstå vad bilden föreställer och vilken roll den har på sidan.

Det viktiga är att skriva naturligt och konkret.

Bra alt-text är

• kort och tydlig
• relevant för sidans innehåll
• beskrivande utan att bli överlastad
• anpassad efter bildens funktion

Exempel på mindre bra och bättre alt-text

Dåligt: seo bild google webbplats sökmotor optimering bildoptimering

Det blir mest en rad sökord och hjälper varken användare eller sökmotorer särskilt mycket.

Bättre: Marknadsförare komprimerar bilder inför publicering på en företagswebbplats

Här får vi en begriplig beskrivning med tydlig koppling till ämnet.

När kan alt-text vara tom?

Om bilden är rent dekorativ och inte tillför någon information kan en tom alt-text vara rätt val. Då slipper skärmläsare läsa upp sådant som inte hjälper användaren vidare.

Filnamn, bildtexter och omgivande innehåll stärker relevansen

En bild förstås inte isolerat. Sökmotorer väger också in sammanhanget runt omkring.

Det betyder att flera små signaler tillsammans gör skillnad:

• filnamn
• rubriker nära bilden
• bildtext
• brödtext runt bilden
• sidans övergripande ämne

Namnge filer tydligt

Istället för ett filnamn som IMG_4821.jpg är det bättre med något som optimera-bilder-seo.webp.

Det behöver inte vara perfekt, men det ska ge en rimlig ledtråd om innehållet.

Bildtext när den tillför värde

En bildtext är inte alltid nödvändig, men den kan vara användbar när bilden behöver förklaras eller när du vill förstärka en poäng i texten.

Om du arbetar med innehåll i större skala kan det här med fördel ingå i en tydligare innehållsstrategi för SEO, där bild och text samspelar bättre.

Hjälp sökmotorer att indexera bilder rätt

För att bilder ska ha en chans att synas i bildsök och bidra till sidans synlighet behöver sökmotorer kunna hitta och tolka dem utan friktion.

Det vi brukar säkerställa

1. Beskrivande filnamn
2. Relevant alt-text
3. Bilder placerade nära rätt innehåll
4. Snabb åtkomst till bildfiler
5. Bildsitemap vid behov
6. Strukturerad data där det är motiverat

Strukturerad data kan ge extra sammanhang, särskilt på sidor där bilder har en tydlig funktion. Det gäller till exempel produkter, recept, artiklar eller organisationer.

Det betyder inte att alla webbplatser måste märka upp varje bild i detalj. Men på rätt sidor kan det hjälpa sökmotorer att förstå innehållet bättre.

Snabbare sidor med lazy loading och smart leverans

Bildoptimering handlar inte bara om själva filen. Det handlar också om när och hur bilden laddas.

Lazy loading

Lazy loading innebär att bilder längre ner på sidan laddas först när användaren närmar sig dem. Det minskar den initiala belastningen och gör att sidan kan visas snabbare.

Det här är särskilt användbart på:

• långa artikelsidor
• kategorisidor med många bilder
• startsidor med flera sektioner
• produktsidor och inspirationsflöden

Men allt ska inte laddas sent

Bilder högst upp på sidan, särskilt huvudbilden, bör ofta laddas direkt. Annars riskerar den viktigaste delen av sidan att upplevas som seg.

Här gäller det att prioritera det viktigaste innehållet först och låta resten laddas när det behövs.

Checklista och vanliga misstag inför publicering

För att göra arbetet mer konsekvent brukar vi utgå från en enkel kontrollista.

Kontrollera detta innan bilden publiceras

• är bilden beskuren till rätt storlek?
• är filformatet rätt för motivet?
• är filen komprimerad?
• har bilden ett tydligt filnamn?
• finns en relevant alt-text?
• stödjer bilden faktiskt innehållet på sidan?
• laddas viktiga bilder tidigt och övriga vid behov?

Det här räcker långt för de flesta webbplatser.

Om du vill få hjälp att gå igenom bilder, prestanda och struktur på din webbplats kan du kontakta vårt team.

Vanliga misstag vi ofta ser

• originalbilder laddas upp utan att skalas ner
• PNG används till foton i onödan
• filnamn består av kamerans standardnamn
• alt-text fylls med sökord istället för beskrivning
• dekorativa bilder får onödigt pratig alt-text
• stora bildytor laddas utan komprimering
• samtliga bilder laddas direkt, även långt ner på sidan

Det fina är att mycket går att rätta till utan att bygga om hela webbplatsen. Små förbättringar på många bilder kan ge tydlig effekt över tid, både i användarupplevelse och i hur väl sidan står sig i sök.

Nästa steg

• Läs mer om hur vi arbetar med teknisk SEO
• Se vårt upplägg för SEO som helhet
• Hör av dig via kontaktsidan om du vill ha hjälp