Hoe u WebP-afbeeldingen gebruikt in WordPress

Je vraagt je misschien af hoe je WebP-afbeeldingen in WordPress kunt gebruiken. Door over te schakelen naar het WebP-formaat kun je de bestandsgrootte van afbeeldingen aanzienlijk verkleinen zonder kwaliteitsverlies, wat helpt om pagina's sneller te laden en de algehele gebruikerservaring te verbeteren. In deze handleiding bespreken we praktische methoden om WebP-afbeeldingen effectief te implementeren op je WordPress-site. 

WebP is een modern beeldformaat ontwikkeld door Google dat betere compressie biedt in vergelijking met formaten zoals JPEG en PNG. Naast snellere laadtijden kan het gebruik van WebP ook een positieve invloed hebben op SEO, de serverbandbreedte verminderen en ervoor zorgen dat uw website optimaal functioneert op verschillende apparaten en browsers. Dit artikel leidt u door verschillende benaderingen, waaronder plugins en serverinstellingen, om een naadloze overgang te garanderen.

Wat is een WebP-afbeelding?

WebP is een modern beeldformaat ontwikkeld door Google, specifiek voor het web. Het belangrijkste voordeel is dat het veel kleinere bestandsgroottes produceert dan traditionele formaten, zoals JPEG en PNG, meestal 25-35% kleiner, terwijl dezelfde visuele kwaliteit behouden blijft. Dit betekent dat uw website sneller kan laden zonder de beeldkwaliteit in te boeten, wat vooral gunstig is voor sites met veel afbeeldingen, zoals blogs, portfolios of online winkels.

WebP ondersteunt zowel lossy als lossless compressie, evenals functies zoals transparantie en animatie, waardoor het een veelzijdig alternatief is voor meerdere oudere formaten. Door de grootte van afbeeldingsbestanden te verkleinen, helpt WebP de algehele prestaties van de website te verbeteren, het bandbreedtegebruik te verlagen en een vloeiendere ervaring te bieden aan bezoekers.

De meeste moderne browsers ondersteunen nu WebP, waaronder Chrome, Firefox, Edge, Opera en Safari (iOS 14 en later), die gezamenlijk ongeveer 95% van de internetgebruikers bedienen. Alleen een klein deel van de oudere browsers, zoals Internet Explorer of oudere versies van Safari, ondersteunen WebP niet. Voor deze gevallen kunnen websites terugval-JPEG- of PNG-afbeeldingen gebruiken om ervoor te zorgen dat iedereen de foto's correct ziet.

Hoe WebP-afbeeldingen te gebruiken in WordPress

Het gebruik van WebP-afbeeldingen in WordPress is een slimme manier om de snelheid en algehele prestaties van uw site te verbeteren. Door dit moderne afbeeldingsformaat toe te passen, kunt u kleinere, hoogwaardige afbeeldingen leveren die sneller laden voor bezoekers, waardoor zowel de gebruikerservaring als SEO worden verbeterd.

In dit gedeelte verkennen we verschillende praktische methoden om WebP-afbeeldingen te implementeren op je WordPress-site.

WebP-afbeeldingen gebruiken in WordPress met EWWW Optimizer

EWWW Image Optimizer is een van de beste WordPress-beelddcompressieplugins die niet alleen de grootte van afbeeldingsbestanden verkleint, maar ook het WebP-formaat ondersteunt. Het kan automatisch WebP-afbeeldingen leveren aan compatibele browsers, waardoor uw website sneller laadt en beter presteert.

De eerste stap is het installeren en activeren van de EWWW Image Optimizer-plugin. Ga na activering naar Instellingen > EWWW Image Optimizer om de opties te configureren.

Blader in het instellingenscherm naar beneden en schakel de "WebP-conversie'"optie in en klik vervolgens op "Wijzigingen opslaan" om uw configuratie op te slaan.

Navigeer vervolgens naar het gedeelte WebP-conversie, waar de plugin enkele herschrijfregels weergeeft met een rode voorbeeldafbeelding. Klik "Herschrijfregels invoegen" om deze regels automatisch toe te voegen aan uw .htaccess-bestand.

Als het lukt, wordt de voorbeeldafbeelding groen en wordt deze gelabeld als "WebP".

Om eerder geüploade afbeeldingen naar WebP te converteren, gaat u naar Media > Bibliotheek en schakelt u over naar de lijstweergave. Pas het aantal items per pagina aan via Schermopties om meerdere foto's tegelijk te selecteren. Gebruik het selectievakje Alles selecteren, kies Bulk optimaliseren uit het vervolgkeuzemenu en klik op Toepassen.

De plugin stelt u in staat om compressie over te slaan en alleen afbeeldingen naar WebP te converteren als ze al zijn geoptimaliseerd. Klik op Scannen op niet-geoptimaliseerde afbeeldingen en controleer alleen WebP.

Eenmaal voltooid zal EWWW WebP-versies genereren voor alle geselecteerde afbeeldingen.

Om te bevestigen dat WebP-levering werkt, opent u een bericht met meerdere afbeeldingen. Klik met de rechtermuisknop op een afbeelding en selecteer "Openen in nieuw tabblad". Als de URL eindigt op .webp, betekent dit dat uw WordPress-site met succes WebP-afbeeldingen levert.

WebP-afbeeldingen gebruiken in WordPress met ShortPixel

ShortPixel is een van de meest gebruikte WordPress-plug-ins voor beeldoptimalisatie, ontworpen om automatisch afbeeldingen te verkleinen en te comprimeren die naar uw website worden geüpload. Een van de functies is dat u afbeeldingen kunt converteren naar het WebP-formaat en deze kunt serveren aan browsers die dit moderne formaat ondersteunen, waardoor de laadsnelheid van de pagina en de algehele prestaties worden verbeterd.

De plugin telt elke afbeeldingsgrootte die je optimaliseert als een tegoed, wat betekent dat het optimaliseren van meerdere miniatuurafbeeldingen voor een enkele afbeelding mogelijk meerdere tegoeden gebruikt. Er zijn geen beperkingen op de bestandsgrootte, en je kunt je ShortPixel-tegoeden verspreiden over een onbeperkt aantal websites, allemaal onder hetzelfde ShortPixel-account, waardoor het flexibel is voor het beheren van meerdere sites.

Om WebP-afbeeldingen te gaan aanbieden met ShortPixel, moet u de plugin installeren vanuit WordPress.org.

Voer vervolgens uw API-sleutel in, die u kunt verkrijgen door u aan te melden voor een gratis ShortPixel-account.

In het tabblad Algemene instellingen kunt u de basisoptimalisatievoorkeuren configureren, zoals compressieniveau en het wijzigen van de afbeeldingsgrootte. Om WebP-levering in te schakelen, schakelt u Geavanceerde modus. Schakel daarna WebP-afbeeldingen maken en WebP/AVIF-afbeeldingen aanbieden... in, selecteert u de <PICTURE>-tag-syntaxis optie. Klik zodra u klaar bent op Opslaan.

WebP-afbeeldingen gebruiken in WordPress met Imagify

Imagify is een plugin voor beeldoptimalisatie voor WordPress, ontwikkeld door het team achter WP Rocket, een toonaangevende cachingplugin. Het biedt een eenvoudige manier om afbeeldingen te comprimeren en om te zetten naar het WebP-formaat voor snellere laadtijden en betere prestaties.

Om aan de slag te gaan, installeer en activeer je de Imagify-plugin op je WordPress-site. 

Eenmaal geactiveerd, navigeer naar Instellingen > Imagify om de plugin te configureren. Klik op "Maak een gratis API-sleutel aan", en geef vervolgens een geldig e-mailadres op. U ontvangt een e-mail met uw API-sleutel, die u moet kopiëren en plakken in de plugin-instellingen, en klik vervolgens op "Wijzigingen opslaan".

Ga vervolgens naar het optimalisatiegedeelte, klik op WEBP en schakel het in samen met "Afbeeldingen weergeven in Next-GEN-formaat op de site".

Imagify biedt twee methoden voor het leveren van WebP-afbeeldingen, de .htaccess-methode en de tag-methode. De .htaccess-methode is sneller, maar werkt mogelijk niet als je een CDN gebruikt, terwijl de tag-methode compatibel is met CDNs, maar mogelijk conflicteert met sommige thema's. Kies de methode die het beste bij je setup past en klik op "Opslaan & Ga naar Bulk Optimizer".

Op de Media > Bulk Optimization pagina zal de plugin automatisch beginnen met het verwerken van alle afbeeldingen op de achtergrond. Als uw site veel foto's heeft, kan het proces enige tijd duren.

Om te verifiëren dat WebP-afbeeldingen worden geleverd, open je een bericht of pagina met foto's, klikt met de rechtermuisknop op een afbeelding en selecteert "Afbeelding openen in nieuwe tab". De URL van de afbeelding moet eindigen met .webp, wat bevestigt dat Imagify met succes WebP-versies op je WordPress-site levert.

Naast het optimaliseren van afbeeldingen met plugins, overweeg WP Media Folder te gebruiken om uw WordPress-mediabibliotheek beter te beheren. Deze plugin helpt bij het organiseren van afbeeldingen in mappen, waardoor het makkelijker wordt om grote hoeveelheden media te beheren, terwijl het naadloos integreert met plugins voor beeldoptimalisatie om ervoor te zorgen dat uw WebP-bestanden altijd correct worden beheerd.

Voordelen van WebP voor prestatieoptimalisatie

WebP is een modern afbeeldingsformaat dat is ontworpen om de prestaties van websites te verbeteren door de bestandsgrootte te verkleinen zonder kwaliteitsverlies. Het gebruik van WebP op WordPress-sites zorgt ervoor dat pagina's sneller laden, biedt een vloeiendere browse-ervaring en verlaagt het bandbreedtegebruik, waardoor het een waardevol hulpmiddel is voor website-optimalisatie.

Kleinere bestandsgroottes

WebP-afbeeldingen zijn aanzienlijk kleiner dan traditionele formaten zoals JPEG en PNG, vaak wordt de bestandsgrootte met 25–35% verkleind terwijl dezelfde visuele kwaliteit behouden blijft. Deze verkleining van de grootte zorgt ervoor dat webpagina's sneller laden, wat vooral belangrijk is voor sites met veel afbeeldingen, zoals portfolio's, e-commerce-winkels of fotoblogs.

Kleinere bestanden helpen ook bij het beheren van opslag op uw hostingserver. Door de afbeeldingsgrootte te optimaliseren, verkleint u de gebruikte schijfruimte, waardoor back-ups sneller en efficiënter worden terwijl uw website soepel blijft werken.

Snellere pagina laadtijd

Omdat WebP-afbeeldingen lichter zijn, kunnen browsers ze sneller downloaden, wat de laadtijd van pagina's rechtstreeks versnelt. Dit is cruciaal voor de gebruikerservaring, aangezien langzaam ladende pagina's bezoekers vaak frustreren en het bouncepercentage verhogen, vooral op mobiele apparaten met langzamere internetverbindingen.

Snellere laadtijden maken het ook gemakkelijker om andere prestatieverbeteringen te implementeren, zoals lazy loading en caching, omdat de afbeeldingen zelf geen bottleneck meer vormen. Dit zorgt ervoor dat uw site responsief en naadloos aanvoelt voor gebruikers.

Betere SEO-prestaties

Snelheid van de website

Bovendien stelt WebP sites in staat om hoogwaardige visuals te behouden zonder prestatieverlies, wat betekent dat je aantrekkelijke, gedetailleerde afbeeldingen kunt behouden zonder SEO te compromitteren. Deze balans tussen esthetiek en snelheid helpt om meer bezoekers aan te trekken en te behouden.

Verminderde bandbreedte en serverbelasting

Kleinere WebP-bestanden verbruiken minder bandbreedte, wat vooral gunstig is voor websites met veel verkeer. Het verminderen van de hoeveelheid gegevens die voor elke paginaweergave worden verzonden, kan de hostingkosten verlagen en serveroverbelasting tijdens piekverkeersperioden voorkomen.

Een lagere serverbelasting verbetert ook de algehele betrouwbaarheid van de website. Met minder belasting op resources blijven pagina's toegankelijk en snel, zelfs wanneer meerdere gebruikers tegelijkertijd de site bezoeken, waardoor een betere ervaring voor iedereen ontstaat.

Ondersteunt moderne webfuncties

WebP ondersteunt zowel lossy als lossless compressie, evenals functies zoals transparantie en animatie. Deze veelzijdigheid stelt het in staat om meerdere oudere afbeeldingsformaten te vervangen, waardoor het beheer van afbeeldingen wordt vereenvoudigd terwijl de kwaliteit behouden blijft.

Door moderne functies te ondersteunen, stelt WebP websites in staat om geavanceerde visuele effecten te gebruiken zonder prestatieverlies. Ontwerpers kunnen hoogwaardige afbeeldingen, geanimeerde graphics of transparante overlays opnemen, allemaal terwijl ze de pagina-snelheid geoptimaliseerd houden.

Conclusie

Het gebruik van WebP-afbeeldingen in WordPress kan de snelheid, efficiëntie en algehele prestaties van uw website aanzienlijk verbeteren. Door uw foto's om te zetten naar het WebP-formaat verkleint u de bestandsgrootte zonder visuele kwaliteit te verliezen, wat helpt om pagina's sneller te laden, de serverbelasting te verlagen en een vloeiendere ervaring voor bezoekers op verschillende apparaten te bieden. Het implementeren van WebP vormt ook een aanvulling op andere optimalisatiestrategieën, zoals caching en het gebruik van een CDN, om ervoor te zorgen dat uw WordPress-site efficiënt werkt.

Over het algemeen biedt het gebruik van WebP-afbeeldingen meerdere voordelen, waaronder snellere pagina-inlading, verbeterde SEO, verminderd bandbreedtegebruik en ondersteuning voor moderne webfuncties zoals transparantie en animatie. Of u nu plugins gebruikt zoals EWWW Optimizer, ShortPixel of Imagify, of server-gebaseerde oplossingen implementeert, zorgt het overschakelen naar WebP ervoor dat uw website visueel aantrekkelijk blijft en optimaal presteert voor alle gebruikers. Voor nog betere mediabibliotheekbeheer, overweeg WP Media Folder te gebruiken om uw afbeeldingen efficiënt te ordenen en WebP-optimalisatie nog eenvoudiger te maken.