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:
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.
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:
- De beroemde Lenna afbeelding
- 24 afbeeldingen van de Kodak true color image suite
- 100 afbeeldingen van Tecnick.com
- Een willekeurige verzameling van meer dan 11.000 afbeeldingen van de Google Image Search
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.
Kinsta’s Afbeeldingsoptimalisatie feature
Deze eerste is niet echt een plugin, maar meer een ingebouwde feature: Kinsta’s Afbeeldingsoptimalisatie.
Deze feature – toegankelijk via Kinsta’s aangepaste dashboard, MyKinsta – maakt automatisch geoptimaliseerde WebP-kopieën van de oorspronkelijke afbeeldingen van je site, en serveert vervolgens de kleinste van de twee afbeeldingsbestanden aan je bezoekers.
Door er altijd voor te zorgen dat het kleinst mogelijke bestand wordt opgehaald, verbetert afbeeldingsoptimalisatie onmiddellijk de laadtijden, wat zowel je SEO performance als de ervaring van je gebruikers sterk kan verbeteren. De feature maakt direct gebruik van Kinsta’s bliksemsnelle CDN om de bestanden nog sneller af te leveren.
Site-eigenaren kunnen kiezen tussen lossy en lossless compressie voor hun WebP afbeeldingen, afhankelijk van hun behoeften. Optimalisatie kan ook naar believen worden in- of uitgeschakeld als je moet testen.
De afbeeldingsoptimalisatie feature is volledig gratis voor alle Kinsta klanten. Zo schakel je het in:
- Upload je afbeeldingen naar je Kinsta gehoste WordPress mediabibliotheek.
- Log in op je MyKinsta dashboard.
- Navigeer naar WordPress sites > sitenaam > CDN.
- Klik op de knop Instellingen onder de sectie Afbeeldingsoptimalisatie.
- Kies tussen lossless en lossy compressie en klik dan op Instellingen opslaan.
Als je nog niet op het Kinsta platform zit, kun je de feature zelf gratis uitproberen door een demo in te plannen.
Lossless vs Lossy compressie
Je kunt kiezen tussen lossless en lossy compressie voor je bestanden. Hoewel beide methoden je afbeeldingsbestanden comprimeren en hun metadata verwijderen, is er een groot verschil tussen beide:
- Lossless afbeeldingsoptimalisatie: Lossless afbeeldingscompressie heeft geen enkele invloed op de kwaliteit van je afbeeldingen. Je zou deze optie moeten kiezen als afbeeldingskwaliteit belangrijker voor je is dan snelheid.
- Lossy afbeeldingsoptimalisatie: Lossy afbeeldingscompressie kan de kwaliteit van je afbeeldingen verminderen. Kies deze optie om snelheid te maximaliseren en prioriteit te geven boven afbeeldingskwaliteit.
Vervolgens bekijken we enkele installeerbare WordPress plugins voor optimalisatie.
ShortPixel
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 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:
Om WebP afbeeldingen in te schakelen, ga je naar het tabblad Advanced en:
- Vink je het vakje voor WebP image aan
- Vink je het vakje voor Deliver the WebP versions… aan dat verschijnt nadat je het eerste vakje hebt aangevinkt
- Selecteer je de radio button voor Using the <PICTURE> tag syntax die verschijnt na het aanvinken van het vorige vakje
- Laat je de standaardinstelling Only via WordPress hooks selection
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 is een populaire plugin voor het optimaliseren van afbeeldingen van dezelfde ontwikkelaar als WP Rocket.
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.
Om WebP afbeeldingen in te schakelen, scroll je naar beneden tot Optimization en zoek je het deel over WebP format:
- Vink het vakje aan bij Create webp versions of images
- Vink het vakje aan bij Display images in webpformat…
- Selecteer de radio button voor use <picture> tags
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 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:
- Het kan je afbeeldingen aanleveren via hun CDN (dat draait op Amazon CloudFront).
- 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:
Aangezien Optimole je afbeeldingen via hun eigen CDN levert, hoef je geen Nginx regels aan te laten maken als je door Kinsta gehost wordt.
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. En vergeet niet dat Kinsta klanten automatisch gecomprimeerde WebP afbeeldingen kunnen genereren, zonder kosten in schijfruimte, door gebruik te maken van Kinsta’s gratis, ingebouwde Afbeeldingsoptimalisatie feature.
Als je vragen hebt over het gebruik van WebP op WordPress, stel ze dan aan ons in de reacties hieronder!
Jon is de Chief Operating Officer bij Kinsta en is dagelijks betrokken bij de sales-, klantenservice- en technische ondersteuningsteams van Kinsta. Jon is een familieman. Dus als hij niet koortsachtig op de toetsen van zijn laptop aan het tikken is, is hij meestal een van zijn kinderen aan het helpen met het repareren van een fiets of het opzetten van Netflix voor een ongeduldige kleuter.
Laat een reactie achter