Optimera bilder för SEO (WebP/AVIF) – komplett guide 2025
TL;DR
Bilder är ofta flaskhalsen för LCP. Använd WebP/AVIF, komprimera, skala rätt, använd srcset och lazy load, leverera via CDN och skriv vettiga alt‑texter. Testa före/efter i PageSpeed/Lighthouse.
- LCP < 2,5 s • INP < 200 ms • CLS < 0,1
- Prioritera hero‑bilden (preload/prioritet)
- Lazy‑loada allt under vikningen
Varför bildoptimering påverkar SEO (och CWV)
Långsamma eller fel dimensionerade bilder försämrar Largest Contentful Paint och kan orsaka CLS. Rätt strategi gör sidan snabb, stabil och tydlig för både Google och AI‑motorer.
Välj rätt format
WebP är tryggt förstaval. AVIF ger ofta minst filstorlek men kräver fallback. PNG för transparent grafik, SVG för ikoner/illustrationer.
Komprimera utan synlig kvalitetsförlust
Originalbilder kan ofta minskas 50–70% med Squoosh/TinyPNG eller ShortPixel/Imagify. Automatisera i CI/CD med ImageMagick för konsekvent kvalitet.
Rätt dimensioner + responsiva bilder
Skala ned före uppladdning och leverera flera storlekar:
<img
src="hero-1200.webp"
srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2000.webp 2000w"
sizes="(max-width: 768px) 600px, (max-width: 1400px) 1200px, 2000px"
alt="Exempel på optimerad hero-bild">Lazy loading på rätt ställen
Lazy‑loada bilder under vikningen, men ladda hero‑bilden direkt. Exempel:
<img src="bild.webp" alt="SEO-optimerad bild" loading="lazy">Leverera via CDN
CDN minskar latenser och förbättrar LCP globalt. Välj ett CDN som kan transformera bilder on‑the‑fly.
Skriv bra alt‑texter
Beskriv motiv och syfte med naturligt språk. Undvik keyword stuffing. Hjälper tillgänglighet, Google Images och AI‑sammanhang.
Testa och iterera
Mät före/efter i PageSpeed Insights och Lighthouse. Följ LCP/CLS och överförd datamängd. KrabVision ger AI‑driven tolkning och prioriteringar.
Synonymer & relaterade termer
- bildoptimering SEO
- optimera bilder för webben
- komprimera bilder för webb
- WebP vs AVIF
- lazy loading bilder
Vanliga frågor
Hur optimerar man bilder för SEO?
Välj WebP/AVIF, komprimera, skala rätt, srcset, lazy load, CDN och bra alt‑texter. Mät före/efter.
Vilket bildformat är bäst?
WebP som standard. AVIF ger lägst vikt men behöver fallback. PNG för transparens, SVG för ikoner.
Hur påverkar bilder Core Web Vitals?
Fel hanterade bilder sänker LCP och kan öka CLS. Prioritera hero‑bild och dimensionera korrekt.
Hur testar jag effekten?
PSI/Lighthouse före/efter, följ LCP/CLS och sidstorlek. KrabVision hjälper dig att prioritera.