Afbeeldingen zijn meestal het zwaarste onderdeel van een pagina en het slechtst onderhouden. Ze worden één keer geüpload, rechtstreeks uit de camera of van de fotograaf, en daarna kijkt niemand er meer naar. Dat is jammer, want juist hier liggen twee dingen tegelijk: de snelste snelheidswinst die je kunt boeken, en een stuk toegankelijkheid dat bij wet steeds zwaarder weegt.
Dit artikel gaat over de drie dingen die een SEO-rapport aan je afbeeldingen meet: de alt-tekst, de opgegeven afmetingen en de manier waarop het bestand wordt geleverd. Je vindt ze in het rapport terug onder “Afbeeldingen”.
Alt-tekst: wat er staat als de foto er niet is
De alt-tekst is een korte beschrijving die je aan een afbeelding meegeeft: <img src="dak.jpg" alt="Dakdekker legt nieuwe dakpannen op een rijtjeshuis">. Hij is voor drie groepen bedoeld.
Voor blinde en slechtziende bezoekers in de eerste plaats. Hun schermlezer leest de alt-tekst voor in plaats van de foto te tonen. Staat er niets, dan hoort de bezoeker “afbeelding” of, erger nog, de bestandsnaam: “I M G onderstreep 4 7 2 1 punt J P G”.
Voor Google in de tweede plaats. Google noemt de alt-tekst in zijn eigen documentatie over afbeeldingen een korte maar beschrijvende tekst die het verband tussen de afbeelding en je inhoud uitlegt, en noemt het schrijven ervan nadrukkelijk belangrijk. Het is ook wat je zichtbaar maakt in Google Afbeeldingen, wat voor visuele branches echt verkeer oplevert.
En in de derde plaats voor iedere bezoeker bij wie de afbeelding niet laadt: trage verbinding, kapotte link, geblokkeerde CDN.
Hoe je een bruikbare alt-tekst schrijft
Beschrijf wat er te zien is, in gewone woorden, alsof je het door de telefoon aan iemand uitlegt. “Dakdekker legt nieuwe dakpannen op een rijtjeshuis” is goed. “dakdekker, dakreparatie, dakpannen, Etten-Leur, Noord-Brabant” is een rijtje zoekwoorden dat voor een schermlezer onzin oplevert en dat Google al jaren als spam herkent.
Houd het kort, een regel of twee. Begin niet met “afbeelding van” of “foto van”: de schermlezer heeft al gezegd dat het een afbeelding is.
Er is één geval waarin een lege alt-tekst juist het goede antwoord is: puur decoratieve beelden. Een scheidingslijntje, een achtergrondvorm, een pictogram naast een tekst die hetzelfde al zegt. Geef die alt="", precies zo, leeg. De schermlezer slaat hem dan over, wat hier de vriendelijkste uitkomst is. Het attribuut helemaal weglaten doet iets anders: dan gaat de schermlezer alsnog gokken.
Staat een afbeelding binnen een link en is er verder geen tekst, dan is het omgekeerde waar: dan is de alt-tekst de linktekst en moet hij de bestemming beschrijven.
Breedte en hoogte: de goedkoopste snelheidswinst die er is
Geef elke afbeelding een width en een height mee in de HTML. Niet om de afmeting op het scherm te bepalen, dat doet je CSS, maar om de verhouding door te geven. De browser kan dan de ruimte reserveren voordat het bestand binnen is.
Zonder die getallen weet de browser pas hoe groot de foto is als hij binnen is. Tot dat moment is de plek nul pixels hoog, en zodra de foto arriveert schuift alles eronder omlaag. Dat is de belangrijkste oorzaak van layout shift, en layout shift is een van de drie Core Web Vitals waar Google op meet. Meer daarover staat in het artikel over Core Web Vitals.
Het mooie is dat dit geen ontwerpkeuze is en geen afweging kent. Twee attributen per afbeelding, en de pagina staat stil terwijl hij laadt.
Het bestand zelf
Hier zit bijna altijd de grootste winst, en hier wordt het minst aan gedaan. Drie dingen.
Het formaat. JPEG en PNG zijn oude formaten. WebP levert bij dezelfde kwaliteit ongeveer een derde minder bytes, AVIF nog wat meer, en beide worden door elke browser ondersteund die er nog toe doet. Voor een WordPress-site is het meestal een kwestie van een plugin die het bij het uploaden automatisch doet.
De afmeting. Een foto van 4000 pixels breed die in een kolom van 800 pixels wordt getoond, verstuurt vijf keer zoveel gegevens als nodig. De browser schaalt hem netjes terug, dus je ziet het niet, maar je bezoeker betaalt het in laadtijd. Sla afbeeldingen op in de grootte waarin ze getoond worden, met hooguit een tweede versie voor schermen met hoge resolutie.
Lui laden. Met loading="lazy" haalt de browser een afbeelding pas op als hij in beeld komt. Voor alles onder de vouw is dat pure winst. Zet het niet op je hero-afbeelding: die moet juist zo vroeg mogelijk komen, en lazy loading maakt hem trager.
En de bestandsnaam
Een klein punt met een klein effect, maar het kost niets. dakpannen-vervangen-etten-leur.jpg vertelt Google iets; IMG_4721.jpg niet. Hernoem ze voordat je ze uploadt, niet erna: na het uploaden zit de oude naam al in je pagina’s.
Wat je vandaag kunt doen
- Open je homepage, klik met de rechtermuisknop op je grootste foto en kijk bij de eigenschappen hoeveel kilobyte hij weegt.
- Loop de afbeeldingen op je drie belangrijkste pagina’s langs en geef ze een alt-tekst die beschrijft wat erop staat.
- Geef decoratieve beelden bewust
alt=""in plaats van het attribuut weg te laten. - Controleer of je afbeeldingen een width en height in de HTML hebben.
- Zet in je CMS of bij je hoster automatische conversie naar WebP aan.
Wil je weten hoe jouw pagina er op deze punten voor staat, zonder er zelf in de broncode voor te duiken? Doe de gratis SEO-check: je ziet binnen enkele seconden je score en welke afbeeldingen er precies ontbreken.
