Afbeeldingen comprimeren zonder kwaliteitsverlies (mijn gids)

Afbeeldingen zijn vaak de grootste bestanden op een website. Ongecomprimeerde afbeeldingen vertragen je laadtijd en kosten bandbreedte – wat je posities in Google én conversies schaadt. Tegelijk wil je geen zichtbare kwaliteitsverlies. In dit artikel deel ik mijn aanpak om afbeeldingen efficiënt te comprimeren zonder concessies te doen aan visuele kwaliteit.

1. Kies het juiste bestandsformaat

Niet elk formaat is geschikt voor elke situatie. Compressie begint bij de juiste keuze.

Mijn standaard:

• JPEG – voor foto’s en complexe beelden
  
• PNG – voor transparantie of UI-elementen
  
• WebP – moderne standaard, goede balans tussen compressie en kwaliteit
  
• SVG – voor iconen, logo’s, eenvoudige illustraties (vector-based)
  

Gebruik WebP waar mogelijk. De meeste browsers ondersteunen dit, en het levert vaak >25% kleinere bestanden op dan JPEG/PNG.

2. Gebruik tools met visuele compressie (zonder artefacten)

Je wilt compressie zonder zichtbaar verlies. Kies dus tools die werken met slimme algoritmes of visuele controle.

Aanbevolen tools:

• TinyPNG (ook voor JPEG): https://tinypng.com
• Squoosh (van Google, met WebP-export): https://squoosh.app
• ImageOptim (macOS desktoptool, lossless): https://imageoptim.com
• ShortPixel of Imagify (voor WordPress-gebruikers)

Deze tools verwijderen ook overbodige metadata zoals EXIF (bijv. cameragegevens), wat extra bytes scheelt.

3. Verklein de resolutie vóór je uploadt

Veel afbeeldingen worden geüpload in resoluties die niet nodig zijn. Bijvoorbeeld 4000px breed voor een afbeelding die op 800px getoond wordt. Dit is verspilde laadtijd.

Advies:

• Hero-afbeeldingen: max. 2000px breed
• Contentbeelden: 800–1200px
• Thumbnails/icons: exact formaat dat je toont (bijv. 150×150)

Gebruik tools als Photoshop, Affinity Photo of gewoon online tools zoals iloveimg.com.

4. Automatiseer in je workflow of CMS

Handmatig optimaliseren is prima bij kleine volumes, maar bij grotere sites is automatiseren slimmer.

WordPress-opties:

• ShortPixel: optimaliseert automatisch bij upload, converteert naar WebP
• Imagify: vergelijkbare werking, goede controle per bestandstype
• WebP Express: voegt WebP-varianten toe naast bestaande JPG/PNG

Overige CMS:

• Gebruik een CDN met automatische optimalisatie, zoals Cloudflare Pro (Polish), Bunny Optimizer of ImageKit

Let op: niet alle plug-ins vervangen inline-afbeeldingen in HTML automatisch. Test goed.

5. Gebruik lazy loading (techniek, geen compressie – maar wél snelheid)

Lazy loading zorgt ervoor dat afbeeldingen pas worden geladen als ze in beeld komen. Hiermee beperk je de initiële laadtijd.

Hoe instellen:

• WordPress 5.5+ → heeft lazy loading standaard aan
• Anders: <img loading=”lazy”> toevoegen aan je HTML
• Of via een JS-oplossing (bij oudere browsers)

Combineer dit altijd met een placeholder of correcte aspect-ratio om layout shifts te voorkomen.

6. Test je optimalisatie

Na compressie en implementatie: testen.

Tools:

• Google PageSpeed Insights
• WebPageTest.org
• Lighthouse (Chrome DevTools)

Let op: deze tools geven ook feedback als je WebP of AVIF niet gebruikt of wanneer afbeelding groter is dan nodig.

Tot slot

Afbeeldingen optimaliseren zonder kwaliteitsverlies is geen éénmalige actie, maar een proces. Door slimme tools, de juiste formaten en automatisering in te zetten, verlaag je de laadtijd aanzienlijk – zonder dat het ten koste gaat van het ontwerp of de gebruikerservaring.