WebP en WordPress = verbeterde 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 beeldformaat omdat het de voordelen van JPG en PNG combineert. Tegelijkertijd vervangt het echter niet de twee gangbare afbeeldingsformaten. Voor WordPress gebruikers die veel afbeeldingen gebruiken, zou WebP bijzonder nuttig moeten zijn. We zullen in dit artikel uitleggen waarom dit zo is.

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. Een snelle blik op een reclamebord, het scrollen door een homepage voordat de bus in vijf minuten komt. We kennen deze situaties allemaal. 

Aangezien afbeeldingen meestal meer dan de helft van de opslagruimte van een website uitmaken, is er veel potentieel voor optimalisatie.

Nu nog een paar feiten over WebP voordat we op de onderwerpen ingaan.

  • WebP ondersteunt het VP8 videoformaat, dat geschikt is voor bijvoorbeeld kleine geanimeerde beelden, zoals we die kennen van GIFs.
  • Het maximale beeldformaat 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.

De volgende onderwerpen worden vandaag in dit artikel behandeld:

  1. Verschillen met JPG en PNG

- Vergelijking van de bestandsgrootte
- Kleurruimte/diepte
- Steun/bijstand

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

- Plugin Gebruik op
- Voeg iets toe aan de .htaccess van uw server
- Functie.php bestand van uw WordPress -Themes compleet. 

  1. Mijn conclusie over WebP

Verschillen met PNG en JPG 

WebP en PNG

Een WebP beeld is tot ongeveer 25-30 procent kleiner dan een PNG zonder enig kwaliteitsverlies. Achtergronden kunnen nog steeds transparant zijn. Dit varieert alleen tussen het beeld zelf, de beelddiepte, de details, de kleurruimte enz. Door de kleine bestandsgrootte heeft het WebP-formaat een duidelijk voordeel wat betreft de prestaties.

png vs webp

Op basis van de twee afbeeldingen kan worden gesteld dat het WebP beeld kleiner is dan de PNG versie, namelijk 30,1 procent. Ik heb hier gekozen voor de verliesvrije methode en heb de kwaliteitsschuif bewust op 80 procent gezet. De overige 20 van 100 procent is bijna nooit te zien, dus 80 procent is voldoende voor online applicaties. 

Nadelen van het PNG-formaat

PNG's zijn niet geschikt voor fotografen omdat ze een veel groter beeldbestand creëren. Het PNG-formaat wordt vooral gebruikt voor screenshots omdat PC's beelden opslaan als PNG. Waarom? - Omdat screenshots vaak een mix zijn van beeld en tekst. 

De PNG wordt bijvoorbeeld gebruikt voor beelden die een transparante achtergrond nodig hebben. Dit maakt het formaat zeer veelzijdig en populair in de grafische vormgeving, omdat veel elementen daar vaak samenkomen.

PNG is beschikbaar in PNG-8 en PNG-24 formaat en maakt gebruik van 8-bit kleurdiepte en een maximum van 256 kleuren. PNG-24 maakt gebruik van een 24-bits kleurendiepte met maximaal 16,7 miljoen kleuren. PNG-24 is daarom vergelijkbaar met het JPEG-formaat. Dus laten we verder gaan met het JPG-formaat:

Het JPG beeldformaat

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

jpg vs webp

Op basis van de twee afbeeldingen kan worden gezegd dat het WebP beeld kleiner is dan de JPG versie met 24,7%. Voor de JPG-versie heb ik de kwaliteit op "hoog" gezet.

Het JPG-formaat is ideaal als je kunt leven met kwaliteitsverlies en als scherpte en details niet belangrijk zijn. Het formaat wordt vaak gebruikt voor kleurrijke beelden, omdat de samenstelling van JPG het mogelijk maakt om vele kleuren en gradaties weer te geven.  

Kleine aanwijzing:

Het uiteindelijke uiterlijk van uw beelden hangt af van vele factoren: bijvoorbeeld de schermresolutie (HD, QHD, UHD/4K, 8K, enz.), de scherminstellingen zoals sRGB, adobeRGB, de weergavemodus van uw monitors en het apparaat dat u gebruikt om de beelden te bekijken. Onlangs had ik zelf het probleem dat mijn foto's er anders uitzagen op mijn scherm en op de website. 

Ik denk het wel: Tegenwoordig staan alle browsers in sRGB-modus. Dus als u iets voor het web maakt in Photoshop, bijvoorbeeld, stel uw monitor dan in op sRGB. Dan kunt u direct zien hoe het eruit ziet als het op uw site terecht komt. 🙂 

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 dus altijd een kleurdiepte van 24 bits, net als de JPG. De kleurdiepte van PNG varieert van 8 tot 48 bits, hoewel dit laatste weinig zin heeft vanwege de grote bestandsgrootte, 

Als VP8 bitstream werkt de verliesloze generatie van WebP-beelden alleen met het 8-bits beeldformaat - ook bekend als YUV420 beeldformaat.

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

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

Het menselijk oog is zeer gevoelig als het gaat om helderheid, maar minder gevoelig voor kleuren en hun gradaties. Zo bestaat de aanduiding YUV uit Y = luminantie (helderheid) en U en V gemiddelde chrominantie (kleur). YUV is dus als RGB, dat wordt gebruikt om een kleur weer te geven.

Maar waarom hebben we het toch nodig?

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

Steun/bijstand

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

Natuurlijk is het duidelijk dat "mobiele apparaten" meer in het middelpunt staan, wat ook verklaart waarom er een betere ondersteuning voor WebP is voorzien voor de smartphone. Controleer dus zeker uw gebruikersstatistieken en zie vanaf welke browser en welk apparaat u de meeste bezoekers krijgt.

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

Huidige ondersteuning voor Desktop Browser

- Firefox vanaf versie 65.x
- Opera vanaf versie 39.x
- Chroom vanaf versie 23.x
- Rand vanaf versie 17.x
- Internet Explorer vanaf versie 11.x

Up-to-date ondersteuning voor mobiele apparaten

- Android-browser vanaf versie 5.6 (chroom 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.

Welke eisen heeft WebP nodigWordPress ?

Tot nu toe geen, maar... Het slechte nieuws is dat er WordPress momenteel geen onafhankelijke ondersteuning is voor WebP beelden. Daarom komen we nu bij het volgende punt.

Mogelijkheden om WebP te integreren inWordPress :

  1. Plugin Gebruik op

De Plugins ShortPixel (Free Version), Optimus (Paid Version) of de EWWW Image Optimizer (Free Version) zijn hiervoor geschikt. 

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:

Korte Pixel WebP

In ShortPixel kunt u het vakje aanvinken zoals hierboven weergegeven. Maar daarvoor zou ik alle beelden die je hebt terugzetten naar het origineel en ze dan allemaal tegelijk Plugin optimaliseren met de. Dan moet je ook zien dat je verschillende bestandstypes van je foto's hebt.

EWWW Image Optimizer:

Ewww Beeldoptimalisator WebP
  1. WordPress Maak aanpassingen in de .htaccess van

Sommige hosters hebben de mogelijkheid om iets te veranderen in het .htaccess-bestand, bewust geblokkeerd om veiligheidsredenen. Als u op een Apache-server host, kunt u de volgende aanpassingen maken:


    HerschrijvenEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    HerschrijfRule ^(wp-content/uploads.+)\.(jpe?g|png)$1.webp
[T=beeld/webp,E=acceptatie:1].



    Koptekst bijlage Vary Accept env=REDIRECT_accepteren

AddType afbeelding/webp .webp

En op een nginx:

# http configuratieblok
map $http_accept $webp_ext {
standaard "";
"~*webp" ".webp"
}
# serverconfiguratieblok
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 is te vinden op de webserver waarop het is WordPress geïnstalleerd. De hoofdmap is de hoofdmap waar het domein zich op de webhost bevindt. Als je het niet kunt zien, moet je het "remote file mask" op -la zetten, zodat je verborgen bestanden kunt zien. Dit vereist natuurlijk dat u toegangsrechten heeft of zelfs zelf een FTP-programma zoals FileZilla host en gebruikt. 

Er is een derde - en enigszins gecompliceerde - manier om iets toe te voegen aan uw WordPress -Themes function.php bestand, zodat u standaard foto's kunt uploaden in WebP formaat. Hoe dit werkt, kunt u bijvoorbeeld te weten komen in dit artikel nalezen.

Conclusie

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

Plugin Ja. Nee?

Er zijn zeer goedePlugins, die het werk uit uw WebP ondersteuning halen en uw foto's optimaliseren. Persoonlijk heb ik hiervoor de Plugin Optimus gebruikt. Anders zou het de moeite waard zijn om het als code in de site op te nemen, vooral omdat je jezelf dan nog een Plugin keer zou redden. Maar al met al ben je goed geadviseerd met een Plugin voor deze zaak.

Voor wie is WebP eigenlijk geschikt?

WebP is in principe zinvol voor elke site. Het formaat is vooral geschikt voor websites met veel afbeeldingen. Bijvoorbeeld voor fotografen die hun beeldkwaliteit zo hoog mogelijk willen houden, maar toch veel waarde hechten aan een snelle laadtijd. Maar ook andere WordPress gebruikers, zoals creatieve mensen of mensen die iets in beeld te tonen hebben, moeten er alles aan doen om de gebruikerservaring van hun potentiële klanten en fans zo aangenaam mogelijk te maken.

Ik hoop dat je hebt genoten van het artikel en ik kijk uit naar je mening! 

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

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een opmerking

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