Als je je WordPress site wilt versnellen, biedt het verkleinen van de bestandsgrootte van je afbeeldingen een aanzienlijk rendement. Gemiddeld zijn afbeeldingen goed voor ongeveer de helft van de bestandsgrootte van een webpagina, dus zelfs kleine verbeteringen kunnen enorme resultaten opleveren. WebP kan je daar enorm mee helpen!

WebP is een modern afbeeldingsformat waarmee je de bestandsgrootte van je afbeeldingen kunt wijzigen zonder de weergave aan te passen. Gemiddeld levert conversie van een afbeelding naar WebP een verkleining van de bestandsgrootte van zo’n 25-35% op – zonder verlies aan kwaliteit.

De meeste moderne browsers en WordPress 5.8+ ondersteunen WebP out of the box. In dit artikel gaan we uitgebreid kijken naar deze spannende nieuwe afbeeldingsindeling en laten we je zien hoe je deze ten volle kan benutten.

Ben je er klaar voor? Laten we snel beginnen!

Wat is WebP?

Wat is een WebP bestand? In kort: WebP is een afbeeldingsindeling die is ontwikkeld door Google om afbeeldingen beter te optimaliseren dan populaire afbeeldingsindelingen (op dat moment). Je hebt bijvoorbeeld andere formats zoals JPG of JPEG en PNG. WebP is een alternatief voor die formats.

Opmerking: bekijk hoe verschillende soorten afbeeldingsbestanden de snelheid van je website kunnen beïnvloeden.

WebP richt zich volledig het verkleinen van de bestandsgrootte, terwijl de weergavekwaliteit hetzelfde blijft. Door de grootte van je afbeeldingen te verkleinen zonder in te boeten aan kwaliteit, bied je dezelfde gebruikerservaring voor je bezoekers, maar zal je website sneller laden.

Ter illustratie, in het WebP compressie-onderzoek van Google bleek dat een WebP afbeelding gemiddeld:

  • 25-34% kleiner is dan een vergelijkbare JPEG afbeelding.
  • 26% kleiner is dan een vergelijkbare PNG afbeelding.

Wanneer je je website door PageSpeed Insights haalt, is het dan ook niet raar dat een van de aanbevelingen is om afbeeldingen in moderne formats zoals WebP te laden:

Google PageSpeed Insights raadt aan om WebP afbeeldingen te gebruiken
Google PageSpeed Insights raadt aan om WebP afbeeldingen te gebruiken

Hoe behaalt het WebP format van Google zulke significante verkleiningen in bestandsgrootte?

WebP ondersteunt zowel ‘lossy’ als ‘lossless’ compressie, waardoor de precieze verkleining afhangt van welke compressie je gebruikt.

Bij lossy compressie, gebruikt WebP “predictive coding” om de bestandsgrootte te verminderen. Predictive coding, oftewel voorspellende codering, gebruikt de waarden van nabijgelegen pixels in een afbeelding om de waarde te bepalen en codeert vervolgens alleen het verschilt. Het is gebaseerd op VP8 key frame encodering.

Lossless WebP gebruikt een veel gecompliceerdere set methoden die is ontwikkeld door het WebP team.

Als je meer wilt weten over de precieze WebP compressietechnieken, is dit artikel een goede plek om te beginnen.

Welke webbrowsers ondersteunen WebP?

De webbrowser van een bezoeker moet WebP afbeeldingen ondersteunen, anders werken ze niet. En alhoewel WebP inmiddels veel breder wordt ondersteund, is de compatibiliteit met WebP nog niet universeel.

WebP afbeeldingen worden ondersteund door populaire browsers, zoals:

  • Chrome (desktop en mobiel)
  • Firefox (desktop en mobiel)
  • Microsoft Edge
  • iOS en macOS Safari (alleen macOS 11 Big Sur en hoger)
  • Opera (desktop en mobiel)

Op het moment dat we dit artikel schrijven, ondersteunt Safari slechts gedeeltelijk WebP afbeeldingen.

Internet Explorer biedt ook geen ondersteuning voor WebP (maar Edge ondersteunt WebP omdat het gebaseerd is op Chromium). Het IE gebruik is echter teruggelopen tot minder dan 1% van de totale internetgebruikers. Dat is een zegen voor iedereen op het web!

In totaal gebruikt ongeveer 95% van de internetgebruikers een browser die WebP ondersteunt. Dus hoewel het zeker de steun van de meerderheid geniet, is die 5% wel een kleine hindernis, vooral als het Safari gebruikers zijn op oudere macOS versies. In onze WordPress WebP tutorial hieronder laten we je zien hoe je hiermee omgaat, zodat al je bezoekers een geweldige ervaring hebben.

WebP ondersteuning onder de belangrijkste browsers.
WebP ondersteuning onder de belangrijkste browsers.

De bestandsgrootte van WebP vs JPG vs PNG

Volgens tests van Google zijn afbeeldingen van WebP:

  • 25-34% kleiner is dan een vergelijkbare JPEGafbeelding.
  • 26% kleiner is dan een vergelijkbare PNG afbeelding.

Als je meer over de methodologie van Google wilt weten, kun je hieronder de directe links naar de volledige resultaten vinden:

Beide tests zijn gebaseerd op meer dan 11.000 afbeeldingen waaronder:

Zo gebruik je WebP afbeeldingen bij WordPress

Beginnend met WordPress 5.8 kun je de WebP afbeeldingsindeling op dezelfde manier gebruiken als JPEG-, PNG- en GIF indelingen. Upload je afbeeldingen naar je mediabibliotheek en voeg ze toe aan je inhoud. Omdat WordPress 5.8+ standaard de WebP indeling ondersteunt, hoef je geen externe plugins te installeren om WebP afbeeldingen te uploaden. Dat zou voor de meest voorkomende gebruiksgevallen voldoende moeten zijn.

Om direct aan de slag te gaan, kun je onze snelle primer raadplegen over het gebruik van WebP afbeeldingen in WordPress 5.8+. We raden je aan om de nadelen over WebP ondersteuning in WordPress door te nemen.

Ongeveer 5% van de mensen (voornamelijk Safari gebruikers op oudere macOS) maakt echter gebruik van een webbrowser die WebP niet ondersteunt. Als je WebP afbeeldingen converteert en ze rechtstreeks in je inhoud gebruikt, kunnen deze bezoekers je afbeeldingen niet zien, wat hun surfervaring zou verpesten.

Het genereren van WebP afbeeldingen is niet zo eenvoudig als het verkrijgen van een JPG/JPEG afbeelding, wat de standaard afbeeldingsbestandsindeling is op de meeste camera ‘s, smartphones en online afbeeldingsbibliotheken. WordPress ondersteunt (nog!) geen automatische conversie van afbeeldingen naar WebP indeling.

Geen zorgen! Er is een oplossing.

Je kan een WordPress plugin gebruiken die je originele afbeeldingen converteert naar de WebP indeling en ook de originele afbeelding als een fallback biedt als de browser van een bezoeker WebP niet ondersteunt.

Als je bijvoorbeeld een JPEG bestand uploadt naar je site, zal de plugin:

  • Zet het JPEG bestand om in WebP en serveer de WebP versie voor Chrome, Firefox, Edge, enz.
  • Het originele JPEG bestand laten zien aan gebruikers met Safari (op oudere macOS versies) en andere browsers die WebP niet ondersteunen.

Op die manier kan iedereen je afbeelding zien en krijgt iedereen de snelst de best mogelijke gebruikerservaring.

Hieronder zullen we een aantal van de beste WebP WordPress plugins doornemen, die allemaal perfect samenwerken met Kinsta en het Kinsta CDN.

ShortPixel

ShortPixel WordPress plugin
ShortPixel WordPress plugin

 

ShortPixel is een populaire WordPress plugin voor optimalisatie van afbeeldingen waarmee je automatisch afbeeldingen kunt resizen en comprimeren binnen je WordPress website.

Een onderdeel van de lijst met features is dat ShortPixel je ook kan helpen bij het omzetten van afbeeldingen naar WebP en die afbeeldingen aanbieden aan browsers die WebP ondersteunen.

ShortPixel heeft een beperkt gratis pakket waarmee je ongeveer 100 afbeeldingen per maand kan optimaliseren. Daarboven beginnen betaalde pakketten bij $4.99 per maand voor 5.000 afbeelding of credits of $9.99 eenmalig voor een pakket van 10.000 credits.

ShortPixel telt elke grootte van een WordPress afbeelding die je optimaliseert als één credit. Als je dus diverse thumbnail-groottes wilt optimaliseren voor een afbeelding, kan die ene afbeelding diverse credits kosten. Er is geen beperking qua bestandsgrootte voor afbeeldingen.

Je kunt je ShortPixel credits uitspreiden over zoveel websites als je wilt, er zijn geen limieten per site (en al je websites kunnen hetzelfde ShortPixel account gebruiken).

Om ShortPixel te gebruiken voor het laden van WebP afbeeldingen binnen WordPress, moet je de plugin installeren vanaf WordPress.org en je API sleutel toevoegen die je krijgt bij het registreren van een gratis ShortPixel account.

In het tabblad General kun je de basisinstellingen configureren voor hoe de optimalisatie van afbeeldingen moet werken. Zo kun je bijvoorbeeld aangeven welk compressieniveau er gebruikt moeten worden en of afbeeldingen geresized moeten worden:

Het instellen van het compression level en afmetingen voor afbeeldingen binnen ShortPixel
Het instellen van het compression level en afmetingen voor afbeeldingen binnen ShortPixel

Om WebP afbeeldingen in te schakelen, ga je naar het tabblad Advanced en:

  1. Vink je het vakje voor WebP image aan
  2. Vink je het vakje voor Deliver the WebP versions… aan dat verschijnt nadat je het eerste vakje hebt aangevinkt
  3. Selecteer je de radio button voor Using the <PICTURE> tag syntax die verschijnt na het aanvinken van het vorige vakje
  4. Laat je de standaardinstelling Only via WordPress hooks selection
Het inschakelen van WordPress WebP afbeeldingen in ShortPixel
Het inschakelen van WordPress WebP afbeeldingen in ShortPixel

Vervolgens sla je je wijzigingen op.

Als je bij Kinsta gehost wordt, zal ShortPixel je een waarschuwing geven over het configureren van server configbestanden binnen Nginx. Om dit te regelen, kun je contact opnemen met Kinsta support. Wij zullen dan je server voor je configureren.

Imagify

Imagify WordPress plugin
Imagify WordPress plugin

Imagify is een populaire plugin voor het optimaliseren van afbeeldingen van dezelfde ontwikkelaar als WP Rocket (van de weinige cachingplugins is die werkt met Kinsta).

Moe van langzame hosting van je WordPress-site? Wij leveren razendsnelle servers en 24/7 support van wereldklasse van WordPress-experts. Bekijk onze pakketten.

Het kan automatisch afbeeldingen comprimeren en resizen nadat je ze uploadt naar je WordPress site. Daarna kan de plugin je helpen bij het omzetten naar WebP format en de WebP versies leveren aan bezoekers met ondersteunde browsers.

Qua features hebben ShortPixel en Imagify veel overlap. Het grootste verschil zit in de prijs. Waar ShortPixel kosten rekent op basis van aantal afbeeldingen zonder beperking qua bestandsgrootte per afbeelding, rekent Imagify juist over de totale bestandsgrootte, zonder beperking qua aantal afbeeldingen.

Als je dus veel grote afbeeldingen moet optimaliseren, is ShortPixel waarschijnlijk goedkoper. Maar als je juist veel kleinere afbeeldingen moet optimaliseren, is Imagify de betere keuze.

Imagify heeft ook een beperkte gratis versie met 25 MB aan optimalisaties per maand. Daarna beginnen betaalde pakketten bij $4.99 per maand tot 1GB of $9.99 voor een eenmalig krediet van 1GB.

Net als bij ShortPixel kun je je account op verschillende websites gebruiken.

Om Imagify te gebruiken om je WordPress WebP afbeeldingen te leveren, zul je de plugin moeten installeren vanaf WordPress.org en je API sleutel toevoegen.

Nadat je de plugin hebt geactiveerd, kun je de box met General Settings gebruiken om je compressieniveau te kiezen.

Het instellen van het compression level in Imagify
Het instellen van het compression level in Imagify

Om WebP afbeeldingen in te schakelen, scroll je naar beneden tot Optimization en zoek je het deel over WebP format:

  1. Vink het vakje aan bij Create webp versions of images
  2. Vink het vakje aan bij Display images in webpformat…
  3. Selecteer de radio button voor use <picture> tags
Zo schakel je WordPress WebP afbeeldingen in bij Imagify
Zo schakel je WordPress WebP afbeeldingen in bij Imagify

Net als bij ShortPixel, zul je een Nginx regel aan moeten laten maken voor WebP cachebuckets als je gehost wordt door Kinsta (neem contact op met Kinsta support en we regelen het voor je).

Optimole

Optimole WordPress plugin
Optimole WordPress plugin

Optimole is een WordPress plugin voor het optimaliseren van afbeeldingen die wat anders werkt dan Imagify en ShortPixel. Optimole kan automatisch je afbeeldingen resizen en comprimeren, maar heeft daarnaast nog twee opvallende features:

  1. Het kan je afbeeldingen aanleveren via hun CDN (dat draait op Amazon CloudFront).
  2. Het biedt realtime adaptieve afbeeldingen waarbij Optimole elke afbeelding op ideale grootte levert aan elke bezoeker. Als iemand dus op een kleiner scherm browset krijgen ze een lagere resolutie te zien dan iemand op een Retinascherm.

Deze aanpak lijkt sterk op andere realtime optimalisatie/manipulatie diensten zoals Cloudinary, imgix, KeyCDN Image Processing, etc.

Optimole kan ook WebP afbeeldingen leveren aan bezoekers met browsers die het ondersteunen als onderdeel van deze realtime afbeeldingsoptimalisatie.

Optimole heeft een beperkt gratis pakket dat afbeeldingen kan leveren tot aan ongeveer 5000 bezoekers per maand. Daarna beginnen betaalde pakketten bij $19 per maand voor 25.000 bezoekers.

Om te beginnen moet je de plugin installeren vanaf WordPress.org en activeren met de API sleutel, die je krijgt bij het registreren voor een gratis Optimole account.

Daarna zal Optimole automatisch je afbeeldingen gaan optimaliseren en aanbieden via hun CDN. WebP ondersteuning staat standaard aan, dus dit hoef je niet zelf in te schakelen.

Om de andere instellingen te configureren, zoals de compressieniveaus en scaling, kun je naar Media → Optimole → Settings gaan:

Optimole schakelt WordPress WebP afbeeldingen standaard in.
Optimole schakelt WordPress WebP afbeeldingen standaard in.

Aangezien Optimole je afbeeldingen via hun eigen CDN levert, hoef je geen Nginx regels aan te laten maken als je door Kinsta gehost wordt.

Verhoog ⬆️ de snelheid door je afbeeldingsgrootte te verkleinen ⬇️. Leer hier hoe je het WebP format kunt gebruiken op je #WordPress website 💥Click to Tweet

Samenvatting

De afbeeldingen van je WordPress site vormen een groot deel van de bestandsgrootte van een gemiddelde pagina. Als je manieren kunt vinden om de grootte van je afbeeldingen te verkleinen, kun je je site versnellen zonder de gebruikerservaring te schaden. WebP is een moderne afbeeldingsindeling die precies dat doet door een vermindering van ~25% in bestandsgrootte ten opzichte van vergelijkende JPEG- of PNG bestanden aan te bieden.

Ongeveer 95% van de internetgebruikers maakt al gebruik van een browser die WebP ondersteunt. WordPress 5.8+ versies ondersteunen nu ook WebP out of the box. Dus er is geen reden om het niet te gebruiken.

Een klein deel van de browsers, met name Safari op oudere macOS versies, biedt echter nog steeds geen ondersteuning voor WebP. Daarom kun je nog niet alle bezoekers WebP afbeeldingen laten zien. Om dit probleem aan te pakken, kun je een WordPress plugin gebruiken die afbeeldingen naar WebP converteert en WebP versies levert aan bezoekers van wie de browsers dit ondersteunen terwijl je de oorspronkelijke afbeeldingen gebruikt voor bezoekers van wie de browsers dit niet doen.

Voor meer tactieken om je afbeeldingen te optimaliseren kun je onze volledige gids voor het optimaliseren van afbeeldingen voor de beste prestaties lezen.

Als je vragen hebt over het gebruik van WebP op WordPress, stel ze dan aan ons in de reacties hieronder!


Bespaar tijd en kosten en maximaliseer siteprestaties met:

  • Directe hulp van WordPress-hostingexperts, 24/7.
  • Cloudflare Enterprise integration.
  • Globaal bereik met 32 datacenters verspreid over de wereld.
  • Optimalisatie met onze ingebouwde Application Performance Monitoring.

Dat alles en nog veel meer, in één pakket zonder langlopende contracten, met migraties en een 30 dagen geld-terug-garantie. Bekijk onze pakketten of neem contact op met sales om het pakket te vinden dat bij je past.