Hoe optimaliseer ik mijn afbeeldingen voor zoekmachines?

1Stap 1: Geef het bestand een beschrijvende naam

Hernoem de afbeelding op je computer vóór je hem uploadt. Gebruik kleine letters, streepjes tussen de woorden en geen spaties of leestekens: webdesign-voorbeelden.jpg in plaats van IMG123.jpg of Foto 1.jpg.

De bestandsnaam wordt onderdeel van het webadres van de afbeelding. Na het uploaden kun je die naam in WordPress niet meer wijzigen zonder plugin, dus doe dit vooraf.

2Stap 2: Verklein de afbeelding tot de maat die je nodig hebt

Een foto van een camera of telefoon is vaak 4.000 pixels breed of meer, terwijl een pagina zelden meer dan 1.920 pixels breed toont. Verklein de afbeelding op je computer, bijvoorbeeld met Voorvertoning op een Mac of de app Foto’s op Windows, tot de breedte waarop hij wordt getoond: ongeveer 1.920 pixels voor een afbeelding over de volle breedte, 800 tot 1.200 pixels voor een afbeelding in de tekst.

WordPress verkleint zeer grote afbeeldingen zelf tot 2.560 pixels, maar kleiner uploaden geeft een kleiner bestand.

Wil je dat de afbeelding ook op een scherp scherm haarscherp is, ga dan uit van maximaal twee keer de weergavebreedte. WordPress maakt bij het uploaden zelf kleinere versies en voegt aan afbeeldingen in de tekst een lijst met formaten toe (srcset), zodat een telefoon automatisch een kleinere versie krijgt. Controleer wel of je thema dat bij grote beelden bovenaan en in sliders niet doorbreekt: daar staan vaak de zwaarste bestanden.

3Stap 3: Installeer een compressieplugin

Comprimeren maakt het bestand kleiner zonder dat je het verschil ziet. Ga in het WordPress-dashboard naar Plugins > Plugin toevoegen, zoek op Smush of ShortPixel, klik op Nu installeren en daarna op Activeren. Kies één van de twee; twee compressieplugins tegelijk werken elkaar tegen.

Voor ShortPixel heb je een gratis API-sleutel nodig. Die vraag je na het activeren met je e-mailadres aan in de instellingen van de plugin.

4Stap 4: Zet de plugin in op automatisch comprimeren en WebP

Open de instellingen van de plugin in het menu links. Zet de optie aan die nieuwe uploads automatisch comprimeert. Zet ook de optie aan die afbeeldingen omzet naar WebP, als die in jouw versie van de plugin beschikbaar is. De plugin levert dan WebP aan browsers die het ondersteunen.

Kies voor foto’s compressie met verlies (lossy). Een kwaliteit rond 70 tot 80 procent is voor bezoekers meestal niet van het origineel te onderscheiden. Bewaar altijd het origineel en comprimeer een al gecomprimeerd bestand niet opnieuw, want het kwaliteitsverlies stapelt zich op. Bekijk het resultaat op een scherp scherm voordat je een instelling voor de hele website doorvoert.

Let op: laat je bestaande afbeeldingen in bulk comprimeren, maak dan eerst een back-up. Lees hoe je een back-up van je WordPress-website maakt.

5Stap 5: Upload de afbeelding

Open de pagina of het bericht waarin de afbeelding moet komen. Klik op het plusteken (Blok toevoegen), kies Afbeelding en klik op Uploaden om het bestand van je computer te kiezen. Je kunt afbeeldingen ook vooraf uploaden via Media > Bibliotheek.

6Stap 6: Vul de alternatieve tekst in

Klik op de afbeelding in de editor. Vul in de zijbalk rechts het veld Alternatieve tekst in met een korte beschrijving van wat er op de afbeelding staat. Werk je vanuit de mediabibliotheek, klik dan in Media > Bibliotheek op de afbeelding en vul het veld Alternatieve tekst in bij Bijlagedetails.

Vul eventueel ook Titel en Bijschrift in. Het bijschrift verschijnt onder de afbeelding op de pagina en helpt lezers; de alt-tekst is het belangrijkst voor zoekmachines.

7Stap 7: Stel een uitgelichte afbeelding in

Open in de zijbalk rechts het onderdeel Uitgelichte afbeelding en klik op Uitgelichte afbeelding instellen. Kies de belangrijkste afbeelding van de pagina.

De website neemt de uitgelichte afbeelding op in de gestructureerde data en de sitemap. Zo weet Google welke afbeelding bij de pagina hoort, ook voor Google Afbeeldingen en voor het delen op sociale media.

8Stap 8: Voorkom verspringen en laat je hoofdbeeld direct laden

Een afbeelding zonder vaste breedte en hoogte laat de pagina verspringen tijdens het laden. Dat verspringen heet Cumulative Layout Shift (CLS) en telt mee in de Core Web Vitals, de metingen waarmee Google de ervaring op een pagina beoordeelt. WordPress geeft afbeeldingen die je via de editor plaatst zelf een breedte en hoogte. Controleer bij een paginabouwer of slider of de afbeeldingen een vaste maat of verhouding hebben. Meer uitleg over verspringen staat bij web.dev van Google (Engelstalig).

Afbeeldingen onder de vouw, het deel van de pagina dat je pas na scrollen ziet, mogen uitgesteld laden (lazy loading); WordPress doet dat standaard. Het grootste beeld bovenaan, meestal de hero-afbeelding, mag nooit uitgesteld laden. Dat beeld bepaalt de Largest Contentful Paint (LCP) en moet juist zo vroeg mogelijk binnenkomen. Zet je lazy loading aan met een plugin of paginabouwer, sluit dan het eerste beeld bovenaan uit.

9Stap 9: Controleer de laadtijd

Ga naar PageSpeed Insights, vul het adres van de pagina in en klik op Analyseren. Kijk in de lijst met verbeterpunten of er meldingen staan over afbeeldingen, bijvoorbeeld dat ze groter zijn dan nodig of in een ouder formaat worden geleverd. Pas die afbeeldingen aan en test opnieuw.