Bildoptimering för webb
Bilder står ofta för det mesta av en sidas vikt — och därmed för mycket av laddtiden. Tur nog är bildoptimering en av de enklaste och mest effektiva sakerna du kan göra för snabbare sajt och bättre Core Web Vitals. Här är hur du gör det rätt.
5 min läsning · Uppdaterad 31 aug 2026 · Av Alexander Gerhard
Rätt format: WebP och AVIF
Moderna format komprimerar mycket bättre än gamla JPEG/PNG utan synlig kvalitetsförlust. AVIF är oftast minst i storlek, WebP är brett stödd. Använd dem istället för tunga JPEG/PNG.
| Format | Använd för | Kommentar |
|---|---|---|
| AVIF | Foton, mest komprimering | Minst filstorlek, brett stöd 2026 |
| WebP | Foton & grafik | Bra komprimering, universellt stöd |
| SVG | Logotyper, ikoner | Vektor — skarpt i alla storlekar |
| PNG | Endast vid transparens/behov | Tungt — undvik för foton |
Storlek och komprimering
- Skala om bilden till den storlek den faktiskt visas i — ladda inte en 4000px-bild i en 800px-ruta.
- Servera olika storlekar för mobil och desktop (responsiva bilder, srcset).
- Komprimera — 70–80 % kvalitet räcker nästan alltid för foton.
- Ta bort onödig metadata.
Lazy load och LCP
Ladda bilder "lazy" så att bara det som syns laddas direkt — resten hämtas när användaren scrollar. Ett undantag: den stora bilden högst upp (din LCP-bild) bör laddas direkt, inte lazy, så att sidan känns snabb.
Sätt alltid width och height (eller aspect-ratio) på bilder. Det hindrar att layouten hoppar när bilden laddas — vilket annars ger dålig CLS.
Core Web Vitals‑checklista för WordPress
15 konkreta punkter för att få gröna Core Web Vitals — snabbare sajt, bättre ranking och fler kunder. Ange din e‑post så får du PDF:en direkt.
- Hosting, tema och caching — grunden som avgör mest
- Bild‑ och kodoptimering för LCP, INP och CLS
- Så mäter och följer du upp med rätt verktyg
Vi skickar bara det du bett om. Ingen spam.
Vanliga frågor
Vilket bildformat är bäst för webben?
För foton är AVIF oftast bäst (minst storlek), med WebP som brett stödd favorit. Använd SVG för logotyper och ikoner. Undvik tunga JPEG/PNG för stora foton.
Vad är lazy loading?
Att bilder utanför skärmen laddas först när användaren scrollar dit, istället för allt på en gång. Det gör att sidan känns snabb. Undantaget är den stora toppbilden, som bör laddas direkt.
Hur mycket snabbare blir sajten av bildoptimering?
Ofta mycket. Eftersom bilder brukar väga mest kan rätt format och storlek halvera sidans vikt eller mer — vilket direkt förbättrar laddtid och Core Web Vitals.
Varför hoppar min layout när bilder laddas?
För att bilderna saknar angiven storlek. Sätt width/height eller aspect-ratio så reserveras platsen — då slipper du hoppande layout (dålig CLS).
Läs vidare
Core Web Vitals förklarat: LCP, INP & CLS
Vad Core Web Vitals är, vad LCP, INP och CLS mäter, vilka värden som är bra — och varför de påverkar både ranking och försäljning.
Läs mer →Så snabbar du upp din WordPress-sajt
De vanligaste sakerna som gör WordPress långsamt — och en konkret checklista för att fixa hastigheten.
Läs mer →Sidhastighet och Google-ranking
Hur sidhastighet hänger ihop med din placering i Google — och varför snabbhet ger både bättre ranking och fler kunder.
Läs mer →