webp wordpress

WebP en WordPress = betere laadtijd en prestaties?

Veel WordPress gebruikers zijn geïnteresseerd in het WebP afbeeldingsformaat omdat het de voordelen van JPG en PNG combineert. Tegelijkertijd vervangt het echter niet de twee gebruikelijke beeldformaten. Voor WordPress gebruikers die veel afbeeldingen gebruiken, zou WebP echter bijzonder nuttig moeten zijn. In dit artikel leggen wij uit waarom.

In de wereld van vandaag is het steeds belangrijker om de gebruikerservaring van uw 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 videoformaat VP8, dat geschikt is voor bijvoorbeeld kleine geanimeerde beelden zoals we die kennen van GIF's.
  • De maximale afbeeldingsgrootte voor WebP is 16.383 x 16.383 pixels.
  • U kunt een WebP-afbeelding ook naar boven of beneden schalen, vergelijkbaar met SVG-bestanden, maar velen staan dit om veiligheidsredenen niet toe.
Toestemming*
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 kwaliteitsschuif 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 zijn niet geschikt voor fotografen omdat ze een aanzienlijk groter beeldbestand creëren. Het PNG-formaat wordt meestal gebruikt voor schermafdrukken omdat PC's afbeeldingen als PNG opslaan. Waarom? - Omdat screenshots 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 u 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 beelden er uiteindelijk op uw 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 uw monitors en het eindapparaat waarmee u 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

Dit is waar het een beetje ingewikkeld wordt. WebP is gebaseerd op het verlieslatende videocompressiealgoritme VP8, met een compressie van maximaal 24 bits en een maximale grootte van 16.383 x 16.383 pixels. Het heeft daarom altijd een kleurdiepte van 24 bits, net als de 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 standaard een beeld weergeeft: Elke kleur kan worden weergegeven door drie kleuren (het zogenaamde RGB-model), te weten 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.

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 u dit in de gaten houden.

Natuurlijk kunt u 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 uw gebruikersstatistieken en zie van welke browser en apparaat u de meeste bezoekers krijgt.

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

Huidige ondersteuning 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 server-side 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.

EWW Image Optimizer:

Eww Beeld Optimalisator WebP
  1. Maak aanpassingen in de .htaccess van WordPress

Sommige hosts hebben uit veiligheidsoverwegingen opzettelijk de mogelijkheid geblokkeerd om iets in het .htaccess bestand te veranderen. Als u host op een Apache server, kunt u de volgende aanpassing maken:

<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 u die niet kunt zien, moet u het "remote file mask" instellen op -la, zodat u ook verborgen bestanden kunt zien. Dit veronderstelt natuurlijk dat u 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 uw WordPress thema, zodat u standaard afbeeldingen in WebP formaat kunt uploaden. In dit artikel kunt u lezen hoe dit in zijn werk gaat.

Voor wie is WebP geschikt?

In principe is WebP nuttig voor elke website. Het formaat is natuurlijk bijzonder geschikt voor websites met veel afbeeldingen. Bijvoorbeeld voor fotografen die hun beeldkwaliteit zo hoog mogelijk willen houden, maar toch veel belang hechten aan een snelle laadtijd. Maar ook andere WordPress gebruikers zoals creatieven of zij die iets in beeldvorm te tonen hebben, moeten er alles aan doen om de gebruikerservaring van hun potentiële klanten en fans zo aangenaam mogelijk te maken.

Conclusie over WebP en WordPress

Helaas is WebP nog geen gemeengoed zoals JPG en PNG, maar het zal in de toekomst zeker steeds belangrijker worden. WebP kan immers de prestaties van uw site verbeteren en daarmee de gebruikerservaring en de tevredenheid van uw doelgroep.

Plugin: Ja of Nee?

Er zijn uitstekende plug-ins die het werk van WebP-ondersteuning uit handen nemen en uw 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 doet u er goed aan een plugin te gebruiken voor dit doel.

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

Uw vragen over WebP en WordPress

Welke vragen heb je voor Stefan? Voel je vrij om de commentaarfunctie te gebruiken. Wilt u 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.