Hoe kies ik de juiste afbeeldingen voor mijn website?

Voor de meeste foto's op een website is WebP tegenwoordig de beste keuze, omdat dit formaat een goede beeldkwaliteit combineert met een klein bestandsformaat, wat je website sneller maakt. Kun je geen WebP gebruiken, dan is JPG een prima alternatief voor foto's met veel kleuren en verlopen. Voor afbeeldingen met scherpe lijnen, tekst of een transparante achtergrond, zoals logo's en iconen, gebruik je beter PNG of, nog beter, SVG. Dat laatste is een vectorformaat dat op elk formaat scherp blijft en heel licht is. Kies het formaat dus op basis van het type beeld: WebP of JPG voor foto's, PNG of SVG voor logo's en illustraties. De juiste keuze scheelt niet alleen in kwaliteit, maar vooral in laadsnelheid, en dat is belangrijk voor zowel je bezoekers als je vindbaarheid in Google.

Er is geen harde grens, maar de vuistregel is: zo klein mogelijk met behoud van goede kwaliteit. Voor de meeste webafbeeldingen streef je naar een bestandsgrootte van hooguit enkele honderden kilobytes; grote sfeerbeelden mogen iets zwaarder zijn, maar liefst onder een paar honderd kilobyte. Afbeeldingen zijn namelijk vaak de grootste boosdoener achter een trage website, en snelheid weegt mee in de gebruikerservaring én in je Google-positie. Je verkleint een afbeelding door hem op de juiste weergavegrootte te exporteren (upload geen foto van 4000 pixels breed als hij op 800 pixels wordt getoond) en door hem te comprimeren met een tool of in het juiste formaat zoals WebP. Zo houd je de kwaliteit goed en de laadtijd laag. Controleer bij twijfel je laadsnelheid met een gratis online tool, zodat je ziet welke beelden je site vertragen.

Een alt-tekst en een onderschrift lijken op elkaar, maar hebben een ander doel. De alt-tekst is een beschrijving die je "achter de schermen" aan een afbeelding koppelt; hij is normaal onzichtbaar voor bezoekers en wordt gebruikt door screenreaders (voor mensen met een visuele beperking) en door zoekmachines om te begrijpen wat er op de afbeelding staat. Hij verschijnt ook als de afbeelding niet kan laden. Een onderschrift daarentegen is zichtbare tekst die je onder een afbeelding plaatst en die door alle bezoekers gelezen wordt, bijvoorbeeld om context of een toelichting te geven. Ze sluiten elkaar niet uit: je kunt beide gebruiken. De alt-tekst draait om toegankelijkheid en vindbaarheid, het onderschrift om extra informatie voor de kijker. Meer over het goed invullen van alt-teksten lees je in ons artikel over wat een alt-tekst is.

Ja, dat is een klein maar nuttig detail. Een bestandsnaam als "IMG_4837.jpg" zegt zoekmachines niets, terwijl een beschrijvende naam als "houten-eettafel-eiken.jpg" helpt om te begrijpen waar de afbeelding over gaat. Dat komt je vindbaarheid in de afbeeldingenzoekresultaten ten goede. Gebruik korte, beschrijvende namen met koppeltekens tussen de woorden en zonder rare tekens of hoofdletters. Verwerk waar het natuurlijk past een relevant zoekwoord, maar overdrijf niet met keyword stuffing. Doe dit bij voorkeur vóór het uploaden, want achteraf hernoemen kan links breken. Samen met een goede alt-tekst en het juiste bestandsformaat vormt de bestandsnaam een van de basisonderdelen van beeld-SEO. Het is snel gedaan en levert op termijn extra zichtbaarheid op, dus het is de moeite waard om er standaard even bij stil te staan bij elke afbeelding.

Nee, dat mag niet zomaar. Afbeeldingen die je via Google vindt, zijn vrijwel altijd auteursrechtelijk beschermd, en ze klakkeloos gebruiken kan leiden tot een claim of zelfs een boete. Dat een afbeelding makkelijk te vinden en te downloaden is, betekent niet dat je hem vrij mag gebruiken. Gebruik in plaats daarvan eigen foto's, of haal beeld van betrouwbare stockfotosites met een duidelijke licentie die commercieel gebruik toestaat. Let ook bij "gratis" stockfoto's altijd op de licentievoorwaarden, want soms is naamsvermelding verplicht of is commercieel gebruik uitgesloten. Wil je toch een specifieke afbeelding gebruiken, koop dan een licentie bij de rechthebbende. Zo voorkom je juridisch gedoe. Meer over het veilig kiezen van beeld lees je in ons artikel over hoe je een geschikte stockfoto kiest.

Er is geen vast aantal; het gaat om wat de pagina en de bezoeker nodig hebben. Beeld helpt om tekst op te breken, een boodschap te versterken en de aandacht te sturen, maar te veel of te zware afbeeldingen maken je pagina rommelig en traag. Kies daarom kwaliteit boven kwantiteit: een paar sterke, relevante beelden die je verhaal ondersteunen, werken beter dan tientallen willekeurige plaatjes. Zorg dat elke afbeelding een doel dient, of dat nu informatie overbrengen, sfeer creëren of een product tonen is. Decoratieve beelden zonder functie kun je beter weglaten. Houd bovendien de totale laadtijd in de gaten: hoe meer beeld, hoe belangrijker het is om alles goed te comprimeren en op het juiste formaat te uploaden. De juiste hoeveelheid is dus de hoeveelheid die je boodschap versterkt zonder de pagina te vertragen of te overladen.

Ze kunnen dat zeker, want afbeeldingen zijn vaak de grootste oorzaak van een trage website. Grote, niet-geoptimaliseerde beelden kosten veel laadtijd, en een trage site zorgt voor hogere bouncepercentages en een lagere positie in Google, dat laadsnelheid meeweegt. Het goede nieuws is dat je dat eenvoudig voorkomt. Upload afbeeldingen op de juiste weergavegrootte in plaats van veel te groot, comprimeer ze, en kies een licht formaat zoals WebP. Overweeg ook lazy loading, waarbij afbeeldingen pas laden zodra de bezoeker eraan toe is. Zo houd je de voordelen van sterk beeld zonder de snelheid op te offeren. Controleer je laadtijd met een gratis online tool om te zien of beelden je site vertragen. Goede afbeeldingen hoeven je website dus niet traag te maken, zolang je ze bewust optimaliseert voordat je ze plaatst.

De kijkrichting van personen op een foto stuurt onbewust de aandacht van je bezoeker. Kijkt iemand op de foto naar een bepaald element, bijvoorbeeld naar een knop of een stuk tekst, dan volgt het oog van de bezoeker die blik vaak automatisch. Je kunt dit slim inzetten door mensen op je beeld richting je call-to-action of belangrijke content te laten kijken, zodat je de aandacht subtiel naar het conversiepunt leidt. Laat je een persoon juist van de belangrijke elementen wegkijken, dan trek je de aandacht er onbedoeld vanaf. Ook een directe blik in de camera kan krachtig zijn om verbinding te maken. Het is een klein detail met verrassend veel effect. Let er dus op bij het kiezen en plaatsen van foto's met mensen: gebruik de kijkrichting om de bezoeker te sturen, in plaats van hem af te leiden van waar het echt om draait.

Deze drie formaten hebben elk hun eigen sterke punten. JPG is ideaal voor foto's met veel kleuren en verlopen; het comprimeert goed, maar ondersteunt geen transparantie. PNG is beter voor afbeeldingen met scherpe lijnen, tekst of een transparante achtergrond, zoals logo's en iconen, maar levert doorgaans grotere bestanden op. WebP is een modern formaat dat het beste van beide combineert: het biedt een goede kwaliteit bij een klein bestandsformaat en ondersteunt transparantie, waardoor het vaak de beste keuze is voor een snelle website. Voor logo's en illustraties met vlakke kleuren is daarnaast SVG interessant, omdat dat vectorformaat op elk formaat scherp blijft. Kies dus op basis van het type beeld en let op de bestandsgrootte. De juiste formaatkeuze draagt direct bij aan een snellere, professionelere website.

Beeldoptimalisatie draait om een paar stappen die je snel kunt zetten. Exporteer een afbeelding op de grootte waarop hij daadwerkelijk wordt getoond, in plaats van een enorme foto te uploaden die de browser moet verkleinen. Comprimeer de afbeelding met een tool of exporteer hem in een licht formaat zoals WebP, zodat de bestandsgrootte omlaag gaat zonder zichtbaar kwaliteitsverlies. Geef het bestand een beschrijvende naam en voeg een goede alt-tekst toe, zodat je zowel je vindbaarheid als je toegankelijkheid verbetert. Overweeg tot slot lazy loading, waarbij beelden pas laden wanneer de bezoeker eraan toe is. Deze stappen samen zorgen voor scherp beeld én een snelle website. Controleer het resultaat met een gratis snelheidstool. Goede optimalisatie is dus een kwestie van het juiste formaat, de juiste grootte, compressie en een nette bestandsnaam met alt-tekst.