AFBEELDING OPTIMALISEREN IN 3 STAPPEN

Afbeeldingen maken je website mooier, persoonlijker en sterker. Maar wist je dat ze ook je site trager kunnen maken als je ze niet goed optimaliseert?

Een trage website is niet alleen frustrerend voor je bezoeker, maar ook slecht voor je vindbaarheid in Google. Gelukkig is het optimaliseren van afbeeldingen geen hogere wiskunde. In dit blog leggen we je in 3 eenvoudige stappen uit hoe je het slim aanpakt, met extra tips voor als je een website van Heibel hebt.

1. HOUDT DE BESTANDSGROOTTE KLEIN

Hoe kleiner de afbeelding, hoe sneller je website laadt. Foto’s die je rechtstreeks uploadt vanaf je telefoon, camera of stocksite zijn vaak véél te groot. Belangrijk dus om ze, voordat je ze uploadt, te comprimeren.

Zo pak je het aan:

Gebruik een compressietool zoals TinyPNG, Compressor.io of Squoosh.app
Richtlijn: probeer afbeeldingen onder de 500kb te houden (liefst rond de 300–800kb)
Afmetingen: een breedte van maximaal 1920px is vaak al ruim voldoende
Hulpmiddel: Resize-Image.net om snel afmetingen aan te passen

Tip: Optimaliseer je afbeelding vóórdat je hem uploadt. Zo voorkom je dat je site onnodig traag wordt door zware bestanden.

2. KIES HET JUISTE BESTANDSFORMAAT

Het bestandsformaat pf -type geeft aan om wat voor document het gaat. Dit kun je checken in de bestandsnaam door te kijken naar de laatste drie letters. De meest gebruikte formaten:

JPG (JPEG): perfect voor foto's - klein bestand, goede kwaliteit
PNG: voor logo’s, iconen of afbeeldingen met transparantie
WebP: modern formaat met de voordelen van beide: klein én scherp

Werk je met een Heibel-website? Dan worden je afbeeldingen automatisch omgezet naar WebP, voor een nóg snellere laadtijd.

3. GEEF JE AFBEELDING EEN SLIMME NAAM

Je afbeelding heet standaard iets als IMG_3847.jpg. Dit vertelt Google alleen helemaal niks op wat er in de afbeelding te zien is. Een goede bestandsnaam omschrijft wat er in de afbeelding te zien is en sluit aan op de tekst op de pagina.

Zo doe je dat:

Geef je afbeelding een herkenbare, logische naam: bijv. teamfoto-heibel-2025.jpg
Gebruik koppeltekens (-) i.p.v. spaties of underscores (_)
Vermijd rare tekens als #, $ of * (MODX accepteert die bij voorbaat niet)

✅ voordelen-narrowcasting.jpg

❌ IMG07058 kopie final.jpg

En vergeet de alt-tekst niet. Deze onzichtbare omschrijving van je is belangrijk voor zoekmachines en toegankelijkheid. Dit is naast de bestandsnaam hetgeen dat zoekmachines gebruiken om te zien wat er op een afbeelding te zien is en of dit aansluit bij de inhoud van de pagina, en wordt voorgelezen aan slechtzienden wanneer ze je website bezoeken. In MODX kun je deze direct invullen bij het uploaden van je afbeelding.

ORGANISEER JE MEDIABESTANDEN SLIM

Naast je afbeeldingen kun je ook je mappenstructuur optimaliseren, zodat de bestanden hierin zo goed mogelijk door Google worden uitgelezen en het geheel aan bestanden voor jou overzichtelijk blijft. Zo vind je in no-time jouw bestanden terug:

Zet je afbeeldingen in de juiste map (bijv. nieuws, producten, team)
Verplaats géén bestanden nadat je ze hebt geüpload, dat breekt de link
Wil je een afbeelding toch verplaatsen? Download en upload opnieuw in de juiste map

Zo houd je overzicht én voorkom je kapotte afbeeldingen op je site.

IMAGECROPPER OM AFBEELDING BIJ TE SNIJDEN

Vaak worden afbeeldingen die je uploadt automatisch bijgesneden om in het kader binnen je website te passen. Werk je in MODX, dan krijg je bij het selecteren van een afbeelding automatisch de ImageCropper te zien.

Hiermee bepaal jij zelf welk deel van de afbeelding zichtbaar is, en dat kun je per device (desktop/mobiel) instellen.

Zo werkt het:

Klik binnen een contentblok op "Kies" om een afbeelding te selecteren
De ImageCropper opent automatisch
Versleep de blauwe hoekpunten om het juiste stuk te kiezen en klik op "Opslaan"
Herhaal dit voor mobiel (aan de linkerkant selecteren)
Klik op "Opslaan", en klaar!

Tip: Gebruik voor brede uitsnedes (bijv. headerafbeeldingen) ook een liggende afbeelding. Een staande foto snijdt vaak het mooiste deel weg.

JOUW VOLGENDE STAP

Afbeeldingen optimaliseren is een slimme stap, maar er is nog veel meer wat je kunt doen om je website sneller, gebruiksvriendelijker én beter vindbaar te maken.

Download ons gratis e-book over website optimalisatie. Boordevol praktische tips, van snelheid tot SEO en gebruiksvriendelijkheid.

DOWNLOAD E-BOOK