Je afbeeldingen zijn te zwaar: zo maak je ze lichter

Waarom het uitmaakt

Zware afbeeldingen kosten laadtijd, en op mobiel ook data. Je LCP, de tijd tot je grootste blok in beeld staat, hangt vaak direct af van je hero-afbeelding.

Het goede nieuws: dit is meestal de snelste winst die je kunt boeken, zonder iets aan je ontwerp te veranderen.

Zo los je het op

1. Maak afbeeldingen niet breder dan ze getoond worden. Voor een volle breedte is 1600 tot 2000 pixels genoeg, voor een blok naast tekst vaak 800.
2. Sla ze op als WebP of AVIF. Die zijn vaak de helft kleiner dan JPG bij dezelfde kwaliteit.
3. Comprimeer ze. Een kwaliteit van 75 tot 80 procent ziet er voor het oog hetzelfde uit en scheelt veel kilobytes. Gratis tools: Squoosh of TinyPNG.
4. Gebruik srcset, zodat telefoons een kleinere versie krijgen dan grote schermen.
5. Laad afbeeldingen buiten het eerste scherm lazy, zie ook de gids over lazy loading.

<img src="/img/werk-800.webp"
     srcset="/img/werk-400.webp 400w, /img/werk-800.webp 800w, /img/werk-1600.webp 1600w"
     sizes="(max-width: 700px) 100vw, 50vw"
     width="800" height="600" alt="Een afgeronde verbouwing">

Op jouw platform

WordPress

Plugins als ShortPixel, EWWW of Imagify comprimeren en converteren automatisch bij het uploaden, ook voor je bestaande mediabibliotheek.

Shopify

Shopify levert al moderne formaten en schaalt mee, maar upload alsnog geen bestanden van 5000 pixels. Hoe kleiner het origineel, hoe beter het resultaat.

Veelgestelde vragen