Det er dog ikke nemt at levere billeder via WebP. Det afhænger af din servers webserver, valgte cdn, tema, caching plugins osv.
Denne guide hjælper dig med at levere WebP-billeder til WordPress på tre måder.
Hvad er WebP?
Nyt billedformat til internettet
af Google
WebP er et billedformat (som png og jpg) udviklet af Google. WebP (.webp) billeder har en tendens til at være meget mindre, hvilket fremskynder websteder og bruger mindre båndbredde.
Afhængigt af billedet kan du reducere størrelsen fra 25 % til 70 %.
JPEG, PNG, GIF osv. har deres fordele og ulemper. Tabellen nedenfor giver dig en idé:
| JPG | GIF | PNG | SVG | |
| Vektor | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Gennemsigtighed | ❌ | ✅ | ✅ | ✅ |
| Animation | ❌ | ✅ | ✅ | ✅ |
| Faret vild | ✅ | ❌ | ❌ | ❌ |
WebP har næsten alle funktionerne nævnt ovenfor! Hvorfor kan vi så ikke bruge WebP overalt?
Hvorfor ikke bruge WebP overalt?
Som du kan se, understøtter kun 80% af enhederne kun WebP. Ikke kun ældre browsere, Safari/iOS Safari understøtter stadig ikke WebP.
Hvorfor er det så svært at betjene WebP?
Som du har bemærket, leverer vi billeder i henhold til browseren. Hvis browseren ikke understøtter WebP, skal vi give dem det originale billede (jpg/png/gif).
Der er to hovedmåder at betjene WebP på:
Brug af billedmærket
Vi kan brugebilledetag for at fortælle browseren, at vi har et WebP-format. Hvis browseren understøtter det, indlæses det almindelige/reservebillede.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Ved et andet svar
I et andet svar har du som sædvanlig én fil. Nemlig:
<img src="img.jpg" />Én billed-URL understøtter levering af jpg- og webp-filer. Dette er hvad serveren gør.
Selvom det er en .jpg filtypenavn, hvis browseren understøtter WebP, så vil svaret være WebP. Også kaldet "divers respons".
Billedtag vs forskelligartet respons
Hver har sine fordele og ulemper. Her er en sammenligningstabel:
| billedtag | Diverse svar | |
|---|---|---|
| Fungerer med baggrundsbilleder | ❌ | ✅ |
| CDN venlig | ✅ | ✅ (kun få) |
| Serveren skal konfigureres | ❌ | ✅ (nginx) |
| Fungerer med doven læsning | ✅ | ✅ |
Hvordan serverer man billeder i WebP i WordPress?
Metode #1 - Brug kun CDN med fly WebP-konvertering
Dette er nok den enkleste løsning. Nogle CDN-udbydere understøtter i øjeblikket on-the-fly billede til WebP konvertering sammen med billedoptimering.
Her er et par stykker:
- BunnyCDN
- Cloudflare med polsk (Pro Plan)
- Skyet
- ShortPixel Adaptive Images (bruger StackPath CDN)
- WP-komprimering
Du kan også spare diskplads ved at bruge denne metode, da du ikke behøver at gemme både almindelige og konverterede WebP-billeder.
BunnyCDN
BunnyCDN kommer med Bunny Optimizer, som kan komprimere billeder og konvertere dem til WebP i farten.
Metode #2 - Brug af forskelligt svar + CDN
Som beskrevet ovenfor vil et "variant svar" have en enkelt billed-URL, der kan tjene både WebP- og ikke-webp-billeder afhængigt af den anmodede browser.
Vi skal også vælge det rigtige CDN, der understøtter WebP-anmodningsoverskrifter som en cache-nøgle. Ellers, når WebP-billedet er cachelagret på serveren, vil det blive leveret til browsere, der ikke understøtter WebP.
Tilpasning af varieret respons i WordPress
Den nemmeste måde at konfigurere et rigt svar til WebP i WordPress er at bruge WebP Express-plugin'et. Installer blot pluginnet og klik på "Gem indstillinger og gennemtving nye .htaccess-regler".
WebP Express vil konfigurere WebP-konverteren og overskrive reglerne, så når den modtager en anmodning, vil den konvertere billederne til WebP med det samme, og hvis browseren ikke understøtter WebP, vil standardbilledet blive leveret.
Hvis du er i Nginx
WebP Express tilføjer de nødvendige '.htaccess' omskrivningsregler, men virker kun på en Apache-, LiteSpeed- eller OpenLiteSpeed-server. Hvis du bruger Nginx, skal du redigerenginx.configog tilføj følgende kode:
# WebP Express-regler# --------------------placering ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Varierer Accepter;udløber 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;}# Rut anmodninger for ikke-eksisterende webps til konverteringsplaceringen ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ------------------ (WebP Express-regler slutter her)Ovenstående kode tilføjer de påkrævede svaroverskrifter (cachehåndtering varierer også) og forsøger at levere WebP, hvis det findes, ellers omdirigere det til konverteren (baseret på browserunderstøttelse)
CDN-udbydere, der understøtter Diverse Response
Hvis din CDN-udbyder ikke understøtter WebP som en caching-nøgle, vil WebP-filer blive leveret til browsere, der ikke understøtter WebP. På samme måde er der en chance for, at ikke-webp-billeder vil blive leveret til understøttede browsere.
BunnyCDN , KeyCDN , Google CDN og mange andre CDN-udbydere understøtter WebP som en cache-nøgle. Sørg for at aktivere dem i indstillingerne.
VBunnyCDN :
VKeyCDN :
Bruger du Cloudflares gratis plan?
Desværre understøtter Cloudflares gratis plan ikke WebP som en cache-nøgle. Brug enten et CDN som BunnCDN eller opgrader til deres professionelle plan.
Konfigurer et varieret svar + CDN med populære hostingudbydere
Sørg for, at WebP Express er installeret.
- Kinsta eller WP Engine - kontakt deres supportteam for at tilføje ovenstående Nginx-konfiguration og inkludere WebP-caching-nøglen i deres CDN (KeyCDN).
- Cloudways - bare installer WebP Express og gem indstillingerne ved hjælp af .htacess. Fordi Cloudways bruger en hybrid Apache + Nginx-tilgang, fungerer det ud af boksen.
- SiteGound - Kontakt support for at tilføje Nginx-konfigurationen. Brug et understøttet CDN som ovenfor.
- LiteSpeed / OpenLiteSpeed / Apache-server - bare installer WebP Express og gem indstillinger med '.htacess'. Brug også et understøttet CDN som ovenfor.
- Brugerdefineret VPS med Nginx (LEMP Stack) - Opsætning
nginx.confog brug et understøttet CDN som ovenfor.
Metode #3 - Brug af et billedmærke
Hvis begge ovenstående metoder ikke virker for dig, kan du bruge billedtagget. Det kræver ikke serverkonfiguration (redigering af nginx.conf) og understøtter alle CDN-udbydere.
Brug af denne metode vil ændre HTML for WebP-levering. Det virker ikke med baggrundsbilleder, er inkompatibelt med nogle temaer, cache-plugins, plugins til doven indlæsning osv.
Hvis du bruger denne metode, vil alle img-tags blive konverteret sådan:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Hvis browseren understøtter WebP, leveres den tilsvarende fil, ellers leveres et normalt billede.
Tilpasning af et billedtag til WebP i WordPress
Den nemmeste måde at opsætte et billedtag på er gennem WebP Express.
Indstil driftstilstanden til "CDN friendly" og aktiver "Alter HTML".
Konklusion
Jeg ville ønske, at den dag ville komme, hvor alle browsere understøtter WebP!
Hvis du kan bruge et par dollars om måneden, så er den nemmeste og mest effektive måde at bruge et CDN som BunnyCDN, som vil konvertere billeder til WebP i farten. Ellers skal du holde dig til metode #2, jeg nævnte ovenfor.
