Afbeeldingen optimaliseren voor websitesnelheid: de complete gids

Afbeeldingen maken bijna de helft uit van het gemiddelde paginagewicht. Ze optimaliseren is de grootste prestatiewinst die je kunt behalen.

---

Waarom het ertoe doet

• 53% van de mobiele gebruikers haakt af als laden langer dan 3 seconden duurt (Google)
• 1 seconde vertraging = 7% minder conversies (Akamai)
• Core Web Vitals (LCP, CLS, INP) zijn van invloed op je Google-ranking

---

Stap 1: Het juiste formaat

---

Stap 2: Comprimeren

Gebruik TinyImg — browsergebaseerd, privé, direct klaar voor gebruik.

---

Stap 3: Responsieve afbeeldingen

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

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

---

Stap 4: Lazy loading

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

Pas lazy loading nooit toe op afbeeldingen boven de vouw. Stel altijd width en height in om CLS te voorkomen.

---

Stap 5: Afbeeldingsafmetingen

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

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

---

Stap 6: CDN

• Cloudflare (gratis abonnement)
• Cloudinary
• imgix
• Vercel (Next.js)

---

Stap 7: Meten

Tools: PageSpeed Insights, Lighthouse, WebPageTest.

---

Checklist

• Juist formaat (WebP/PNG/SVG)
• Comprimeren met TinyImg
• srcset + sizes
• Lazy load onder de vouw
• width + height op alle afbeeldingen
• CDN
• PageSpeed-audit uitvoeren

---

Conclusie

Begin met comprimeren via TinyImg. Je gebruikers én Google zullen je er dankbaar voor zijn.