Afbeeldingen optimaliseren voor WordPress

Afbeeldingen zijn bijna altijd het zwaarste onderdeel van een WordPress-pagina. Op een typische site nemen afbeeldingen 50-80% van het totale paginagewicht in, en het is niet ongebruikelijk om één enkele niet-geoptimaliseerde hero-afbeelding te zien die zwaarder weegt dan alle HTML, CSS en JavaScript samen. Als uw site traag aanvoelt, zijn afbeeldingen het eerste om naar te kijken. Het goede nieuws is dat afbeeldingsoptimalisatie enkele van de grootste, meest eenvoudige prestatieverbeteringen biedt die u kunt bereiken.

Waarom afbeeldingen de grootste paginagewichtsfactor zijn

Een moderne smartphone-camera produceert foto's die elk 3-8 MB groot zijn. Als u deze rechtstreeks naar WordPress uploadt zonder enige verwerking, is dat wat uw bezoekers moeten downloaden. Vermenigvuldig dat met 5-10 afbeeldingen op een pagina, en u kijkt naar 30-80 MB aan afbeeldingsdata, wat genoeg is om zelfs snelle verbindingen traag te laten aanvoelen.

Paginagewicht heeft directe invloed op laadtijd, wat invloed heeft op gebruikerservaring en SEO. Google gebruikt paginasnelheid als rankingfactor, en Core Web Vitals (vooral Largest Contentful Paint) worden sterk beïnvloed door afbeeldingsgrootte. Elke kilobyte die u van uw afbeeldingen afsnijdt vertaalt zich in snellere laadtijden, lagere bouncepercentages en betere zoekrankings.

Het juiste afbeeldingsformaat kiezen

Het formaat dat u voor elke afbeelding kiest, kan een dramatisch verschil maken in bestandsgrootte. Hier is wanneer u welk formaat moet gebruiken:

• WebP: Het beste algemene formaat voor webafbeeldingen vandaag de dag. WebP levert 25-35% kleinere bestanden dan JPEG bij dezelfde visuele kwaliteit, en ondersteunt zowel lossy als lossless compressie en transparantie. Alle moderne browsers ondersteunen WebP (Chrome, Firefox, Safari 14+, Edge). Tenzij u zeer oude browsers moet ondersteunen, moet WebP uw standaardkeuze zijn.
• AVIF: Het nieuwste formaat, dat 20-30% kleinere bestanden biedt dan WebP. AVIF produceert uitstekende resultaten bij lage kwaliteitsinstellingen, waardoor het ideaal is voor grote hero-afbeeldingen waar elke kilobyte telt. De browserondersteuning groeit (Chrome, Firefox, Safari 16.4+), maar codering is langzamer dan WebP. Gebruik het waar maximale compressie belangrijk is en u zich de coderingstijd kunt veroorloven.
• JPEG: Nog steeds het meest ondersteunde formaat en een solide keuze voor foto's. Gebruik kwaliteitsinstellingen tussen 80-85% voor een goede balans tussen bestandsgrootte en visuele kwaliteit. Onder de 75% worden compressie-artefacten merkbaar. Boven de 90% is de kwaliteitsverbetering nauwelijks zichtbaar maar de toename in bestandsgrootte aanzienlijk.
• PNG: Gebruik PNG alleen wanneer u transparantie nodig hebt (logo's, pictogrammen met transparante achtergrond) of pixel-perfecte reproductie (screenshots, diagrammen). PNG-bestanden zijn doorgaans 3-5x groter dan JPEG/WebP voor fotografische content. Als u transparantie nodig hebt en kleinere bestandsgroottes wilt, overweeg dan WebP met alfakanaal.
• SVG: Perfect voor logo's, pictogrammen en eenvoudige illustraties. SVG's zijn vector-gebaseerd, dus ze schalen naar elke grootte zonder kwaliteitsverlies en wegen doorgaans slechts enkele kilobytes. Ze zijn ook stylebaar met CSS. Gebruik SVG niet voor foto's.

Afbeeldingscompressie begrijpen: lossy versus lossless

Er zijn twee fundamentele soorten compressie, en het begrijpen van het verschil helpt u betere optimalisatiebeslissingen te nemen:

Lossy-compressie verwijdert afbeeldingsdata die minder merkbaar is voor het menselijk oog. Dit bereikt veel hogere compressieratio's (vaak 70-90% bestandsgroottereductie) maar het proces is onomkeerbaar. U kunt de originele kwaliteit niet terugkrijgen. Voor webafbeeldingen is lossy-compressie op het juiste kwaliteitsniveau bijna altijd de juiste keuze, omdat de besparingen op bestandsgrootte enorm zijn en het kwaliteitsverschil onzichtbaar is op typische schermkijkafstanden.

Lossless-compressie vermindert de bestandsgrootte zonder data weg te gooien. De originele afbeelding kan perfect worden gereconstrueerd. De afweging is dat lossless-compressie doorgaans slechts 10-30% bestandsgroottereductie bereikt. Gebruik lossless-compressie voor afbeeldingen waar elke pixel telt, zoals productfotografie voor zoomweergaven in e-commerce, medische beelden of screenshots van tekst.

Voor de meeste WordPress-sites biedt een lossy-compressie-instelling van 80-85% kwaliteit een uitstekende balans. Op dit niveau is het visuele verschil ten opzichte van het origineel vrijwel niet detecteerbaar, maar de bestandsgrootte is doorgaans 60-75% kleiner.

Aanbevolen afbeeldingsafmetingen voor WordPress

Het uploaden van afbeeldingen die groter zijn dan nodig verspilt bandbreedte en vertraagt uw site. Hier zijn praktische richtlijnen voor veelvoorkomende WordPress-afbeeldingsgroottes:

• Volledige hero-afbeeldingen: 1920px breed is genoeg voor de meeste schermen. Naar 2560px gaan is redelijk als u high-DPI (Retina)-schermen op volledige breedte wilt afdekken.
• Uitgelichte afbeeldingen voor blogberichten: 1200px breed dekt de meeste themalay-outs en ziet er scherp uit op Retina-schermen.
• Contentafbeeldingen binnen berichten: Pas aan op de contentkolombreedte van uw thema. Als uw contentgebied 800px breed is, upload afbeeldingen op 1600px (2x voor Retina).
• Thumbnails en archiefafbeeldingen: 600x400px is een veelvoorkomende grootte, maar controleer wat uw thema daadwerkelijk gebruikt.
• WooCommerce-productafbeeldingen: 800-1200px op de langste zijde, afhankelijk van of uw thema zoom ondersteunt.

Het heeft geen zin om een afbeelding van 6000px te uploaden als de grootste weergave ooit 1920px is. Verklein voor het uploaden, of gebruik een plugin die bij uploaden verkleint.

WordPress-afbeeldingsgroottes en regeneratie

Wanneer u een afbeelding uploadt, genereert WordPress automatisch meerdere groottes: thumbnail (150x150), medium (300x300), medium_large (768px breed) en large (1024x1024). Uw thema en plugins kunnen extra groottes registreren.

U kunt de standaardgroottes bekijken en aanpassen in Instellingen, dan Media. Als u deze afmetingen wijzigt na het uploaden van afbeeldingen, worden de bestaande thumbnails niet automatisch bijgewerkt. U moet ze regenereren met een plugin zoals Regenerate Thumbnails of via WP-CLI:

# Regenereer alle thumbnails
wp media regenerate --yes

# Regenereer thumbnails voor een specifieke afbeelding
wp media regenerate 42

Als uw thema aangepaste afbeeldingsgroottes registreert die u zelden gebruikt, verspillen die onnodige groottes schijfruimte en verwerkingstijd bij elke upload. U kunt de plugin Stop Generating Unnecessary Thumbnails gebruiken om groottes uit te schakelen die u niet nodig hebt.

Afbeeldingsoptimalisatie-plugins

De gemakkelijkste manier om afbeeldingen in WordPress te optimaliseren is met een toegewijde plugin die afbeeldingen automatisch comprimeert wanneer u ze uploadt. Hier zijn de populairste opties:

• ShortPixel Image Optimizer: Biedt lossy-, glossy- en lossless-compressiemodi. Inclusief WebP- en AVIF-conversie. Werkt via een cloud-API, dus belast uw server niet. Het gratis plan bevat 100 credits per maand (één credit per gegenereerde afbeeldingsgrootte). De glossy-modus is bijzonder goed, omdat het bijna-lossless visuele kwaliteit biedt bij lossy-bestandsgroottes.
• Imagify: Gebouwd door hetzelfde team achter WP Rocket. Biedt Normal (lossless)-, Aggressive (lossy)- en Ultra (maximale compressie)-modi. Inclusief WebP-conversie en een bulk optimalisatietool. De interface is overzichtelijk en eenvoudig te begrijpen. Het gratis plan bevat 20 MB per maand.
• Smush: Populaire gratis optie die lossless compressie biedt zonder maandelijkse limiet. De gratis versie comprimeert afbeeldingen tot 5 MB en verwerkt bulkoptimalisatie voor maximaal 50 afbeeldingen tegelijk. De Pro-versie voegt lossy-compressie, WebP-conversie en CDN-levering toe.
• EWWW Image Optimizer: Uniek omdat het compressie lokaal op uw server kan uitvoeren zonder externe API. Goede keuze voor sites met privacyzorgen of grote volumes. Ondersteunt WebP-conversie, lazy loading en automatische afbeeldingsverkleining. De API-gebaseerde modus biedt betere compressieratio's.

Al deze plugins kunnen ook afbeeldingen optimaliseren die werden geüpload voordat de plugin werd geïnstalleerd. Zoek naar de "bulk optimize"-functie om uw bestaande mediabibliotheek te verwerken.

Afbeeldingen converteren naar WebP

Als u nog steeds JPEG- en PNG-bestanden levert, is converteren naar WebP een van de gemakkelijkste winsten. De meeste afbeeldingsoptimalisatie-plugins bevatten WebP-conversie als ingebouwde functie. Ze genereren een WebP-versie naast het origineel en leveren deze aan browsers die het ondersteunen.

Voor handmatige WebP-conversie kunt u commandoregelhulpmiddelen gebruiken:

# Converteer een enkele afbeelding naar WebP
cwebp -q 80 input.jpg -o output.webp

# Bulk-convert alle JPEG's in een directory
for file in *.jpg; do cwebp -q 80 "$file" -o "${file%.jpg}.webp"; done

Om WebP-afbeeldingen te leveren aan ondersteunende browsers met JPEG/PNG als fallback voor oudere browsers, kunt u het volgende toevoegen aan uw .htaccess-bestand:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+).(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule (.+).(jpe?g|png)$ $1.$2.webp [T=image/webp,E=REQUEST_image]
</IfModule>

Lazy loading van afbeeldingen in WordPress

Lazy loading vertraagt het laden van afbeeldingen die momenteel niet zichtbaar zijn in de browserviewport. In plaats van alle afbeeldingen te downloaden wanneer de pagina voor het eerst laadt, haalt de browser afbeeldingen pas op wanneer de gebruiker naar beneden scrollt. Dit kan de initiële paginlaadtijd dramatisch verminderen, vooral op pagina's met veel afbeeldingen.

Sinds WordPress 5.5 voegt het platform automatisch loading="lazy" toe aan afbeeldingen. Deze native browser-lazy loading wordt ondersteund door alle moderne browsers en vereist geen JavaScript.

Er zijn enkele belangrijke punten om in gedachten te houden:

• Lazy-load geen above-the-fold-afbeeldingen: Uw hero-afbeelding, logo en alle afbeeldingen die zichtbaar zijn zonder te scrollen, moeten direct laden. Lazy-loading van deze afbeeldingen schaadt de prestaties juist omdat de browser het laden vertraagt van content die de gebruiker al kan zien. Sinds WordPress 5.9 slaat het platform automatisch lazy loading over voor de eerste afbeelding op de pagina.
• Gebruik fetchpriority="high" voor hero-afbeeldingen: Het toevoegen van fetchpriority="high" aan uw belangrijkste above-the-fold-afbeelding vertelt de browser om het downloaden ervan te prioriteren. Dit kan Largest Contentful Paint-scores aanzienlijk verbeteren.
• Controleer of uw thema lazy loading niet verwijdert: Sommige oudere thema's of pagebuilders verwijderen het loading-attribuut. Controleer uw paginabron om te bevestigen dat het aanwezig is.

Responsieve afbeeldingen met srcset

WordPress genereert automatisch de attributen srcset en sizes voor afbeeldingen die via de contenteditor worden toegevoegd. Deze attributen vertellen de browser welke afbeeldingsgrootte moet worden gedownload op basis van de viewport-breedte, zodat een mobiele gebruiker een kleinere afbeelding downloadt dan een desktopgebruiker.

Zorg ervoor dat uw thema dit gedrag niet overschrijft. Een correct geconfigureerde responsieve afbeeldingstag ziet er als volgt uit:

<img src="photo-1024.jpg"
     srcset="photo-300.jpg 300w, photo-768.jpg 768w, photo-1024.jpg 1024w, photo-1536.jpg 1536w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="1024" height="768"
     loading="lazy"
     alt="Een beschrijvende alt-tekst" />

Als u afbeeldingen toevoegt via aangepaste code of een pagebuilder, gebruik dan wp_get_attachment_image() in plaats van handmatig <img>-tags te schrijven. Deze functie bevat automatisch srcset- en sizes-attributen.

Een CDN gebruiken voor afbeeldingslevering

Een Content Delivery Network (CDN) slaat kopieën van uw afbeeldingen op servers wereldwijd op en levert ze vanaf de locatie die het dichtst bij elke bezoeker is. Dit vermindert latentie en versnelt de levering van afbeeldingen, vooral voor bezoekers ver van uw hostingserver.

Populaire CDN-opties voor WordPress-afbeeldingen zijn:

• Cloudflare: Het gratis plan bevat een CDN met wereldwijde dekking. Het Pro-plan voegt afbeeldingsoptimalisatiefuncties toe, zoals Polish (automatische compressie) en WebP-conversie.
• BunnyCDN: Betaalbare pay-as-you-go-prijzen met uitstekende prestaties. Bevat een afbeeldingsoptimalisatiefunctie genaamd Bunny Optimizer die verkleining, compressie en WebP-conversie on the fly afhandelt.
• KeyCDN: Ontwikkelaarsvriendelijk CDN met WordPress-integratieplugins beschikbaar.

De meeste caching-plugins (WP Rocket, LiteSpeed Cache, W3 Total Cache) bevatten CDN-integratie-instellingen die de installatie eenvoudig maken.

Afbeeldings-SEO: alt-tekst en bestandsnamen

Afbeeldingsoptimalisatie gaat niet alleen over bestandsgrootte. Goede SEO-praktijken helpen uw afbeeldingen te verschijnen in Google Image Search, wat zinvol verkeer kan opleveren:

• Alt-tekst: Schrijf beschrijvende alt-tekst voor elke afbeelding. Dit helpt zoekmachines de afbeeldingsinhoud te begrijpen en is essentieel voor toegankelijkheid (schermlezers). Houd het beknopt maar beschrijvend: "Rode hardloopschoenen op witte achtergrond" is beter dan "schoenen" of "IMG_4532".
• Bestandsnamen: Hernoem afbeeldingsbestanden voor het uploaden. Gebruik beschrijvende, met streepjes gescheiden namen zoals rode-hardloopschoenen.jpg in plaats van DSC_0042.jpg. Zoekmachines gebruiken bestandsnamen als rankingsignaal voor afbeeldingszoeken.
• Title-attributen: Minder belangrijk voor SEO dan alt-tekst, maar nuttig om in sommige browsers extra context bij hover te bieden.
• Bijschriften: Afbeeldingsbijschriften worden vaker gelezen dan lopende tekst door veel bezoekers. Gebruik ze wanneer ze waarde toevoegen aan de content.

Verifieer uw afbeeldingsoptimalisatie met InspectWP

Voer na het optimaliseren van uw afbeeldingen een InspectWP-scan uit om de resultaten te controleren. InspectWP rapporteert het totale aantal afbeeldingen op uw pagina en helpt u te identificeren hoe afbeeldingsaantal en paginagewicht zich verhouden tot uw algehele prestatiemetrics. Gebruik de automatische rapportagefunctie van InspectWP om uw afbeeldingsoptimalisatie in de loop van de tijd te monitoren en regressies op te vangen na content-updates of pluginwijzigingen.