WebP en WordPress

WebP en WordPress = betere laadtijd en prestaties?

Veel mensen zijn geïnteresseerd in het afbeeldingsformaat WebP omdat het de voordelen van JPG en PNG combineert. Tegelijkertijd vervangt het echter niet de twee gangbare afbeeldingsformaten. WebP zou echter vooral handig moeten zijn voor WordPress met veel afbeeldingen. We leggen in dit artikel uit waarom dat zo is.

In de wereld van vandaag is het steeds belangrijker om de gebruikerservaring van je doelgroep zo aangenaam en gemakkelijk mogelijk te maken. Mensen zijn visueel ingesteld en kunnen informatie die ze zien vaak sneller en beter opnemen. Een snelle blik op een reclamebord, scrollen door een homepage voordat de bus over vijf minuten komt. We kennen allemaal deze situaties. 

Aangezien afbeeldingen meestal meer dan de helft van de opslagruimte van een website innemen, is er hier veel optimalisatiepotentieel.

Nu nog een paar feiten over WebP voordat we verder gaan met de onderwerpen.

  • WebP ondersteunt het VP8 videoformaat, dat geschikt is voor kleine geanimeerde afbeeldingen, zoals we die bijvoorbeeld kennen van GIF's.
  • De maximale afbeeldingsgrootte voor WebP is 16.383 x 16.383 pixels.
  • Je kunt een WebP-afbeelding ook omhoog of omlaag schalen, net als SVG-bestanden, maar velen staan dit om veiligheidsredenen niet toe.

"*" geeft verplichte velden aan

Ik wil me abonneren op de nieuwsbrief om op de hoogte te blijven van nieuwe blogartikelen, ebooks, features en nieuws over WordPress. Ik kan mijn toestemming te allen tijde intrekken. Bekijk ons Privacybeleid.
Dit veld dient ter validatie en mag niet worden gewijzigd.

Verschillen ten opzichte van PNG en JPG 

WebP en PNG

Een WebP-afbeelding is tot ongeveer 25-30 procent kleiner dan een PNG, zonder kwaliteitsverlies. Tegelijkertijd kunnen achtergronden nog steeds transparant zijn. Dit varieert alleen tussen het beeld zelf, beelddiepte, details, kleurruimte, enz. Door de kleine bestandsgrootte biedt het WebP-formaat een duidelijk voordeel op het gebied van prestaties.

Op basis van de twee afbeeldingen kan worden gesteld dat de WebP-afbeelding 30,1 procent kleiner is dan de PNG-versie. Ik heb hier de verliesloze methode gekozen en de kwaliteitsregelaar bewust op 80 procent gezet. De overige 20 van 100 procent zijn nauwelijks te zien, dus 80 procent is ruim voldoende voor online toepassingen. 

Nadelen van het PNG-formaat

PNG's zijn niet geschikt voor foto's omdat ze een veel groter afbeeldingsbestand maken. Het PNG-formaat wordt meestal gebruikt voor schermafbeeldingen omdat pc's afbeeldingen opslaan als PNG. Omdat schermafbeeldingen vaak een mix van beeld en tekst zijn. 

PNG wordt bijvoorbeeld gebruikt voor afbeeldingen die een transparante achtergrond vereisen. Dit maakt het formaat zeer veelzijdig en populair in grafisch ontwerp, waar vaak veel elementen samenkomen.

PNG is beschikbaar in de formaten PNG 8 en PNG 24. PNG 8 gebruikt een kleurdiepte van 8 bits en een maximum van 256 kleuren. PNG 24 gebruikt een 24-bits kleurdiepte met maximaal 16,7 miljoen kleuren. PNG 24 is dus vergelijkbaar met het JPEG-formaat. Dus laten we verder gaan met het JPG formaat:

Het JPG-afbeeldingsformaat

In directe vergelijking met JPG is het WebP-beeld ongeveer 25 tot 35 % kleiner, ondanks dezelfde kwaliteit van het beeld. Er valt hier niets te zeggen tussen de twee kandidaten JPG en WebP. WebP is gewoon de betere keuze.

Op basis van de twee afbeeldingen kan worden gesteld dat de WebP-afbeelding 24,7 % kleiner is dan de JPG-versie. In de JPG versie heb ik de kwaliteit op "Hoog" gezet.

Het JPG-formaat is geschikt als je kunt leven met kwaliteitsverlies en als scherpte en details niet belangrijk zijn. Het formaat wordt vaak gebruikt voor afbeeldingen met veel kleuren omdat de samenstelling van JPG het mogelijk maakt veel kleuren en gradaties weer te geven.  

Eenkleine opmerking: Hoe afbeeldingen er uiteindelijk op jouw scherm uitzien, hangt af van vele factoren: bijvoorbeeld de schermresolutie (HD, QHD, UHD/4K, 8K, enz.), de scherminstelling zoals sRGB, Adobe RGB, de respectieve weergavemodus van je monitors en het eindapparaat waarmee je de beelden bekijkt. De laatste dagen had ik zelf het probleem dat mijn afbeeldingen er anders uitzagen op mijn scherm en op de website. 

Kleurruimte/diepte

Hier wordt het een beetje ingewikkeld. WebP is gebaseerd op het lossy video compressie algoritme VP8, met een compressie tot 24 bits en een maximale grootte van 16.383 x 16.383 pixels. Het heeft daarom altijd een kleurdiepte van 24 bits, net als JPG. De kleurdiepte van PNG varieert van 8 tot 48 bits, waarbij de laatste weinig zin heeft vanwege de grote bestandsgrootte,

Als VP8 bitstream werkt het verliesloos genereren van WebP-beelden alleen met het 8 bits beeldformaat – ook bekend als YUV420 beeldformaat.

Het YUV420-formaat uitgesplitst: Laten we eerst eens kijken hoe een monitor een afbeelding standaard weergeeft: Elke kleur kan worden weergegeven door drie kleuren (het zogenaamde RGB-model), dus rood, groen en blauw.

Elke kleur afzonderlijk - d.w.z. rood, groen en blauw - kan in 1 byte (8 bits) op de PC worden geregistreerd. Dus EEN pixel in een monitor heeft 3 bytes (elke byte heeft informatie over de respectieve kleur rood, groen en blauw).

Het menselijk oog is zeer gevoelig voor helderheid, maar minder gevoelig voor kleuren en hun gradaties. De term YUV is dus samengesteld uit Y = luminantie (helderheid) en U en V betekenen chrominantie (kleur). YUV is dus net als RGB, waarmee een kleur wordt weergegeven.

Maar waarom hebben we het eigenlijk nodig?

Omdat de bestandsgrootte hier belangrijk is. In het RGB-model moeten wij 3 bytes (24 bits) gebruiken om één kleur op te slaan. Terwijl bij YUV de grootte wordt gehalveerd door de manier waarop het wordt berekend en vervolgens opgeslagen. Het is ingewikkeld, maar ik denk dat de informatie op dit moment voldoende is en enige duidelijkheid brengt.

Support/ Ondersteuning

De statistieken laten zien welke browser het meest wordt gebruikt door welk "eindapparaat", zoals pc, tablet of smartphone. Aangezien WebP niet door alle browsers wordt ondersteund, moet je dit in de gaten houden.

Natuurlijk kun je zien dat "mobiele apparaten" meer in de belangstelling staan, wat ook verklaart waarom betere ondersteuning voor WebP wordt geboden voor de smartphone. Kijk daarom eens naar je gebruikersstatistieken en zie van welke browser en apparaat je de meeste bezoekers krijgt.

De volgende lijst laat zien welke browserversies op welke eindapparaten al kunnen genieten van WebP.

Huidige support voor desktop browsers

  • Firefox vanaf versie 65.xOpera vanaf versie 39.xChrome vanaf versie 23.xEdge vanaf versie 17.xInternet Explorer vanaf versie 11.x

Up-to-date ondersteuning voor mobiele apparaten

  • Android-browser vanaf versie 5.6 (Chromium 67)Android Chrome vanaf versie 73.xOpera Mini alle versiesOpera Mobile vanaf versie 12.xAndroid Firefox vanaf versie 66.xInternet Explorer Mobile vanaf versie 11.x

WebP VP8 (Geanimeerde beelden)

  • Google Chrome (desktop en Android) vanaf versie 32.xMicrosoft Edge vanaf versie 18.xFirefox vanaf versie 65.xOpera vanaf versie 19.x

Ik kon momenteel geen WebP-ondersteuning vinden voor andere browsers en toestellen.

Vereisten van WebP in WordPress

Tot nu toe geen, maar... Helaas, het slechte nieuws is dat WordPress momenteel zelf geen WebP afbeeldingen ondersteunt. Daarom komen we nu bij het volgende punt.

Manieren om WebP op te nemen in WordPress :

  1. Gebruik van een Plugin

Bijvoorbeeld, de Plugins ShortPixel (Gratis versie), Optimus (Betaalde versie) of de EWWW Image Optimizer (Gratis versie) kunnen worden gebruikt.

Optimus

Optimus WebP

Helaas wordt WebP alleen ondersteund door de betaalde versie van Optimus. Aangezien Raidboxes al geïntegreerde serverzijdige caching heeft, heb je geen "Cache Enabler" plugin nodig zoals aanbevolen door Optimus.

ShortPixel

Shortpixel WebP

In ShortPixel kunt u het vakje aanvinken zoals u hierboven kunt zien. Maar eerst zou ik alle afbeeldingen die je hebt terugzetten naar het origineel en ze dan allemaal in één keer optimaliseren met de Plugin . Dan zou je tegelijkertijd ook moeten zien dat je verschillende bestandstypes van je afbeeldingen hebt.

EWWW Image Optimizer

Ewww Image Optimizer WebP
  1. Maak aanpassingen in de .htaccess van WordPress

Sommige hosters hebben om veiligheidsredenen bewust de mogelijkheid geblokkeerd om het .htaccess bestand te wijzigen. Als je host op een Apache server, kun je de volgende wijzigingen aanbrengen:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp
[T=image/webp,E=accept:1]

</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

En op een Nginx:

# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}
# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;

Trouwens, Raidboxes ondersteunt deze herschrijfregel al standaard.

Waar kan ik haar vinden?

Het bestand kan worden gevonden op de webserver waarop WordPress werd geïnstalleerd. De hoofddirectory is de hoofddirectory waar het domein zich bevindt op de webhost. Als je die niet kunt zien, moet je het "remote file mask" instellen op -la, zodat je ook verborgen bestanden kunt zien. Dit veronderstelt natuurlijk dat je toegangsrechten hebt of zelf host en een FTP-programma zoals FileZilla gebruikt.

Er is een derde – en ietwat ingewikkelde – mogelijkheid om iets toe te voegen in het function.php bestand van je WordPress theme, zodat je standaard afbeeldingen in WebP formaat kunt uploaden. In dit artikel kun je lezen hoe dit in zijn werk gaat.

Voor wie is WebP geschikt?

In principe is WebP bruikbaar voor elke website. Het formaat is natuurlijk vooral geschikt voor websites met veel afbeeldingen. Bijvoorbeeld voor de websites van fotografen die de kwaliteit van hun afbeeldingen zo hoog mogelijk willen houden, maar toch veel waarde hechten aan een snelle laadtijd. Maar ook andere WordPress gebruikers, zoals creatieve professionals of mensen die iets te laten zien hebben in visuele vorm, moeten er alles aan doen om de gebruikerservaring zo aangenaam mogelijk te maken.

Conclusie over WebP en WordPress

Helaas is WebP vandaag de dag nog niet gebruikelijk, in tegenstelling tot JPG en PNG, maar het zal in de toekomst zeker steeds belangrijker worden. WebP kan immers de prestaties van je website verbeteren en daarmee de gebruikerservaring en tevredenheid van je doelgroep.

Plugin: Ja of Nee?

Er zijn uitstekende plugins die het werk van WebP-ondersteuning uit handen nemen en je afbeeldingen optimaliseren. Persoonlijk heb ik hiervoor de Optimus plugin gebruikt. Anders zou het zeker de moeite waard zijn om te overwegen het als code in de pagina te integreren, vooral omdat je dan een extra plugin zou besparen. Maar al met al doe je er goed aan een plugin te gebruiken voor dit doel.

Ik hoop dat je van het artikel hebt genoten en ik ben benieuwd wat jij ervan vindt!

Jouw vragen over WebP en WordPress

Welke vragen heb je voor Stefan? Voel je vrij om de commentaarfunctie te gebruiken. Wil je op de hoogte blijven van nieuwe artikelen over online marketing? Volg ons dan op Twitter, Facebook, LinkedIn of via onze Nieuwsbrief.

Vond je het artikel leuk?

Met jouw beoordeling help je ons om onze inhoud nog verder te verbeteren.

Laat een reactie achter

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.