Hoe afbeeldingen optimaliseren
voor web en SEO

Het formaat dat je kiest heeft de grootste impact op bestandsgrootte en kwaliteit. Moderne formaten leveren aanzienlijk kleinere bestanden bij dezelfde visuele kwaliteit vergeleken met oudere standaarden. Hier is wat je wanneer moet gebruiken.

De ideale aanpak is het serveren van meerdere formaten met het HTML <picture> element. Bied AVIF eerst aan, WebP als terugval en JPEG als laatste terugval. De browser kiest automatisch het beste formaat dat het ondersteunt.

Compressie verkleint de bestandsgrootte door gegevens te verwijderen die het menselijk oog niet gemakkelijk waarneemt. De sleutel is het vinden van het punt waar de bestandsgrootte aanzienlijk daalt maar de kwaliteit visueel identiek blijft aan het origineel.

Er zijn twee soorten compressie. Lossy-compressie (JPEG, WebP, AVIF) verwijdert permanent gegevens om kleinere bestanden te bereiken - dit is wat je wilt voor foto's op het web. Lossless-compressie (PNG, WebP lossless) behoudt elke pixel maar bereikt kleinere reducties - beter voor graphics en screenshots.

Tools zoals Squoosh, ImageOptim of Sharp (Node.js) laten je het kwaliteitsverschil bekijken voordat je definitief kiest. Vergelijk altijd de gecomprimeerde versie met het origineel op ware grootte voordat je deployt.

Alt-tekst (het alt-attribuut op <img>-tags) dient twee doelen: het beschrijft de afbeelding voor schermlezers en slechtziende gebruikers, en het vertelt zoekmachines wat de afbeelding bevat. Google gebruikt alt-tekst als een primair signaal voor rankings in afbeeldingen zoeken.

Goede alt-tekst is beschrijvend, beknopt en bevat op natuurlijke wijze relevante zoekwoorden zonder te overdrijven. In plaats van "foto.jpg" of "afbeelding1", schrijf iets als "golden retriever die door herfstbladeren in een park rent". Beschrijf wat er in de afbeelding staat, niet wat het is (vermijd te beginnen met "afbeelding van" of "foto van").

Gebruik voor decoratieve afbeeldingen die geen informatieve waarde toevoegen (randen, spacers, achtergrondpatronen) een leeg alt-attribuut (alt="") zodat schermlezers ze volledig overslaan.

Lazy loading vertraagt het laden van afbeeldingen totdat ze op het punt staan in het zichtbare gebied te verschijnen. Dit betekent dat een pagina met 50 afbeeldingen niet alle 50 bij het eerste laden downloadt - alleen degene die zichtbaar zijn op het scherm. De rest laadt terwijl de gebruiker scrollt. Dit vermindert de initiele laadtijd en het bandbreedtegebruik aanzienlijk.

In modern HTML is lazy loading zo eenvoudig als het toevoegen van loading="lazy" aan je <img>-tags. Gebruik geen lazy loading voor afbeeldingen die zichtbaar zijn boven de vouw (het eerste scherm) - deze moeten direct laden om layoutverschuivingen en slechte Largest Contentful Paint (LCP) scores te voorkomen.

Responsieve afbeeldingen passen zich aan aan verschillende schermformaten zodat mobiele gebruikers geen afbeelding van 4000px breed downloaden wanneer hun scherm slechts 400px is. Gebruik de srcset- en sizes-attributen om meerdere resoluties aan te bieden. De browser kiest de kleinste versie die past op het scherm van de gebruiker, wat bandbreedte bespaart en de laadtijd verbetert.

Specificeer altijd width- en height-attributen op elke afbeelding om Cumulative Layout Shift (CLS) te voorkomen - een Core Web Vitals-metric die pagina's benadeelt waar inhoud tijdens het laden verspringt.

Bestandsnamen van afbeeldingen zijn een ander SEO-signaal dat veel mensen over het hoofd zien. Zoekmachines lezen bestandsnamen om de inhoud van afbeeldingen te begrijpen. Een bestand genaamd zonsondergang-boven-meer-van-geneve.webp vertelt Google veel meer dan IMG_4829.webp.

Voeg voor geavanceerde SEO gestructureerde data (schema.org ImageObject) toe aan je pagina's. Deze markup vertelt zoekmachines het bijschrift, de maker, de licentie en de content-URL van de afbeelding. Pagina's met gestructureerde data verschijnen vaker in de afbeeldingszoekresultaten van Google met uitgebreide fragmenten.

Als je je afbeeldingen van een watermerk voorziet voor publicatie, wordt het watermerk zelf onderdeel van het bestand. Voor advies over watermerken zonder de beeldkwaliteit te schaden, bekijk onze gids voor watermerken best practices.

Fotografen en makers staan voor een unieke uitdaging: ze willen afbeeldingen die er prachtig uitzien op het web, snel laden voor SEO en beschermd blijven tegen diefstal. Deze doelen kunnen tegenstrijdig lijken, maar dat zijn ze niet - je hebt gewoon een duidelijke workflow nodig.

Bewaar je originele bestanden in hoge resolutie veilig offline - dit zijn je masters en je bewijs van auteurschap. Exporteer voor het web verkleinde versies (doorgaans 1200-2000px op de langste zijde) in WebP-formaat op kwaliteit 80. Dit geeft je uitstekende visuele kwaliteit voor een fractie van de originele bestandsgrootte.

Voeg voor het uploaden een watermerk toe aan je webversies. Een semi-transparant watermerk met 30-40% transparantie heeft geen noemenswaardige invloed op bestandsgrootte of laadsnelheid, maar het biedt visuele bescherming die toevallige diefstal ontmoedigt. Haal na het watermerken de afbeelding door een compressietool voor een laatste groottereductie.

Voor de volledige gids over het beveiligen van je afbeeldingen buiten optimalisatie, bekijk ons artikel over foto's beschermen tegen diefstal online en onze watermerktutorial.