Tačiau vaizdų pristatymas per WebP nėra lengvas. Tai priklauso nuo jūsų serverio žiniatinklio serverio, pasirinkto cdn, temos, talpyklos papildinių ir kt.
Šis vadovas padės trimis būdais pateikti WebP vaizdus į „WordPress“.
Kas yra WebP?
Naujas vaizdo formatas žiniatinkliui
pateikė Google
WebP yra vaizdo formatas (pvz., png ir jpg), kurį sukūrė Google. WebP (.webp) vaizdai paprastai būna daug mažesni, o tai pagreitina svetaines ir naudoja mažiau pralaidumo.
Atsižvelgiant į vaizdą, dydį galite sumažinti nuo 25% iki 70%.
JPEG, PNG, GIF ir kt. turi savo privalumų ir trūkumų. Žemiau pateikta lentelė suteiks jums idėją:
| JPG | GIF | PNG | SVG | |
| Vektorius | ❌ | ❌ | ❌ | ✅ |
| Rastras | ✅ | ✅ | ✅ | ❌ |
| Skaidrumas | ❌ | ✅ | ✅ | ✅ |
| Animacija | ❌ | ✅ | ✅ | ✅ |
| Prarasta | ✅ | ❌ | ❌ | ❌ |
WebP turi beveik visas aukščiau paminėtas funkcijas! Tai kodėl mes negalime visur naudoti WebP?
Kodėl gi ne visur naudoti WebP?
Kaip matote, tik 80% įrenginių palaiko tik WebP. Ne tik senos naršyklės, bet ir „Safari“ / „iOS“ „Safari“ vis dar nepalaiko „WebP“.
Kodėl taip sunku aptarnauti WebP?
Kaip pastebėjote, vaizdus pristatome pagal naršyklę. Jei naršyklė nepalaiko WebP, turime pateikti jiems originalų vaizdą (jpg/png/gif).
Yra du pagrindiniai „WebP“ aptarnavimo būdai:
Vaizdo žymos naudojimas
Galime naudotipaveikslėlįžymą, kad praneštumėte naršyklei, kad turime WebP formatą. Jei naršyklė tai palaiko, bus įkeltas įprastas / atsarginis vaizdas.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Pagal skirtingą atsakymą
Kitu atsakymu, kaip įprasta, turite vieną failą. Tiksliai:
<img src="img.jpg" />Vienas vaizdo URL palaiko jpg ir webp failų pristatymą. Štai ką serveris daro.
Net jei tai yra .jpg failo plėtinys, jei naršyklė palaiko WebP, atsakymas bus WebP. Taip pat vadinamas „įvairiu atsaku“.
Vaizdo žyma prieš įvairų atsaką
Kiekvienas turi savo pliusų ir minusų. Čia yra palyginimo lentelė:
| vaizdo žyma | Įvairus atsakas | |
|---|---|---|
| Veikia su fono vaizdais | ❌ | ✅ |
| CDN draugiškas | ✅ | ✅ (tik keli) |
| Serveris turi būti sukonfigūruotas | ❌ | ✅ (nginx) |
| Veikia su tingiu krovimu | ✅ | ✅ |
Kaip pateikti vaizdus „WebP“ sistemoje „WordPress“?
1 metodas – naudokite CDN tik su „fly WebP“ konvertavimu
Tai turbūt paprasčiausias sprendimas. Kai kurie CDN teikėjai šiuo metu palaiko tiesioginį vaizdo konvertavimą į WebP kartu su vaizdo optimizavimu.
Štai keletas:
- BunnyCDN
- Cloudflare su lenkų kalba (Pro planas)
- Debesuota
- „ShortPixel“ prisitaikantys vaizdai (naudoja „StackPath“ CDN)
- WP suspaudimas
Taip pat galite sutaupyti vietos diske naudodami šį metodą, nes jums nereikia saugoti ir įprastų, ir konvertuotų WebP vaizdų.
BunnyCDN
BunnyCDN yra su Bunny Optimizer, kuri gali suspausti vaizdus ir konvertuoti juos į WebP.
2 metodas – Įvairaus atsako + CDN naudojimas
Kaip aprašyta aukščiau, „įvairaus atsako“ bus vienas vaizdo URL, kuris gali teikti ir WebP, ir ne žiniatinklio vaizdus, atsižvelgiant į prašomą naršyklę.
Taip pat turime pasirinkti tinkamą CDN, kuris palaiko WebP užklausų antraštes kaip talpyklos raktą. Priešingu atveju, kai WebP vaizdas bus talpykloje serveryje, jis bus pristatytas į naršykles, kurios nepalaiko WebP.
Įvairaus atsako pritaikymas „WordPress“.
Paprasčiausias būdas „WordPress“ nustatyti išsamų „WebP“ atsakymą yra naudoti „WebP Express“ papildinį. Tiesiog įdiekite papildinį ir spustelėkite „Išsaugoti nustatymus ir įvesti naujas .htaccess taisykles“.
„WebP Express“ sukonfigūruos „WebP“ keitiklį ir perrašys taisykles taip, kad, gavęs užklausą, skraidydamas konvertuotų vaizdus į WebP, o jei naršyklė nepalaiko „WebP“, bus pristatytas numatytasis vaizdas.
Jei esate Nginx
„WebP Express“ prideda būtinas „.htaccess“ perrašymo taisykles, tačiau veikia tik „Apache“, „LiteSpeed“ arba „OpenLiteSpeed“ serveryje. Jei naudojate Nginx, turite redaguotinginx.configir pridėkite šį kodą:
# WebP Express taisyklės# --------------------vieta ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Priimti;galioja iki 365 d;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;}# Neegzistuojančių žiniatinklio tinklų užklausos nukreipti į konverterio vietą ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ---------------- (Čia baigiasi WebP Express taisyklės)Aukščiau pateiktas kodas prideda reikiamas atsakymų antraštes (talpyklos valdymas taip pat skiriasi) ir bando pateikti WebP, jei jis yra, kitu atveju nukreipia jį į keitiklį (remiantis naršyklės palaikymu)
CDN teikėjai, palaikantys Diverse Response
Jei jūsų CDN teikėjas nepalaiko WebP kaip talpyklos rakto, WebP failai bus pristatyti į naršykles, kurios nepalaiko WebP. Taip pat yra tikimybė, kad ne žiniatinklio vaizdai bus pristatyti į palaikomas naršykles.
BunnyCDN , KeyCDN , Google CDN ir daugelis kitų CDN teikėjų palaiko WebP kaip talpyklos raktą. Įsitikinkite, kad įgalinote juos nustatymuose.
VBunnyCDN :
VKeyCDN :
Ar naudojate nemokamą „Cloudflare“ planą?
Deja, nemokamas „Cloudflare“ planas nepalaiko „WebP“ kaip talpyklos rakto. Naudokite CDN, pvz., BunnCDN, arba atnaujinkite savo profesinį planą.
Sukurkite įvairų atsaką + CDN su populiariais prieglobos paslaugų teikėjais
Įsitikinkite, kad WebP Express yra įdiegtas.
- „Kinsta“ arba „WP Engine“ – susisiekite su jų palaikymo komanda, kad pridėtumėte aukščiau pateiktą „Nginx“ konfigūraciją ir įtrauktumėte WebP talpyklos raktą į savo CDN (KeyCDN).
- Cloudways – tiesiog įdiekite WebP Express ir išsaugokite nustatymus naudodami .htacess. Kadangi „Cloudways“ naudoja hibridinį „Apache + Nginx“ metodą, jis veikia iš karto.
- SiteGound – susisiekite su palaikymo komanda, kad pridėtumėte Nginx konfigūraciją. Naudokite palaikomą CDN, kaip nurodyta aukščiau.
- „LiteSpeed“ / „OpenLiteSpeed“ / „Apache“ serveris – tiesiog įdiekite „WebP Express“ ir išsaugokite nustatymus naudodami „.htacess“. Taip pat naudokite palaikomą CDN, kaip nurodyta aukščiau.
- Pasirinktinis VPS su Nginx (LEMP Stack) – sąranka
nginx.confir naudokite palaikomą CDN, kaip nurodyta aukščiau.
3 metodas – vaizdo žymos naudojimas
Jei abu aukščiau pateikti metodai jums netinka, galite naudoti vaizdo žymą. Tam nereikia serverio konfigūracijos (redaguoti nginx.conf) ir palaiko visus CDN teikėjus.
Naudojant šį metodą bus pakeistas WebP pristatymo HTML. Jis neveiks su fono vaizdais, nesuderinamas su kai kuriomis temomis, talpyklos papildiniais, tingaus įkėlimo papildiniais ir kt.
Jei naudosite šį metodą, visos img žymos bus konvertuojamos taip:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Jei naršyklė palaiko WebP, pateikiamas atitinkamas failas; kitu atveju pateikiamas įprastas vaizdas.
„WebP“ vaizdo žymos tinkinimas sistemoje „WordPress“.
Lengviausias būdas nustatyti vaizdo žymą yra naudojant WebP Express.
Nustatykite veikimo režimą į „CDN draugiškas“ ir įjunkite „Alter HTML“.
Išvada
Linkiu, kad ateis diena, kai visos naršyklės palaikys WebP!
Jei galite išleisti kelis dolerius per mėnesį, paprasčiausias ir efektyviausias būdas yra naudoti CDN, pvz., BunnyCDN, kuris greitai konvertuos vaizdus į WebP. Kitu atveju laikykitės 2 metodo, kurį paminėjau aukščiau.
