Wanneer je jouw WordPress website sneller wilt maken, is het zoeken naar manieren om je afbeeldingen te verkleinen een goede investering van je tijd en moeite.

Gemiddeld bestaat de helft van de bestandsgrootte van een webpagina uit afbeeldingen, dus zelfs kleine verbeteringen kunnen flinke resultaten opleveren.

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.

Klinkt goed? Vinden wij ook. Daarom gaan we WebP uitgebreid bespreken!

Ben je er klaar voor? Laten we snel beginnen!

Wat is WebP?

Wat is een WebP bestand? Kort gezegd is WebP een afbeeldingsformat dat door Google is ontwikkeld. Je hebt bijvoorbeeld andere formats zoals JPG of JPEG en PNG. WebP is een alternatief voor die formats.

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…

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 WebP 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:

Maar de belangrijkste achterblijver is Safari. Op het moment van schrijven, ondersteunen zowel de desktop als mobiele versie van Safari geen WebP afbeeldingen. Apple heeft kort geëxperimenteerd met WebP ondersteuning voor Safari in 2016, maar daar bleef het ook bij.

Internet Explorer ondersteunt ook geen WebP (maar Edge weer wel, omdat het gebaseerd is op Chromium).

In totaal gebruikt rond de 77% van internetgebruikers een browser die WebP ondersteunt. Alhoewel het dus zeker de ruime meerderheid is, is die 23% veel te veel om te negeren (in onze WordPress WebP tutorial hieronder, laten we zien hoe je alles zo in kunt stellen dat ál je bezoekers een perfecte ervaring hebben):

WebP ondersteuning

WebP ondersteuning

De bestandsgrootte van WebP vs JPG vs PNG

Volgens tests van Google zijn afbeeldingen van WebP:

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

Zoals we al lieten zien, gebruikt 23% van de mensen (inclusief alle Safari gebruikers) immers een webbrowser die WebP niet ondersteunt. Als je al je afbeeldingen dus naar WebP zou omzetten en direct in je content zou gebruiken, zouden al die bezoekers je afbeeldingen niet kunnen zien, wat hun gebruikerservaring natuurlijk geen goed doet.

Maar geen zorgen, er is een oplossing!

In plaats van je afbeeldingen direct in WebP format te uploaden naar WordPress, kun je een WordPress plugin gebruiken die je originele afbeeldingen naar het WebP format omzet en daarnaast de originele afbeeldingen aanbiedt aan gebruikers zonder WebP ondersteuning.

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

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.

Info

Als je gehost wordt bij Kinsta, moet je even contact opnemen met onze ondersteuning, zodat we een Nginx regel voor WebP cachebuckets aan kunnen maken voor een aantal van deze plugins.

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 (wat één van de weinige cachingplugins is die werkt met Kinsta).

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.

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

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
  4. Als je gehost wordt bij Kinsta en het Kinsta CDN gebruikt, kun je de URL van je Kinsta CDN invullen bij If you use a CDN (we vertellen je hieronder waar je de Kinsta CDN URL vindt).
Zo schakel je WordPress WebP afbeeldingen in bij Imagify

Zo schakel je WordPress WebP afbeeldingen in bij Imagify

Als je het Kinsta CDN gebruikt, kun je de URL voor het CDN vinden door je website te openen in het MyKinsta dashboard en naar het tabblad Kinsta CDN gaan bij de instellingen:

Zo vind je de Kinsta CDN URL

Zo vind je de Kinsta CDN URL

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 eigen 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.

Als onderdeel van deze realtime optimalisatie, kan Optimole ook WebP afbeeldingen aanbieden aan bezoekers met ondersteunde browsers.

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:

De instellingen voor Optimole - WordPress WebP afbeeldingen zijn standaard ingeschakeld

De instellingen voor Optimole – WordPress WebP afbeeldingen zijn standaard ingeschakeld

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

Als we kijken naar de gemiddelde bestandsgrootte van pagina’s binnen WordPress, dan zien we dat de helft hiervan uit afbeeldingen bestaat. Wanneer je de bestandsgrootte van je afbeeldingen verkleint, kun je je website aanzienlijk sneller maken, zonder dat je bezoekers iets missen.

WebP is een modern afbeeldingsformat dat een vermindering van zo’n 25% in bestandsgrootte kan bieden ten opzichte van JPEG of PNG.

De meeste moderne browsers ondersteunen WebP en ongeveer 77% van de internetgebruikers heeft dan ook een ondersteunde browser. Maar sommige browsers, vooral Safari, bieden nog altijd geen ondersteuning voor WebP, dus je kunt niet standaard WebP afbeeldingen gebruiken.

Om dit probleem op te lossen kun je een WordPress plugin gebruiken die afbeeldingen omzet naar WebP en vervolgens de WebP versie aanbiedt aan bezoekers met ondersteunde browsers, terwijl de originele afbeeldingen naar de andere bezoekers gaan.

Die plugins die hier goed bij helpen zijn:

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

Heb je nog vragen over hoe je WebP kunt gebruiken bij WordPress? Vraag het ons in de reacties.


Als je dit artikel leuk vond, dan ga je Kinsta’s WordPress hosting platform ook heel erg leuk vinden! Of het nu gaat om het versnellen van je website of de 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten