Bildoptimering för snabbare webbplatser: komplett guide

Bilder utgör ungefär 50 % av en sidas totala vikt. Att optimera dem är den snabbaste vinsten du kan göra för prestandan.

---

Varför det spelar roll

• 53 % av mobilanvändare lämnar sidan efter 3 sekunder (Google)
• 1 sekunds fördröjning = 7 % färre konverteringar
• LCP och CLS (Core Web Vitals) påverkar Googles rankningar

---

Steg 1: Välj rätt format

Använd WebP för foton (25–35 % mindre än JPEG), PNG för transparens och logotyper, SVG för ikoner.

---

Steg 2: Komprimera

TinyImg — webbläsarbaserat, omedelbart och privat.

---

Steg 3: Responsiva bilder

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Alt text" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Alt text" width="800" height="600" />
</picture>

---

Steg 4: Lazy loading

<img src="image.webp" loading="lazy" alt="Beskrivning" width="800" height="600" />

Använd inte lazy loading för bilder ovanför vikningen. Ange alltid bredd och höjd.

---

Steg 5: Dimensioner

<img src="photo.webp" alt="Foto" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Steg 6: CDN

Cloudflare (gratis), Cloudinary, imgix eller Vercel för Next.js.

---

Steg 7: Mät resultaten

LCP-mål: under 2,5 s. CLS-mål: under 0,1. Totalt för bilder: under 500 KB. Verktyg: PageSpeed Insights, Lighthouse, WebPageTest.

---

Checklista

• WebP-format
• Komprimerat med TinyImg
• srcset + sizes
• Lazy load (endast nedanför vikningen)
• Bredd + höjd på alla bilder
• CDN
• PageSpeed-granskning

TinyImg — börja här.