WPLounge
Pagespeed met WebP afbeeldingen
Home » Tutorials » JPEG/PNG afbeeldingen converteren naar WebP in WordPress

JPEG/PNG afbeeldingen converteren naar WebP in WordPress

Er is een nieuw vrij bestandsformaat ontwikkeld door Google die als opvolging moet gaan dienen voor de oudere standaarden zoals JPEG en PNG. Het nieuwe formaat draagt de naam WebP (spreek je uit als Weppie)  en maakt afbeeldingen een aanzienlijk stuk kleiner. Goed nieuws voor de snelheid van je WordPress website.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Gemiddeld maakt WebP namelijk afbeeldingen 39% kleiner. De compressie bij een animated gif is nog groter 64% en het bestandsformaat is 45% kleiner dan PNG, dit zijn geen slechte cijfers en kunnen je WordPress website dus veel snelheid opleveren. De nieuwe extensie wordt nog niet door alle browsers ondersteund. Hoe dat zit lees je hieronderspeed.

Ondersteuning in de verschillende browsers

Er zijn nu drie type browsers die de WebP afbeeldingen ondersteunen. Dit zijn Chrome, Opera en de laatste versie van Edge. Dat de extensie door Chrome wordt ondersteund is logisch, beide zijn namelijk ontwikkeld door Google. De ontstaansgeschiedenis  van WebP gaat al even terug, je kunt er meer lezen op de developers pagina van Google. Mocht je nu nog een wat oudere versie hebben van Edge, dan kun je de WebP alsnog gebruiken via deze plugin.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.

Wat gebeurt er met de WebP afbeelding in de andere browsers?

Wanneer een browser de extensie niet ondersteunt dan valt deze gewoon terug op de ‘oude’ WordPress website. Hiermee bedoelen we dat in browsers zoals Firefox gewoon je website met de PNG en JPEG afbeeldingen wordt getoond. Elke bezoeker heeft dus nog steeds de mogelijkheid om de website te bekijken. Met het aanbieden van de WebP variant zorg je er voor dat een gedeelte van de bezoekers kunnen genieten van een snellere website. Er is nog een tweede belangrijke reden om WebP alvast in te stellen op je WordPress website en dit heeft alles te maken  met de nieuwe web.dev tool van Google.

Nieuwe reporting tool van Google: web.dev

Google is begonnen met het ontwikkelen van een nieuwe analyse tool. Het draagt de naam web.dev en is nu nog in de bètaversie. Het is een reporting tool die een analyse maakt van de website. Aan de hand van deze analyse kunnen  ontwikkelaars bekijken in hoeverre de applicatie voldoet aan de eisen die tegenwoordig worden gesteld aan de moderne site of app. Je leest er meer over op: web.dev. De nieuwe afbeeldingsextensie sluit goed aan bij de modernisatie van het web die volgens Google nodig is. Laten we daarom snel beginnen.

Met de volgende drie simpele stappen is WebP in werking te stellen

  1. JPEG en PNG bestanden omzetten naar de WebP extensie
  2. Koppelen van de WebP afbeeldingen naar al jouw pagina’s
  3. Testen of jouw WordPress site  de WebP afbeeldingen gebruikt

Stap 1. JPEG en PNG bestanden omzetten met de volgende plugins

  • ShortPixel
  • Optimus (OptimusHQ)
  • EWWW Image Optimizer
  • Jetpack

We hebben de diverse plugins getest. ShortPixel, Optimus HQ en EWWW Image Optimizer lijken in werking en opties sterk op elkaar. Alle drie zetten ze met een simpele druk op de knop al JPEG/PNG  bestanden om naar het WebP formaat.  We laten aan de hand van ShortPixel zien hoe je de installatie in gang zet.

Het installeren van de plugin Shortpixel

  1. Installeer de Shortpixel plugin via Plugins > Nieuwe plugin
  2. Ga vervolgens naar Settings > ShortPixel en vraag via de sign-up here een API key aan.
  3.  Je ontvangt nu een API key op je mailadres die gekoppeld is aan de WordPress installatie
    (als je niet meer weet welk mail adres dit was kun je deze terugvinden in Instellingen > Algemeen > E-mail adres)
  4. Voer de API key in het veld van Step 2 en ShortPixel is geïnstalleerd.
Activeren van de ShortPixel plug-in gebeurd via een API key
Activeren van de ShortPixel plugin gebeurd via de zogenoemde API key.

Het converteren van de afbeeldingen via de ShortPixel plugin

Ga naar het tweede tabblad Advanced, in het instellingen menu bij het vierde item kies je voor enable WebP Images.

Via het tabblad advanced kun je in ShortPixel afbeeldingen omzetten naar WebP.
Via het tabblad Advanced kun je in ShortPixel afbeeldingen omzetten naar WebP.

Iets lager in hetzelfde tabblad tref je nog een interessante optie aan, namelijk die van Optimize media on upload. 

Nadat je de bovenstaande opties hebt aangevinkt kies je onderaan voor Opslaan

Converteren via Optimus HQ

Installeer en activeer de Optimus plugin en ga vervolgens naar Instellingen > Optimus. Stel de plugin als volgt in:

Converteren van de afbeeldingen naar WebP in Optimus HQ,
Converteren van de afbeeldingen naar WebP in Optimus HQ.

Converteren via EWWW Image Optimizer

Installeer en activeer de EWWW plugin en ga vervolgens naar Instellingen > EWWWW Image Optimizer. Stel de plugin als volgt in:

Converteren van de afbeeldingen naar WebP in EWWW Image Optimizer.
Converteren van de afbeeldingen naar WebP in EWWW Image Optimizer.

Stap 2. Koppelen van de WebP afbeeldingen naar al jouw pagina’s

De eerste stap hebben we nu gezet, de afbeeldingen zijn nu aanwezig in het nieuwe formaat. Nu moeten we er nog voor gaan zorgen dat de pagina’s en posts verwijzen naar het .webp bestand. Een handige plugin die we hiervoor kunnen gebruiken is Cache Enabler.

Cache Enabler maakt van de aanwezige pagina’s statische pagina’s die een verwijzing naar de .webp afbeeldingen zullen gaan bevatten. Deze cached version van de pagina’s kun je activeren door bij Cache Behavior de optie: Create an additional version aan te vinken. Zie de inzet hieronder om te zien waar je dit doet.

Ga via Instellingen > naar Cache Enabler en selecteer de hierboven beschreven optie.

Via Cache Enabler maken van van de website pagina's cached bestanden die de WebP afbeeldingen bevatten.
Via Cache Enabler maken van van de website pagina’s cached bestanden die de WebP afbeeldingen bevatten.

De ShortPixel, Optimus HQ en EWWW Image optimizer werken allemaal in combinatie met de Cache Enabler plugin. Je hebt dus beide plugins nodig om .webp te laten werken in WordPress.

Converteren via JetPack kan ook maar is net even anders…

Als je JetPack wilt inzetten om .webp te gebruiken dan werkt het net iets anders.
Allereerst moet je JetPack installeren en activeren via een API key zoals je dit bij ShortPixel e.d. hebt gedaan.
Wanneer JetPack geactiveerd is, ga je naar het Dashboard en in de rubriek Performance & Security activeer je de Photon module. Vervolgens is een query string worden de afbeeldingen comprimeert via de server.

Via de optie Photon activeer je de WebP conversie.
Via de optie Photon activeer je de WebP conversie.

Omdat het aanbieden van de WebP afbeeldingen via een WordPress CDN server gebeurt, betekent dit wel dat dit een extra belasting is voor de DNS server.

Stap 3. Testen of jouw WordPress site de WebP afbeeldingen gebruikt

Wanneer je de bovenstaande stappen hebt doorlopen is WebP beschikbaar voor WordPress. Als laatste zullen we de werking ervan nog even moeten testen. Dit kun je testen door een afbeelding op je website op te slaan  met afbeelding opslaan als.

Door een afbeelding lokaal op te slaan zie je gelijk of de uitvoering van WebP gelukt is.
Door een afbeelding lokaal op te slaan zie je gelijk of de uitvoering van WebP gelukt is.

Als de activering van WebP gelukt is zie je bij het opslaan dat je computer de afbeelding als WebP bestand wilt opslaan!

Tot slot: Het verschil in snelheid gemeten door PageSpeed

Als laatste bekijken we het verschil in de snelheid van site voor en na de invoering van de plugin.
Dan zien we een winst van 15% in snelheid van de site, gefeliciteerd! Je hebt nu met een paar kleine stappen de website een stuk sneller gemaakt.

De website wanneer deze de jpg/png bestanden gebruikt
De website wanneer deze de webP bestanden gebruikt

Beoordeel dit artikel

Roger.Overdevest

Roger is een SEO specialist met veel passie voor WordPress

5 reacties

  • We hebben het getest op onze website, maar we hebben niet het idee dat het bij ons werkt? kun je me aangegeven waar het mis gaat? Tevens krijgen we ook de foutmelding bij W3 total cache en Cache Enabler.

  • Werkt het gebruik van een plug-in als ShortPixel automatisch met een betaalde caching plugin als WP Rocket?

  • Ik heb je stappen gedaan, maar ineens zegt Shortpixel dat ze de plug-ins niet herkennen van Optimus en EWWW Image Optimizer. Enig idee waarom dit nu niet meer wordt ondersteund?

  • Dankjewel, hiernaar was ik op zoek, Google zegt altijd dat mijn website zo traag is. Ik gebruik nu nog jpg en png op mijn fotografiewebsite maar ga dit nu dus aanpassen naar webp.