Afbeeldingen omzetten in WebP op WordPress: Waarom en hoe?

Webhosting
Puck, 29 juli 2021

Er zijn meerdere manieren om afbeeldingen te optimaliseren om zo jouw WordPress site sneller te maken. Zo hebben we het al gehad over lazy loading en het juiste format en de juiste grootte kiezen per afbeelding. Ook hebben we het al even gehad over de voordelen van het kiezen voor WebP afbeeldingen. In deze blog duiken we daar nog wat dieper in.

In deze blog lees je het volgende:

Wat is een WebP afbeelding?

WebP (uitgesproken als “webpie”) is een compressie algoritme dat bedacht is door Google om afbeeldingen flink te verkleinen in bestandsgrootte. Hoe werkt dit? WebP werkt in twee verschillende compressie-technieken: lossy en lossless

De “lossy” variant – waar de kwaliteit ietwat achteruitgaat – werkt door middel van “predictive coding”. Tijdens het comprimeren van een afbeelding leest de code de waardes van de blokken – pixels – om zo de waardes van de pixels eromheen te kunnen voorspellen. Vervolgens wordt alleen het verschil tussen de pixels gecodeerd en opgeslagen. Dit zorgt ervoor dat de afbeelding aanzienlijk kleiner wordt qua opslag dan de originele afbeelding. Dat komt omdat niet alle gegevens per pixel opgeslagen hoeven te worden, enkel het verschil onderling. Dit zorgt ervoor dat een afbeelding een stuk sneller laadt zodra iemand je site bezoekt.

Lossy compressiemethode WebP
Bron: WebP team Google

Bij de “lossless” manier van opslaan – waar de kwaliteit nagenoeg gelijk blijft – maakt het algoritme een exacte replica van de originele afbeelding. Er worden hier verschillende manieren van comprimeren toegepast waaronder het samenvoegen van pixels, het voorspellen van ruimtelijke pixel plaatsing en kleur vervangen door het gebruik van een lokaal kleurenpallet. Op deze manier verliest een afbeelding bijna geen kwaliteit maar wel een hoop opslagruimte waardoor de afbeeldingen sneller laden op je pagina.  

Lossless compressiemethode WebP
Bron: WebP team Google

Meer over de compressietechniek van WebP lees je hier.

In het begin van WebP was er voornamelijk support vanuit Google maar nog niet op andere populaire browsers. Voornamelijk Safari is erg lang een achterblijver geweest. Anno 2021 is 98% van alle nieuwste versie browsers in staat om WebP afbeeldingen te ondersteunen. Alleen IE en KaiOS ondersteunen WebP nog niet. Ook Safari voor Mac heeft nog beperkingen. Alleen de versies voor Mac OS 11, Big Sur of nieuwer ondersteunen WebP, oudere versies dus niet.

Waarom zou je WebP gebruiken

Wellicht gebruik je al een compressie-tool die de afbeeldingen op jouw site optimaliseert qua bestandsgrootte, en zie je het nut van WebP images nog niet helemaal. Dat kan uiteraard, en het is ook zeker geen “must” als jouw site op dit moment al erg snel is.

Het ding is alleen: bij het berekenen van jouw positie in de (Google) SERP – Search Engine Results Page – wordt er ook gekeken naar pagespeed. En bij het berekenen van jouw pagespeed, houdt Google ook rekening met het gebruik van “next-gen image formats”.

Next-gen image formats zijn nieuwere afbeeldingsformats ten opzichte van JPEG, PNG en GIF. Ze maken gebruik van nieuwere compressietechnieken en kunnen afbeeldingen beter optimaliseren. De kans is dus erg aanwezig dat de afbeeldingen op jouw site nóg beter gecomprimeerd kunnen worden dan ze al zijn. En kleinere bestandsformaten, zorgen voor sneller ladende pagina’s.

De meest gebruikelijke next-gen image formats zijn:

  • JPG XR
  • JPG 2000
  • WebP

Dus waarom kiezen voor WebP en bijvoorbeeld niet voor JPG XR? Als we kijken naar browserondersteuning, komt WebP het beste uit de test. Waar JPG 2000 maar 17,82% browserondersteuning heeft en JPG XR maar 1,09%; wordt WebP momenteel door 95,37% van alle browsers ondersteunt.  Wil je zeker weten of je voordeel kunt halen uit het gebruik van WebP, check jouw pagespeed met de PageSpeed Insights tool van Google. Hier vind je tevens tips voor het verbeteren van jouw websites snelheid.

Wat zijn de voor- en nadelen van WebP

Wat zijn nu de voordelen en de nadelen van WebP? We hebben ze hieronder voor je op een rijtje gezet.

Voordelen:

  • Bestanden in JPEG kunnen tot 34% verkleind worden met WebP.
  • Bestanden in PNG kunnen tot 45% verkleind worden met WebP.
  • WebP ondersteunt animatie.
  • Door de bestanden te verkleinen laden de afbeeldingen sneller.
  • Er zijn vele plug-ins die je in staat stellen om afbeeldingen om te zetten naar WebP.

Nadelen:

  • Enkel WebP gebruiken kan ervoor zorgen dat niet alle gebruikers de afbeelding kunnen zien omdat niet 100% van alle browsers het ondersteunt. 
  • Het handmatig toevoegen van een redirect naar WebP vergt kennis en tijd.

Hoe zet je afbeeldingen om in WebP op WordPress

Zoals we net al aangaven in de nadelen, is het technisch een werkje om alle afbeeldingen handmatig te redirecten naar WebP. Gelukkig hoeft dit ook niet handmatig; er bestaan WebP WordPress plug-ins die dit perfect kunnen. Hieronder geven we je twee voorbeelden van populaire afbeeldingsoptimalisatie-tools die in de basis gratis zijn in gebruik. 

EWWW Image Optimizer

EWWW Image Optimizer is een plug-in die de gebruiker toestaat om meer te doen dan enkel afbeeldingen om te zetten naar WebP. Zo is het ook mogelijk om bijvoorbeeld lazy loading in te stellen, andere bestanden te comprimeren en afbeeldingen in origineel format te comprimeren (PNG, JPEG of GIF).  

Het makkelijke aan deze plug-in – wat WebP betreft – is dat het nieuw geüploade afbeeldingen automatisch omzet. Mits je deze instelling aan hebt staan. Dit doet het programma door te kijken naar het soort afbeelding dat gecomprimeerd moet worden. In de standaard instellingen zal een JPEG-bestand lossy gecomprimeerd worden en een PNG-bestand lossless. Dit komt omdat het vaak makkelijker is om PNG-afbeeldingen te comprimeren zonder kwaliteitsverlies vanwege de vaak simpele vormgeving. Denk aan graphics of screenshots met veel tekst. Deze instellingen zijn te wijzigen. 

Een ander voordeel van deze plug-in, is dat je automatisch alle afbeeldingen op jouw site kunt optimaliseren en de nodige afbeeldingen kunt laten omzetten naar WebP met behulp van de “Bulk optimizing” functie.

Belangrijk is wel dat je goed checkt of de redirect regels zijn ingesteld. Deze vind je bij je plug-in instellingen onder het kopje “WebP”. Deze redirect regels zorgen er namelijk voor dat een pagina alleen redirect naar WebP als er ook echt een afbeelding voor beschikbaar is. Ook zorgt dit ervoor dat browsers die WebP niet ondersteunen, gewoon het origineel laten zien.

Imagify

Een van de meest populaire plug-ins voor afbeeldingscompressie is Imagify. Imagify is puur gefocust op het comprimeren van afbeeldingen en heeft een simpele en moderne uitstraling. Omdat Imagify zich enkel focust op het comprimeren van afbeeldingen, zul je een hogere mate van compressie kunnen realiseren. 

Je kunt in Imagify kiezen voor verschillende mate van compressie: Normaal, agressief en ultra. De compressie kun je vervolgens in een visuele vergelijking bekijken om te zien of de kwaliteit nog goed genoeg is voor jouw website. Naast normale compressie geeft Imagify je ook de optie voor converteren naar WebP. 

Imagify zal automatisch checken of een browser WebP ondersteunt of niet. Ook hierbij is het belangrijk dat je goed bekijkt hoe de afbeeldingen worden geredirect naar WebP. Imagify geeft je hier twee standaard opties:

Bekijk bij alle plug-ins die je overweegt goed of het zal werken voor jouw site en test goed welke WebP instellingen het beste past bij jouw WordPress site.

Kortom

Een snelle pagina is erg belangrijk en een groot onderdeel daarvan is het gebruik van geoptimaliseerde afbeeldingen. WebP kan daarbij helpen. Niet alleen qua snelheid maar ook qua SEO kan een WordPress site veel voordeel hebben aan het kiezen voor WebP

We hopen dat je na het lezen van deze blog een beter beeld hebt bij wat WebP is, wat het doet, waarom het belangrijk is en hoe je afbeeldingen omzet naar WebP op jouw WordPress site.

Puck Lamée - Creative content marketeer

Reactie achterlaten

Leer ons beter kennen!