Het aanleveren van afbeeldingen via WebP is echter niet eenvoudig. Het hangt af van de webserver van uw server, geselecteerde cdn, thema, caching-plug-ins, enz.
Deze handleiding helpt u op drie manieren WebP-afbeeldingen aan WordPress te leveren.
Wat is WebP?
Nieuw afbeeldingsformaat voor het web
door Google
WebP is een beeldformaat (zoals png en jpg) ontwikkeld door Google. WebP-afbeeldingen (.webp) zijn over het algemeen veel kleiner, wat websites versnelt en minder bandbreedte gebruikt.
Afhankelijk van de afbeelding kunt u de grootte verkleinen van 25% tot 70%.
JPEG, PNG, GIF, enz. hebben hun voor- en nadelen. Onderstaande tabel geeft u een idee:
| JPG | GIF | PNG | SVG | |
| Vector | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Transparantie | ❌ | ✅ | ✅ | ✅ |
| Animatie | ❌ | ✅ | ✅ | ✅ |
| Kwijt | ✅ | ❌ | ❌ | ❌ |
WebP heeft bijna alle bovengenoemde functies! Waarom kunnen we WebP dan niet overal gebruiken?
Waarom WebP niet overal gebruiken?
Zoals u kunt zien, ondersteunt slechts 80% van de apparaten alleen WebP. Niet alleen oudere browsers, Safari/iOS Safari ondersteunt WebP nog steeds niet.
Waarom is het zo moeilijk om WebP te bedienen?
Zoals je hebt gemerkt, leveren we afbeeldingen volgens de browser. Als de browser WebP niet ondersteunt, moeten we hem de originele afbeelding (jpg/png/gif) bezorgen.
Er zijn twee manieren om WebP te bedienen:
De afbeeldingstag gebruiken
We kunnen gebruikenafbeeldingtag om de browser te vertellen dat we een WebP-indeling hebben. Als de browser dit ondersteunt, wordt de normale/fallback-afbeelding geladen.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Door ander antwoord
In een ander antwoord, zoals gewoonlijk, heb je één bestand. Precies:
<img src="img.jpg" />Eén afbeeldings-URL ondersteunt de levering van jpg- en webp-bestanden. Dit is wat de server doet.
Ook al is het een .jpg-bestandsextensie, als de browser WebP ondersteunt, zal het antwoord WebP zijn. Ook wel "diverse respons" genoemd.
Afbeeldingstag versus diverse reacties
Elk heeft zijn voor- en nadelen. Hier is een vergelijkingstabel:
| afbeeldingstag | Diverse reacties | |
|---|---|---|
| Werkt met achtergrondafbeeldingen | ❌ | ✅ |
| CDN-vriendelijk | ✅ | ✅ (slechts een paar) |
| Server moet worden geconfigureerd | ❌ | ✅ (nginx) |
| Werkt met lui laden | ✅ | ✅ |
Hoe afbeeldingen in WebP in WordPress weer te geven?
Methode #1 - Gebruik CDN alleen met fly WebP-conversie
Dit is waarschijnlijk de eenvoudigste oplossing. Sommige CDN-providers ondersteunen momenteel on-the-fly beeld-naar-WebP-conversie samen met beeldoptimalisatie.
Hier zijn een paar:
- BunnyCDN
- Cloudflare met Pools (Pro-abonnement)
- Bewolkt
- ShortPixel Adaptive Images (gebruikt StackPath CDN)
- WP Comprimeren
U kunt met deze methode ook schijfruimte besparen, omdat u niet zowel gewone als geconverteerde WebP-afbeeldingen hoeft op te slaan.
BunnyCDN
BunnyCDN wordt geleverd met de Bunny Optimizer, die afbeeldingen kan comprimeren en ze on-the-fly naar WebP kan converteren.
Methode #2 - Diverse reacties + CDN gebruiken
Zoals hierboven beschreven, zal een "variety response" een enkele afbeeldings-URL hebben die zowel WebP- als niet-webp-afbeeldingen kan weergeven, afhankelijk van de gevraagde browser.
We moeten ook het juiste CDN kiezen dat WebP-verzoekheaders als cachesleutel ondersteunt. Anders, zodra de WebP-afbeelding in de cache op de server is opgeslagen, wordt deze geleverd aan browsers die WebP niet ondersteunen.
Gevarieerde respons aanpassen in WordPress
De eenvoudigste manier om een uitgebreide respons voor WebP in WordPress in te stellen, is door de plug-in WebP Express te gebruiken. Installeer gewoon de plug-in en klik op "Instellingen opslaan en nieuwe .htaccess-regels forceren".
WebP Express zal de WebP-converter configureren en de regels overschrijven zodat wanneer het een verzoek ontvangt, het de afbeeldingen direct naar WebP zal converteren, en als de browser WebP niet ondersteunt, wordt de standaardafbeelding geleverd.
Als je in Nginx bent
WebP Express voegt de nodige '.htaccess' herschrijfregels toe, maar werkt alleen op een Apache-, LiteSpeed- of OpenLiteSpeed-server. Als je Nginx gebruikt, moet je bewerkennginx.configen voeg de volgende code toe:
# WebP Express-regels# --------------------locatie ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Accepteren;verloopt 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Routeverzoeken voor niet-bestaande webps naar de converterlocatie ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (WebP Express-regels eindigen hier)De bovenstaande code voegt de vereiste responsheaders toe (cachebeheer varieert ook) en probeert WebP te leveren als deze bestaat, anders wordt deze omgeleid naar de converter (op basis van browserondersteuning)
CDN-providers die Diverse Response ondersteunen
Als uw CDN-provider WebP niet ondersteunt als cachesleutel, worden WebP-bestanden geleverd aan browsers die WebP niet ondersteunen. Evenzo is er een kans dat niet-webp-afbeeldingen worden geleverd aan ondersteunde browsers.
BunnyCDN , SleutelCDN , Google CDN en veel andere CDN-providers ondersteunen WebP als cachesleutel. Zorg ervoor dat u ze in de instellingen inschakelt.
VBunnyCDN :
VSleutelCDN :
Gebruik je het gratis abonnement van Cloudflare?
Helaas ondersteunt het gratis abonnement van Cloudflare WebP niet als cachesleutel. Gebruik een CDN zoals BunnCDN of upgrade naar hun professionele abonnement.
Zet een diverse respons + CDN op bij populaire hostingproviders
Zorg ervoor dat WebP Express is geïnstalleerd.
- Kinsta of WP Engine - neem contact op met hun ondersteuningsteam om de bovenstaande Nginx-configuratie toe te voegen en de WebP-cachingsleutel op te nemen in hun CDN (KeyCDN).
- Cloudways - installeer gewoon WebP Express en sla de instellingen op met .htacess. Omdat Cloudways een hybride Apache + Nginx-aanpak gebruikt, werkt het out of the box.
- SiteGound - Neem contact op met ondersteuning om de Nginx-configuratie toe te voegen. Gebruik een ondersteund CDN zoals hierboven.
- LiteSpeed / OpenLiteSpeed / Apache-server - installeer gewoon WebP Express en sla instellingen op met '.htacess'. Gebruik ook een ondersteund CDN zoals hierboven.
- Aangepaste VPS met Nginx (LEMP Stack) - Instellen
nginx.confen gebruik een ondersteund CDN zoals hierboven.
Methode #3 - Een afbeeldingstag gebruiken
Als beide bovenstaande methoden niet voor u werken, kunt u de afbeeldingstag gebruiken. Het vereist geen serverconfiguratie (nginx.conf bewerken) en ondersteunt alle CDN-providers.
Als u deze methode gebruikt, wordt de HTML voor WebP-bezorging gewijzigd. Het werkt niet met achtergrondafbeeldingen, is incompatibel met sommige thema's, caching-plug-ins, lazy loading-plug-ins, enz.
Als je deze methode gebruikt, worden alle img-tags als volgt geconverteerd:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Als de browser WebP ondersteunt, wordt het bijbehorende bestand geleverd; anders wordt een normale afbeelding geleverd.
Een afbeeldingstag aanpassen voor WebP in WordPress
De eenvoudigste manier om een afbeeldingstag in te stellen, is via WebP Express.
Stel de bedieningsmodus in op "CDN-vriendelijk" en schakel "HTML wijzigen" in.
Gevolgtrekking
Ik wou dat de dag zou komen dat alle browsers WebP ondersteunen!
Als je een paar dollar per maand kunt uitgeven, dan is de gemakkelijkste en meest efficiënte manier om een CDN zoals BunnyCDN te gebruiken, die afbeeldingen on-the-fly naar WebP zal converteren. Blijf anders bij methode #2 die ik hierboven noemde.
