WebP afbeeldingen in WordPress gebruiken. Zo werkt dat!

WebP afbeeldingen in WordPress – Waarom zou ik dat zelfs maar willen?

De grootste vertragende factor bij het laden van de meeste pagina’s is meestal het laden van de afbeeldingen opgenomen in de pagina.

Traditioneel kennen we eigenlijk drie typen van afbeeldingen die we kunnen laden in een pagina. GIF, JPG en PNG. Hierbij is GIF eigenlijk een verouderende standaard. De enige reden om nog GIF te gebruiken is, dat dit het enige bestandstype voor afbeeldingen is wat eenvoudige animaties kan bevatten.

JPG en PNG zijn allebei bestandsformaten die werden gedefinieerd in een tijd, dat een goede computermonitor iets meer dan 64000 verschillende kleurvariaties kunnen tonen. De monitors die we vandaag gebruiken kunnen minimaal 16 miljoen verschillende kleurvariaties tonen. Meer dan onze ogen kunnen zien.

Een ‘mindere kwaliteit’ JPG was destijds geen enkel probleem. Tegenwoordig wel. Daarnaast zijn ook onze monitoren groter geworden. Mijn eerste monitor had een beeld van 640 pixels breed. En dat was destijds een enorme vooruitgang op de 512 pixels die de meest mensen gewend waren.

Destijds was JPG een geweldige oplossing om realistische afbeeldingen op het Internet te gebruiken. Het kwaliteitspotentieel was hoger dan jouw monitor ook maar aan kon en het bestand was relatief klein.

Nu, jaren later, is jouw monitor groter geworden. En jouw kleurenpalet breder. En nog steeds kan je in JPG bestanden beelden opslaan die meer kleuren en een hogere resolutie hebben dan jij ooit waar kan nemen. Maar de bestanden die kwalitatief ‘goed genoeg’ zijn voor jouw monitor zijn inmiddels wel een stuk groter gegroeid. En hoewel onze internet verbinding ook veel sneller is geworden, is onze verwachting over de snelheid van een webpagina ook gegroeid.

Of met andere woorden… JPG bestanden zijn te groot geworden voor de snelheid die we verwachten.

We zullen ze wel klein krijgen!

Waar dus behoeft aan was, was een nieuw bestandsformaat, waarbij minimaal eenzelfde kwaliteit, maar met een kleinere bestandsgrootte van belang was. En voor deze nieuwe standaard zijn er een aantal kandidaten geweest, maar mede door de steun van Google heeft het WebP formaat de meeste populariteit gekregen.

Toch om WebP afbeeldingen in WordPress te laten zien, is het niet zomaar mogelijk om deze te uploaden. Waarom eigenlijk niet?

WordPress ‘herkent’ WebP niet als afbeelding

Ik heb al een aantal keren uitgelegd, hoe het werkt met WordPress en afbeeldingen. Op het moment dat jij een afbeelding upload, maakt WordPress er een aantal kleinere versies van, zodat jij op het juiste moment het juiste formaat van de afbeelding kan tonen.

Omdat WordPress ‘WebP’ nog niet herkent als een afbeeldingsbestand, zal WordPress dat met deze bestanden niet doen.

Maar… is de oplossing dan niet heel eenvoudig? We kunnen er dan toch gewoon voor zorgen dat WordPress WebP wel herkent, zodat jij gewoon jouw WebP afbeeldingen in WordPress kan uploaden?

Kind kan de was doen!

En natuurlijk. Jouw conclusie is heel terecht. Maar we hebben een ander, groter probleem.

Niet iedere browser herkent WebP als afbeelding!

WebP bestanden zijn relatief nieuw en nog niet iedere browser ondersteunt deze. WebP afbeeldingen in WordPress zouden in bepaalde browsers dus zichtbaar worden als ‘broken image links’.

Dat wil je natuurlijk voorkomen. Maar moeten we dan wachten tot eindelijk WebP een door alle browsers geaccepteerde standaard wordt? Of zetten we op iedere pagina -zoals men vroeger wel deed- een melding, dat de pagina er het best uitziet, wanneer je hem bekijkt met browser XYZ?

Gelukkig is dat allebei niet nodig.

Wat wilt u het liefst?

Op het moment dat een browser je website bezoekt houden de browser en je website altijd even een kletspraatje over welke bestandstypen ze acceptabel vinden, en welke niet.

Wat we dus eigenlijk willen, is een plugin die begrijpt, dat wanneer je bezoekende browser vertelt dat hij dolgelukkig zou zijn met WebP, een WebP bestand verzonden moet worden en wanneer er wordt verteld, dat ze WebP toch echt niets vinden een JPG of een PNG verzonden moet worden.

En gelukkig voor jouw bestaan dat soort plugins ook. En in dit artikel gaan we een drietal bespreken. Maar laten we eerst eens kijken hoe ze werken.

Wat doet een WebP plugin?

Een WebP plugin doet een aantal zaken. Allereerst natuurlijk zal de plugin ervoor zorgen, dat er WebP bestanden zijn. Alle plugins die we hier bespreken doen dit op eenzelfde manier: Zodra jij je afbeeldingen upload zal er van die afbeelding een WebP versie worden gemaakt.

Dan blijf je natuurlijk met een groot probleem zitten. Je hebt waarschijnlijk al aardig wat afbeeldingen op je WordPress site en die wil je natuurlijk niet allemaal overnieuw uploaden. Gelukkig hoeft dat niet, want ook al deze plugins hebben een mogelijkheid om jouw bestaande afbeeldingen in één druk op te knop te converteren. Zo krijg je toch al je WebP afbeeldingen in WordPress.

Maar een WebP afbeelding is leuk… als er niet nog meer gebeurt, dan heb je er niets aan. Want dan krijg je nog steeds niets te zien.

De volgende stap is namelijk om er voor te zorgen, dat alleen de browsers die WebP ondersteunen dit ook krijgen.

Op het moment dat een browser een dialoog start met een webserver, dan begint hij te vertellen welke bestandstypen hij accepteert. Vertelt de browser, dat hij WebP accepteert, dan gaat de plugin voor de jouw bezoeker aan de slag. Vertelt hij dat niet, dan krijgt je bezoeker de ‘gewone’ pagina te zien.

Er wordt heel wat afgekletst op het Internet

Op het moment dat een browser de webpagina krijgt waar hij om heeft gevraagd, is hij nog lang niet klaar. Want in die webpagina staan allerlei verwijzingen naar andere bestanden : CSS, JavaScript, fonts, media bestanden zoals afbeeldingen en video’s en nog veel meer.

De server die de pagina heeft toegestuurd zal na het toesturen geen actie meer ondernemen. Het is aan de browser om te bepalen, wat hij wel en niet op wil vragen.

Komt de browser een verwijzing naar een afbeeldingsbestand tegen, dan zal hij de server vragen om dat afbeeldingsbestand. En hier wordt het interessant, omdat er twee mogelijke routest zijn om jouw WebP afbeeldingen in WordPress zichtbaar te maken.

Redirection – mijn collega helpt u verder…

Jouw browser heeft dus die internetpagina geladen en ziet dat de afbeelding ‘image.jpeg’ voorkomt. De browser vraagt de server dus om dat bestand. Maar door een paar slimme trucs ‘weet’ de plugin, dat de browser eigenlijk ook ‘WebP’ kan weergeven. En in plaats van het bestand ‘image.jpeg’ aan te bieden, krijgt de browser ‘webp/image.jpeg.webp’ (bijvoorbeeld), zelfde plaatje, andere bestandsindeling.

Dat komt, omdat de plugin aan de server heeft verteld (door bijvoorbeeld enkele regels aan het .htaccess bestand toe te voegen), dat indien er gevraagd wordt om image.jpeg er ‘webp/’ voor, en ‘.webp’ achter de gevraagde bestandsnaam geplakt moet worden.

Wel moet de server aan de browser vertellen, dat het gevraagde bestand in het ‘webp’ formaat is. En dus geen ‘jpeg’ die er werd verwacht. Maar als de browser webp ondersteunt en dit netjes wordt verteld, heeft deze er helemaal geen moeite mee, dat hij wat anders krijgt, dan waarom is gevraagd.

Dit gebeurt razendsnel, omdat deze regels direct bij het starten van de server worden geladen. En dit is zonder meer de beste methode.

Maar helaas… dit werkt niet op ieder platform. En het werkt ook niet voor afbeeldingen die op een ander platform worden gehost. Bijvoorbeeld als je gebruik maakt van een CDN. Want een webserver kan alleen bronnen afkomstig van eigen server doorgeven.

Aanpassen van de HTML

Een tweede methode is door het aanpassen van de HTML. In de HTML zelf worden dus alle verwijzingen naar ‘image.jpeg’ vervangen door (bijvoorbeeld) ‘webp/image.jpeg.webp. Dit kost meer tijd, omdat het iedere keer dat een pagina wordt geladen opnieuw gedaan moet worden. Hier komt een caching plugin natuurlijk goed van pas. Maar opgepast!

Wanneer een caching plugin niet bewust is van het bestaan van de webp plugin, zal de cache maar één versie van de pagina cachen. En dat is afhankelijk van het type pagina wat toevallig wordt opgevraagd: Met of zonder webp.

Vraag ik een pagina op voor een ‘warm cache‘, dan doe ik dat met een programma wat niet door zal geven, dat hij ‘webp’ accepteert. En alle gecachede pagina’s zullen in de ‘jpeg’ versie zijn. Geen probleem op zich, maar totaal geen snelheidswinst.

Het probleem wordt pas serieus, wanneer iemand met een browser die ‘webp’ verstaat de pagina op zal vragen. Die krijgt namelijk een pagina met WebP afbeeldingen in WordPress… en de caching plugin zal een cache versie voor die pagina maken.

Heeft de volgende bezoeker aan de pagina een browser die geen WebP begrijpt, krijgt hij een pagina met verwijzingen naar WebP afbeeldingen, die niet getoond kunnen worden… dus een pagina vol met ‘dode afbeeldinglinks’. Niet echt een fraai gezicht.

Dat wil je dus voorkomen.

Je WebP plugin en je cache plugin moeten van elkaars bestaan weten!

Jouw caching plugin moet dus weten dat WebP afbeeldingen in WordPress getoond kunnen worden. Want er moeten twee verschillende versies van de cache gemaakt worden, één met en één zonder WebP afbeeldingen. Bovendien moet bij het opbouwen van de cache ‘bekend’ zijn op welke manier de WebP plugin de bestanden hernoemt.

De WebP plugin moet weten welke caching plugin wordt gebruikt, om te bepalen hoe de afbeeldingen het best hernoemd kunnen worden.

Kortom, er is heel wat afstemming nodig.

Dan de plugins

Optimus

Optimus is een plugin met een aanvullende dienst en van dezelfde makers als de Cache Enabler plugin. En dat is natuurlijk heel mooi, omdat die twee perfect op elkaar zijn afgestemd.

Het comprimeren en converteren van de afbeeldingen gaat via een online dienst… en daar moet je voor betalen. Er is wel een gratis service beschikbaar, maar die accepteert afbeeldingen tot maximaal 100K. Dat is niet zo veel.

Behalve dat Optimus WebP afbeeldingen voor WordPress converteert, kan deze dienst ook JPG afbeeldingen nog net iets verder comprimeren. Bij een test met zo’n 40 afbeeldingen van verschillende soorten bleek ik een extra compressie van bijna 20% te hebben op de JPG afbeeldingen. Alle kleine beetjes helpen.

Het nadeel van deze plugin is dus het feit, dat je er voor moet betalen. Nu is 15 dollar per maand niet direct super veel, maar wanneer er gratis alternatieven zijn voor WebP afbeeldingen in WordPress, dan is het natuurlijk de moeite waard deze te onderzoeken.

WebP Converter for Media

De WebP Converter for Media plugin werkt volgens het ‘redirection’ principe. Het wijzigt de HTML van de pagina niet en daardoor is deze met ieder caching programma te gebruiken. Ideaal dus.

Nou… nee.

Ik heb deze plugin op vier verschillende servers, alle vier bij verschillende hosters, geprobeerd te installeren en het werkte maar bij één partij. Activeerde ik de plugin bij één van de andere partijen, dan kreeg ik slechts een cryptische foutmelding die noch mij, noch de support staf van de hosting partijen ook maar iets zei.

Mocht je iets met WebP willen doen, dan is het zeker de moeite waard om met deze plugin te beginnen en kijken of hij het doet bij jouw hoster. Want als hij werkt is hij de snelste in de lijst.

Doet hij het niet, steek er niet teveel tijd en en ga door naar de volgende.

WebP Express

De WebP Express plugin is een soort Zwitsers zakmes. Deze plugin voorziet in zowel mogelijkheden om de HTML te wijzigen als in mogelijkheden om met een redirection te werken.

Met zoveel mogelijkheden is het ook de meest complexe plugin om te configureren, wat de gehele plugin wat complex in het gebruik maakt. Heb je hem echter helemaal goed ingesteld, dan draait het geheel prima.

Bij eventuele vragen is de maker van de plugin -via het support forum van de plugin- meer dan bereid met je mee te denken over de voor jou juiste configuratie.

Een aardig gegeven rond deze plugin is dat deze ‘out of the box’ goed samenwerkt met de eerder genoemde Cache Enabler plugin. Behalve dan één klein foutje. Wanneer je in Cache Enabler aangeeft dat ‘WebP’ ondersteunt moet worden, blijft WebP Express waarschuwen dat nog geactiveerd moet worden. Het geheel werkt dan overigens wel.

Conversiesnelheid

Wat natuurlijk ook leuk is om te weten is hoe snel de plugins zijn. En om dat te meten heb ik op drie verschillende kopien van de WordXPression website alle afbeeldingen laten converteren door de drie respectievelijke plugins.

Voor de statistieken: Dit ging om ruim 22.000 afbeeldingen. In de loop van de afgelopen 10 jaar zijn er heel wat afbeeldingen in alle blogposts geplaatst en bovendien slaat WordPress alle afbeeldingen in meerdere groottes op. Laten we eens kijken hoe lang de verschillende plugins hier over hebben gedaan:

• Optimus: 2 uur en 48 minuten
• WebP Converter for Media: 6 uur en 12 minuten
• WebP Express: 15 uur en 9 minuten

Dit zijn dus gigantische verschillen. Het voordeel is dat dit slechts éénmalig hoeft te gebeuren.

Compressie

Het belangrijkste doel is natuurlijk de compressie zelf. Hoeveel procent kleiner is de gemiddelde afbeelding geworden. Let op: Een hoog percentage is goed, een laag percentage is slecht.

• Optimus: 72%
• WebP Converter for Media: 68%
• WebP Express: 69%

Hierbij heb ik alleen gekeken naar de compressie van JPG bestanden. Wanneer we ook de PNG bestanden meenemen in de compressie dan krijgen we totaal andere resultaten

• Optimus: 68%
• WebP Converter for Media: 62%
• WebP Express 60%

Doorgaans zijn PNG bestanden minder te comprimeren via WebP en in enkele gevallen wordt een WebP bestand zelfs groter dan zijn PNG variant. In de meest extreme vorm was het WebP bestand 2.4 maal zo groot als de PNG versie.

WebP Converter for Media en Optimus pakken dit heel intelligent aan: Is het bestand groter geworden, dan wordt de te grote WebP versie gewist. WebP Express gaat hier minder intelligent mee om: Is een WebP bestand te groot, dan zal dit te grote bestand toch gewoon worden ‘geleverd’.

Omdat WebP Express voor de WordXPression site op andere gronden toch de beste oplossing was, heb ik het zo ingesteld, dat alleen de JPG bestanden naar WebP worden omgezet. De winst met PNG bestanden is minimaal of zelfs nadelig.

Eindconclusie

In alle opzichten presteert de Optimus plugin het best. De plugin is makkelijk te configureren (bijna geen opties nodig) en biedt ook de beste performance. Nadeel is echter, dat je hiervoor wel 15 dollar per maand neer moet leggen. Dit is overigens wel voor al de websites in je bezit, dus heb je meerdere websites kan het nog steeds de moeite waard zijn.

Een goede tweede keuze is WebP Converter for Media als hij werkt. De compressie is iets minder dan bij Optimus, maar door de directe server redirects wordt veel van dit ‘snelheidsverlies’ gecompenseerd.

WebP Express is de ‘derde keuze’, maar daarmee beslist niet de ‘verliezer’. Werkt hij niet out of the box dan is bijna alles instelbaar om hem alsnog aan de praat te krijgen. Zelf vind ik 180 dollar per jaar (kosten voor Optimus) toch een behoorlijk bedrag voor een functie die ook gratis beschikbaar is. De prijs van de Optimus plugin is dan ook een serieuze reden om hier niet voor te kiezen.

WebP Converter for Media is een goede plugin als hij werkt maar een eigen test plus wat zoekwerk op het Internet heeft duidelijk gemaakt, dat hij in veel situaties het niet zal doen.

En daarmee is WebP Express dan wel niet de plugin die het best presteert, maar wel de plugin die bruikbaar is in de meeste situaties!

Snellere website?

Ik schrijf regelmatig over allerlei onderwerpen rond WordPress en met een website met ruim 30.000 bezoekers per maand zal het je niet verbazen, dat ik regelmatig uitdagingen heb met betrekking tot de performance van mijn site. Mijn bevindingen over performance tuning leg ik dan ook regelmatig vast in deze blog.

Wil jij een snellere website? Dan is het een goed idee om op de hoogte te blijven. Dat kan je doen door je in te schrijven voor mijn nieuwsbrief, of door browser push berichten te ontvangen iedere keer wanneer ik een nieuwe blogpost post. Om die push berichten te ontvangen, kan je op de rode bel links onderaan klikken en de instructies die je dan krijgt te volgen.

Wil je dat ik een keer naar de performance van jouw website kijk? Ook dat kan. Reserveer een moment voor een video consult en we kijken samen, wat jij kan verbeteren aan je website.