Bildeoptimering for raskere nettsteder: komplett guide

Bilder utgjør omtrent 50 % av en sides totale vekt. Å optimere dem er den raskeste gevinsten du kan oppnå for ytelsen.

---

Derfor er det viktig

• 53 % av mobilbrukere forlater siden etter 3 sekunder (Google)
• 1 sekunds forsinkelse = 7 % færre konverteringer
• LCP og CLS (Core Web Vitals) påvirker Googles rangeringer

---

Steg 1: Velg riktig format

Bruk WebP for foto (25–35 % mindre enn JPEG), PNG for transparens og logoer, SVG for ikoner.

---

Steg 2: Komprimer

TinyImg — nettleserbasert, øyeblikkelig og privat.

---

Steg 3: Responsive 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="Beskrivelse" width="800" height="600" />

Ikke bruk lazy loading for bilder over folden. Angi alltid bredde og høyde.

---

Steg 5: Dimensjoner

<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 for Next.js.

---

Steg 7: Mål resultatene

LCP-mål: under 2,5 s. CLS-mål: under 0,1. Bilder totalt: under 500 KB. Verktøy: PageSpeed Insights, Lighthouse, WebPageTest.

---

Sjekkliste

• WebP-format
• Komprimert med TinyImg
• srcset + sizes
• Lazy load (kun under folden)
• Bredde + høyde på alle bilder
• CDN
• PageSpeed-revisjon

TinyImg — start her.