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.

De eeuwige strijd met de designer

Als SEO-specialist voer je een constante strijd tegen afbeeldingen die groter zijn dan de gemiddelde Netflix-film. We hebben allemaal wel die ene klant of designer die zweert dat je het verschil ziet tussen een PNG van vijf megabyte en een geoptimaliseerde WebP. Spoiler alert: dat zie je niet. Het is de klassieke SEO-ervaring waarbij je een prachtige site krijgt aangeleverd die technisch zo zwaar is dat hij nauwelijks van de grond komt. Een goede compressie-tool is in die discussies je beste vriend om te bewijzen dat snelheid en kwaliteit prima samen door één deur kunnen.

Maar hoe pak je het comprimeren van afbeeldingen goed aan? Ik geef je een stappenplan:

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. (1)

Hiernaast vertel ik meer over dit onderwerp

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. (2)

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.

Een hero-afbeelding van twaalf megabyte

Ik zie het nog regelmatig gebeuren bij een nieuwe klant die klaagt over een trage site. Dan open ik de homepage en blijkt de hero-afbeelding een onbewerkte foto van een professionele shoot te zijn die rechtstreeks uit de camera komt. Zo’n bestand van twaalf megabyte is natuurlijk vragen om problemen. Laatst bespaarde ik voor een lokale webshop ruim drie seconden aan laadtijd door alleen al die ene foto terug te brengen naar een scherpe WebP van tachtig kilobytes. Dat is geen hogere wiskunde maar gewoon de basis op orde krijgen voordat je aan ingewikkelde SEO-trucs begint.

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.