Billedoptimering til hurtigere hjemmesider: komplet guide

Billeder udgør cirka 50 % af en sides samlede vægt. At optimere dem er den hurtigste gevinst, du kan opnå for performance.

---

Derfor er det vigtigt

• 53 % af mobilbrugere forlader siden efter 3 sekunder (Google)
• 1 sekunds forsinkelse = 7 % færre konverteringer
• LCP og CLS (Core Web Vitals) påvirker Googles rangeringer

---

Trin 1: Vælg det rigtige format

Brug WebP til fotos (25–35 % mindre end JPEG), PNG til transparens og logoer, SVG til ikoner.

---

Trin 2: Komprimer

TinyImg — browserbaseret, øjeblikkeligt og privat.

---

Trin 3: Responsive billeder

<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>

---

Trin 4: Lazy loading

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

Brug ikke lazy loading til billeder over folden. Angiv altid bredde og højde.

---

Trin 5: Dimensioner

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

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

---

Trin 6: CDN

Cloudflare (gratis), Cloudinary, imgix eller Vercel til Next.js.

---

Trin 7: Mål resultaterne

LCP-mål: under 2,5 s. CLS-mål: under 0,1. Billeder i alt: under 500 KB. Værktøjer: PageSpeed Insights, Lighthouse, WebPageTest.

---

Tjekliste

• WebP-format
• Komprimeret med TinyImg
• srcset + sizes
• Lazy load (kun under folden)
• Bredde + højde på alle billeder
• CDN
• PageSpeed-revision

TinyImg — start her.