Bilder står för i genomsnitt 50–70 procent av en webbsidas totala storlek. Ändå ignorerar de flesta bildoptimering och missar både hastighetsvinster och trafik från Google Bildsök. En enda ooptimerad bild kan sänka din Core Web Vitals-poäng och kosta dig ranking.
Bildoptimering handlar om tre saker: att bilderna laddar snabbt, att Google förstår vad de visar, och att de bidrar till användarupplevelsen.
Filnamn – det första Google ser
Googles bildsöksalgoritm läser filnamn för att förstå bildinnehållet. Ett beskrivande filnamn ger en direkt ranksignal.
Bra filnamn:
- nike-air-zoom-pegasus-42-loparskor-dam.jpg
- lokal-seo-google-business-profile.png
- sokordsanalys-exempel-semrush.webp
Dåliga filnamn:
- IMG_20260315_143022.jpg
- screenshot-2026-03-15.png
- bild1.jpg
- foto_(3)_kopia_FINAL.jpeg
Regler:
- Använd gemener och bindestreck (inte understreck eller mellanslag)
- Inkludera relevanta sökord naturligt
- Beskriv bildens innehåll, inte dess tekniska egenskaper
- Håll det kort men beskrivande – max 5–8 ord
- Döp om bilder INNAN du laddar upp dem – att byta filnamn efteråt kräver omdirigering
Alt-text – tillgänglighet möter SEO
Alt-text (alternativ text) är en textbeskrivning av en bild som:
- Läses upp av skärmläsare för synskadade användare
- Visas om bilden inte kan laddas
- Används av Google för att förstå bildens innehåll
Så skriver du bra alt-text
Formeln: Beskriv vad bilden visar, inkludera ett relevant sökord om det passar naturligt.
| Bild | Bra alt-text | Dålig alt-text |
|---|---|---|
| Produktfoto av löparskor | "Nike Air Zoom Pegasus 42 löparsko för dam i svart och rosa" | "sko" |
| Screenshot av Google Search Console | "Google Search Console visar indexeringsstatus med 450 indexerade sidor" | "screenshot" |
| Teamfoto på kontoret | "Ranqo-teamet arbetar med SEO-strategi på kontoret i Stockholm" | "team" |
| Dekorativ linje/separator | (tom alt-text) | "linje bild dekoration separator" |
Regler för alt-text
- Max 125 tecken – skärmläsare klipper längre text
- Beskriv specifikt – "röd Toyota Corolla 2026 parkerad framför Stureplan" slår "bil"
- Inkludera sökord naturligt – men inte keyword stuffing
- Hoppa inte över alt-text – varje informativ bild ska ha en
- Dekorativa bilder – använd tom alt-text för ikoner, separatorer och bakgrundsdekor
- Börja inte med "Bild av..." eller "Foto av..." – skärmläsare säger redan "bild" före alt-texten
Bildformat – WebP, AVIF och JPEG
Rätt format kan halvera filstorleken utan synlig kvalitetsförlust.
Formatjämförelse
| Format | Bäst för | Komprimering | Webbläsarstöd |
|---|---|---|---|
| WebP | Allt – foton, grafik, transparens | 25–35 % mindre än JPEG | 97 % |
| AVIF | Foton med hög komprimering | 50 % mindre än JPEG | 93 % |
| JPEG | Foton (som reservalternativ) | Standardnivå | Alla |
| PNG | Grafik med transparens, skärmdumpar | Större filer | Alla |
| SVG | Ikoner, logotyper, illustrationer | Skalbar utan kvalitetsförlust | Alla |
Rekommendation 2026
- Förstahandsval: WebP – bästa balansen mellan kvalitet, storlek och stöd
- För maximal komprimering: AVIF – om du kan ha JPEG som reserv för äldre webbläsare
- Reservalternativ: JPEG – för äldre webbläsare som inte stödjer WebP
- Grafik och ikoner: SVG – alltid för vektorbaserat innehåll (logotyper, ikoner)
Konvertera till WebP
- Squoosh.app – gratis onlineverktyg från Google, visar skillnad innan/efter
- TinyPNG – batch-komprimering, stödjer WebP
- WordPress-plugins – ShortPixel eller Imagify konverterar automatiskt vid uppladdning
- Shopify – konverterar automatiskt till WebP
Bildstorlek och komprimering
Dimensioner
Ladda inte upp bilder som är större än vad de visas som. En bild som visas i 800×600 pixlar behöver inte vara 4000×3000.
Tumregler:
- Hero-bilder (stora bilder högst upp): max 1920 pixlar bredd
- Artikelbilder: 800–1200 pixlar bredd
- Miniatyrbilder: exakt den storlek de visas i
- För skärmar med hög upplösning (Retina): dubbla visningsstorleken (visas i 800px → spara som 1600px)
Komprimering
De flesta bilder kan komprimeras 60–80 procent utan synlig kvalitetsförlust. Testa själv – om du inte ser skillnad mellan originalet och den komprimerade versionen har du hittat rätt nivå.
Rekommenderade kvalitetsnivåer:
- JPEG: 75–85 procent
- WebP: 75–85 procent
- AVIF: 60–75 procent
Verktyg:
- Squoosh – interaktiv jämförelse innan/efter
- TinyPNG – batch-komprimering
- ImageOptim (Mac) – dra och släpp, komprimerar automatiskt
Lazy loading – ladda bilder först när de behövs
Lazy loading innebär att bilder under det synliga området (under "folden") inte laddas förrän besökaren scrollar ner till dem. Det förbättrar initial laddningstid dramatiskt.
Hur det fungerar
Tänk dig en lång bloggartikel med 10 bilder. Utan lazy loading laddar webbläsaren alla 10 bilder direkt – även de som besökaren inte ens ser. Med lazy loading laddas bara de 1–2 bilder som syns direkt, och resten laddas efterhand som besökaren scrollar.
Viktigt att veta:
- Den viktigaste bilden (hero-bilden högst upp) ska INTE lazy-loadas – den ska laddas direkt
- Alla andra bilder längre ner på sidan bör lazy-loadas
- Ange alltid bredd och höjd på bilder för att förhindra att sidan hoppar (CLS)
- De flesta moderna webbläsare stödjer lazy loading inbyggt – inget tillägg behövs
- WordPress har inbyggd lazy loading sedan version 5.5
Responsive images – rätt bild för rätt enhet
Mobilanvändare behöver inte samma stora bild som desktopanvändare. Moderna webbplatser serverar olika bildstorlekar beroende på enhet – en mobil får en mindre bild, en desktop får en större.
Fördelar:
- Mobilanvändare laddar inte onödigt stora bilder (sparar data och tid)
- Desktopanvändare får bilder i full kvalitet
- Bättre Core Web Vitals på alla enheter
Hur du löser det:
- WordPress med moderna teman hanterar detta automatiskt
- Shopify serverar automatiskt olika storlekar
- De flesta moderna webbplattformar och CMS har inbyggt stöd
Bilder och Core Web Vitals
Bilder påverkar alla tre Core Web Vitals:
LCP (Largest Contentful Paint)
Hero-bilden är ofta det element som avgör LCP-poängen. Optimera den genom att:
- Komprimera till WebP eller AVIF
- Se till att den laddas tidigt (inte fördröjd av skript)
- Överväg att förinläsa hero-bilden – de flesta CMS har inställningar för detta
- Välj rätt storlek – inte större än nödvändigt
CLS (Cumulative Layout Shift)
Bilder utan angivna mått orsakar att sidan hoppar:
- Ange alltid bredd och höjd – det ger webbläsaren möjlighet att reservera rätt utrymme
- Använd platshållare (blur-up eller färgblock) medan bilden laddas
INP (Interaction to Next Paint)
Tunga bilder blockerar sällan interaktion direkt, men kan bidra indirekt:
- Väldigt många eller stora bilder kan göra sidan seg generellt
- Avkoda bilder i bakgrunden – moderna webbläsare gör detta automatiskt
Google Bildsök – extra trafikkälla
Google Bildsök står för cirka 20 procent av alla Google-sökningar. Optimerade bilder kan generera betydande trafik som de flesta missar helt.
Så syns du i Bildsök:
- Alt-text med sökord – det viktigaste
- Beskrivande filnamn – näst viktigast
- Omgivande text – Google läser texten runt bilden för att förstå kontexten
- Bildtext (caption) – text direkt under bilden ger extra kontext
- Originella bilder – unika foton rankar bättre än stockfoton
- Strukturerad data – Product-, Recipe- och Article-schema kan visa bilder som rich results
Vanliga misstag
- Saknar alt-text – missar både tillgänglighet och SEO
- Generiska filnamn – IMG_3847.jpg ger noll ranksignaler
- Foton sparade som PNG – kan vara 5–10 gånger större än WebP/JPEG utan synlig skillnad
- Lazy-load av hero-bilden – försämrar laddningstid istället för att förbättra den
- Saknade mått på bilder – orsakar hoppande layout som skadar CLS
- Samma bildstorlek för alla enheter – en 4000 pixlar bred bild till en mobiltelefon
- Stockfoton överallt – Google Bildsök prioriterar originella bilder
- Alt-text keyword stuffing – att stoppa in "SEO SEO-byrå bästa SEO Stockholm" i alt-texten är spam
Checklista – bildoptimering
- Alla bilder har beskrivande filnamn med bindestreck
- Alla informativa bilder har alt-text (max 125 tecken)
- Bilder sparade som WebP (med JPEG som reserv om nödvändigt)
- Komprimerade till 75–85 procent kvalitet
- Mått angivna (bredd och höjd)
- Hero-bilden laddas direkt (inte lazy-loadad)
- Övriga bilder lazy-loadas
- Anpassade storlekar för mobil och desktop
- Inga bilder större än 200 KB (helst under 100 KB)
- Dekorativa bilder har tom alt-text
Varje bild på din sajt är en rankningsmöjlighet. Optimera filnamn, alt-text och storlek systematiskt – det ger förbättrad hastighet, bättre tillgänglighet och extra trafik från Google Bildsök.