WebP en WordPress = betere laadtijd en prestaties?

Stefan Römershäuser Laatst bijgewerkt op 21.10.2020
8 Min.
webp wordpress
Laatst bijgewerkt op 21.10.2020

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 websitebezoekers zo aangenaam en gemakkelijk mogelijk te maken. Mensen zijn visueel ingesteld en kunnen informatie die ze zien vaak sneller en beter opnemen. Die snelle blik op een reclamebord, het 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 up- of downscalen, zoals bij SVG-bestanden, maar velen staan dit om veiligheidsredenen niet toe.

We behandelen vandaag de volgende onderwerpen in dit artikel:

  1. Verschillen ten opzichte van JPG en PNG

- Vergelijking van bestandsgroottes
- Kleur Ruimte/Diepte
- Ondersteuning

  1. Welke vereisten heb ik nodig voor WebP in WordPress ?
  2. Hoe kan ik WebP afbeeldingen invoegen in WordPress ?

- Gebruik een Plugin
- Voeg iets toe in de .htaccess van je server
- Function.php bestand van uw WordPress -Themes iets toevoegen.

  1. Mijn conclusie over WebP

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. Achtergronden kunnen 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.

png vs webp

Op basis van de twee afbeeldingen kan worden gesteld dat de WebP-afbeelding 30,1 procent kleiner is dan de PNG-versie. Ik koos hier voor de lossless methode en zette de kwaliteitsschuif bewust op 80 procent. 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 fotografen omdat ze een aanzienlijk groter beeldbestand creëren. Het PNG-formaat wordt meestal gebruikt voor schermafbeeldingen omdat PC's afbeeldingen opslaan als PNG. Waarom? - Omdat screenshots vaak een mix zijn van beeld en tekst. 

De 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 PNG-8 en PNG-24 formaten. PNG-8 gebruikt een 8-bit kleurdiepte en een maximum van 256 kleuren. PNG-24 gebruikt een 24-bit kleurdiepte met tot 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.

jpg vs webp

Op basis van de twee afbeeldingen kunnen we zeggen dat de WebP-afbeelding 24,7% kleiner is dan de JPG-versie. Voor de JPG versie heb ik de kwaliteit op "Hoog" gezet.

Het JPG-formaat is geschikt als u kunt leven met kwaliteitsverlies en 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.  

Kleine hint:

Hoe beelden er uiteindelijk voor u uitzien, hangt af van vele factoren: bijvoorbeeld de schermresolutie (HD, QHD, UHD/4K, 8K, enz.), de scherminstelling zoals sRGB, adobeRGB, de respectieve weergavemodus van uw monitors, alsook het apparaat waarmee u de beelden bekijkt. Onlangs had ik zelf het probleem dat mijn afbeeldingen er op mijn scherm anders uitzagen dan op de website. 

Mijn tip: Tegenwoordig staan alle browsers in sRGB-modus. Dus als je iets voor het web maakt in Photoshop, stel je je monitor in op sRGB. Dan kun je direct zien hoe het eruit ziet als het op je pagina landt. 🙂

Kleurruimte/diepte

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

Als VP8 bitstream werkt het verliesloos genereren van WebP-beelden alleen met het 8-bit beeldformaat - ook bekend als het 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 (bekend als het RGB-model), d.w.z. 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 verschaft.

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 apparaten al kunnen genieten van WebP.

Huidige ondersteuning voor desktop browsers

- Firefox vanaf versie 65.x
- Opera vanaf versie 39.x
- Chrome vanaf versie 23.x
- Edge vanaf versie 17.x
- Internet Explorer vanaf versie 11.x

Up-to-date ondersteuning voor mobiele toestellen

- Android Browser vanaf versie 5.6 (Chromium 67)
- Android Chrome vanaf versie 73.x
- Opera Mini alle versies
- Opera Mobile vanaf versie 12.x
- Android Firefox vanaf versie 66.x
- Internet Explorer Mobile vanaf versie 11.x

WebP VP8 (Geanimeerde beelden)

- Google Chrome (desktop en Android) vanaf versie 32.x
- Microsoft Edge vanaf versie 18.x
- Firefox vanaf versie 65.x
- Opera vanaf versie 19.x

Ik kon op dit moment geen WebP ondersteuning vinden voor andere browsers en apparaten.

Wat zijn de vereisten voor WebP in WordPress ?

Tot nu toe nog niet, maar... Helaas, het slechte nieuws is dat WordPress op dit moment nog 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 server-side caching RAIDBOXES al geïntegreerd is, heeft u geen "Cache Enabler" nodigPlugin, zoals hier door Optimus wordt aanbevolen.

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;

Deze herschrijvingsregel wordt overigens RAIDBOXES al door ons gesteund.  

Waar kan ik haar vinden?

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

Er is een derde - en ietwat ingewikkelde - mogelijkheid om iets toe te voegen in het function.php bestand van uw WordPress -Themes zodat u standaard afbeeldingen kunt uploaden in WebP-formaat. Hoe dit werkt, kunt u bijvoorbeeld lezen. in dit artikel artikel.

Conclusie

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 dus ook de gebruikerservaring en de tevredenheid van uw websitebezoekers.

Plugin Ja | Nee?

Er is een zeer goede Plugins die het WebP ondersteuningswerk voor je doet en ook je afbeeldingen optimaliseert. Persoonlijk, gebruikte ik Plugin Optimus voor dit. Anders zou het zeker de moeite waard zijn om te overwegen het als code in de pagina op te nemen, vooral omdat je jezelf dan nog een Plugin bespaart. Maar het komt erop neer dat je Plugin hiervoor moet gebruiken.

Voor wie is WebP überhaupt geschikt?

WebP is in principe bruikbaar voor elke pagina. 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 alles in het werk stellen om de gebruikerservaring van hun potentiële klanten en fans zo aangenaam mogelijk te maken.

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

Stefan is een ontluikende blogger met zijn website aspiring-artist.com Hij blogt over kunst, realiseert WordPress sites voor andere aspirant-kunstenaars en is consultant. Want ook kunstenaars hebben behoefte aan een individuele website en een betekenisvol logo en branding. - Aspire To Greatness

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.