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 Nordkod
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
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.
5 min läsning · 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.
5 min läsning · Läs mer →
Flytta blogg till ny hemsida och egen domän
Har du en eller flera bloggar på ett gammalt webbhotell? Så flyttar du inlägg, bilder och kommentarer till en ny hemsida — utan att länkar och placeringar i Google försvinner.
6 min läsning · Läs mer →ChecklistaSå begär du offert på hemsida eller app — och vad kravspecen ska innehålla
Åtta punkter som gör offerterna jämförbara, frågor att ställa till leverantören och hur du läser svaren.
6 min läsning · Läs mer →GuideHemsida för fotografer — portfolio som laddar snabbt och säljer
Bilderna är produkten. Så bygger du en fotografsajt som visar dem i full kvalitet, laddar snabbt i mobilen och gör det enkelt att boka och köpa.
5 min läsning · Läs mer →GuideSälja en bok eller några produkter direkt på hemsidan
Du behöver ingen stor webbshop för att sälja en bok. Så här tar du betalt, skickar och bokför — med kort, Swish eller Klarna.
5 min läsning · Läs mer →GuideFlytta från en sajtbyggare till en egen sajt
När det är dags att lämna Portfoliobox, Wix eller Squarespace, när det inte är det — och hur flytten går till utan att du tappar besökare.
6 min läsning · Läs mer →GuideBygga ut hemsidan med en ny sektion eller undersida
Tre sätt att lägga till något nytt på en befintlig sajt — och hur du väljer utan att behöva bygga om allt.
5 min läsning · Läs mer →