Vendar pa pošiljanje slik prek WebP ni enostavno. Odvisno je od spletnega strežnika vašega strežnika, izbranega cdn-ja, teme, vtičnikov za predpomnjenje itd.
Ta vodnik vam bo pomagal dostaviti slike WebP v WordPress na tri načine.
Kaj je WebP?
Nov format slike za splet
WebP je slikovna oblika (kot png in jpg), ki jo je razvil Google. Slike WebP (.webp) so ponavadi veliko manjše, kar pospešuje spletna mesta in uporablja manj pasovne širine.
Glede na sliko lahko velikost zmanjšate od 25% do 70%.
JPEG, PNG, GIF itd. imajo svoje prednosti in slabosti. Spodnja tabela vam bo dala idejo:
| JPG | GIF | PNG | SVG | |
| Vektor | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Preglednost | ❌ | ✅ | ✅ | ✅ |
| Animacija | ❌ | ✅ | ✅ | ✅ |
| izgubljen | ✅ | ❌ | ❌ | ❌ |
WebP ima skoraj vse zgoraj omenjene funkcije! Zakaj potem WebP ne moremo uporabljati povsod?
Zakaj ne bi uporabljali WebP povsod?
Kot lahko vidite, samo 80 % naprav podpira samo WebP. Ne samo starejši brskalniki, Safari/iOS Safari še vedno ne podpira WebP.
Zakaj je tako težko služiti WebP?
Kot ste opazili, slike dostavljamo glede na brskalnik. Če brskalnik ne podpira WebP, jim moramo posredovati izvirno sliko (jpg/png/gif).
Obstajata dva glavna načina za storitev WebP:
Uporaba oznake slike
Lahko uporabimoslikaoznačuje brskalniku, da imamo obliko WebP. Če brskalnik to podpira, se bo naložila običajna/nadomestna slika.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Z drugačnim odgovorom
V drugem odgovoru, kot običajno, imate eno datoteko. Točno tako:
<img src="img.jpg" />En URL slike podpira dostavo datotek jpg in webp. To počne strežnik.
Čeprav je razširitev datoteke .jpg, če brskalnik podpira WebP, bo odgovor WebP. Imenuje se tudi "raznovrsten odziv".
Oznaka slike v primerjavi z raznolikim odzivom
Vsaka ima svoje prednosti in slabosti. Tukaj je primerjalna tabela:
| slikovna oznaka | Raznolik odziv | |
|---|---|---|
| Deluje s slikami ozadja | ❌ | ✅ |
| CDN prijazen | ✅ | ✅ (le nekaj) |
| Strežnik je treba konfigurirati | ❌ | ✅ (nginx) |
| Deluje z lenim nalaganjem | ✅ | ✅ |
Kako streči slike v WebP v WordPressu?
Metoda #1 - Uporabite CDN samo s pretvorbo fly WebP
To je verjetno najpreprostejša rešitev. Nekateri ponudniki CDN trenutno podpirajo sprotno pretvorbo slike v WebP skupaj z optimizacijo slike.
Tukaj je nekaj:
- BunnyCDN
- Cloudflare s poljščino (Pro načrt)
- Oblačno
- Prilagodljive slike ShortPixel (uporablja StackPath CDN)
- WP Compress
S to metodo lahko prihranite tudi prostor na disku, saj vam ni treba shranjevati običajnih in pretvorjenih slik WebP.
BunnyCDN
BunnyCDN prihaja z Bunny Optimizer, ki lahko stisne slike in jih sproti pretvori v WebP.
Metoda št. 2 - Uporaba raznolikega odziva + CDN
Kot je opisano zgoraj, bo "različen odgovor" imel en sam URL slike, ki lahko prikazuje slike WebP in slike brez spleta, odvisno od zahtevanega brskalnika.
Prav tako moramo izbrati pravi CDN, ki podpira glave zahtev WebP kot ključ predpomnilnika. V nasprotnem primeru, ko je slika WebP predpomnjena v strežniku, bo dostavljena brskalnikom, ki ne podpirajo WebP.
Prilagajanje raznolikih odzivov v WordPressu
Najlažji način za nastavitev bogatega odziva za WebP v WordPressu je uporaba vtičnika WebP Express. Samo namestite vtičnik in kliknite "Shrani nastavitve in vsili nova pravila .htaccess".
WebP Express bo konfiguriral pretvornik WebP in prepisal pravila, tako da bo, ko prejme zahtevo, slike sproti pretvoril v WebP, in če brskalnik ne podpira WebP, bo dostavljena privzeta slika.
Če ste v Nginxu
WebP Express doda potrebna pravila za prepisovanje '.htaccess', vendar deluje samo na strežnikih Apache, LiteSpeed ali OpenLiteSpeed. Če uporabljate Nginx, morate ureditinginx.configin dodajte naslednjo kodo:
# Pravila WebP Express# --------------------lokacija ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Sprejmi;poteče 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;}# Usmeri zahteve za neobstoječe webps na lokacijo pretvornika ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (pravila WebP Express se končajo tukaj)Zgornja koda dodaja zahtevane glave odgovora (tudi upravljanje predpomnilnika se razlikuje) in poskuša dostaviti WebP, če obstaja, sicer pa ga preusmeri v pretvornik (na podlagi podpore brskalnika)
Ponudniki CDN, ki podpirajo Diverse Response
Če vaš ponudnik CDN ne podpira WebP kot ključa za predpomnjenje, bodo datoteke WebP dostavljene brskalnikom, ki ne podpirajo WebP. Podobno obstaja možnost, da bodo slike, ki niso spletne strani, dostavljene v podprte brskalnike.
BunnyCDN , KeyCDN , Googlov CDN in številni drugi ponudniki CDN podpirajo WebP kot ključ za predpomnilnik. Prepričajte se, da jih omogočite v nastavitvah.
VBunnyCDN :
VKeyCDN :
Ali uporabljate brezplačen načrt Cloudflare?
Na žalost brezplačni načrt Cloudflare ne podpira WebP kot ključa predpomnilnika. Uporabite CDN, kot je BunnCDN, ali nadgradite na njihov profesionalni načrt.
Nastavite raznolik odziv + CDN s priljubljenimi ponudniki gostovanja
Prepričajte se, da je nameščen WebP Express.
- Kinsta ali WP Engine – kontaktirajte njihovo ekipo za podporo, da dodate zgornjo konfiguracijo Nginx in vključite ključ za predpomnjenje WebP v svoj CDN (KeyCDN).
- Cloudways - samo namestite WebP Express in shranite nastavitve z .htacess. Ker Cloudways uporablja hibridni pristop Apache + Nginx, deluje iz škatle.
- SiteGound – Za dodajanje konfiguracije Nginx se obrnite na podporo. Uporabite podprt CDN, kot je opisano zgoraj.
- Strežnik LiteSpeed / OpenLiteSpeed / Apache - samo namestite WebP Express in shranite nastavitve z '.htacess'. Uporabite tudi podprt CDN, kot je navedeno zgoraj.
- VPS po meri z Nginxom (LEMP Stack) - Nastavitev
nginx.confin uporabite podprt CDN, kot je navedeno zgoraj.
Metoda #3 - Uporaba slikovne oznake
Če vam obe zgornji metodi ne delujeta, lahko uporabite oznako slike. Ne zahteva konfiguracije strežnika (urejanje nginx.conf) in podpira vse ponudnike CDN.
Uporaba te metode bo spremenila HTML za dostavo WebP. Ne bo deloval s slikami ozadja, ni združljiv z nekaterimi temami, vtičniki za predpomnjenje, vtičniki za leno nalaganje itd.
Če uporabite to metodo, bodo vse oznake img pretvorjene takole:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Če brskalnik podpira WebP, se dostavi ustrezna datoteka; v nasprotnem primeru se dostavi običajna slika.
Prilagajanje slikovne oznake za WebP v WordPressu
Najlažji način za nastavitev slikovne oznake je prek WebP Express.
Nastavite delovni način na "CDN friendly" in omogočite "Spremeni HTML".
Zaključek
Želim si, da bi prišel dan, ko vsi brskalniki podpirajo WebP!
Če lahko porabite nekaj dolarjev na mesec, potem je najlažji in najučinkovitejši način, da uporabite CDN, kot je BunnyCDN, ki bo sproti pretvoril slike v WebP. V nasprotnem primeru se držite metode #2, ki sem jo omenil zgoraj.
