Kujutiste edastamine WebP kaudu pole aga lihtne. See sõltub teie serveri veebiserverist, valitud cdn-st, teemast, vahemällu salvestamise pistikprogrammidest jne.
See juhend aitab teil WebP-pilte WordPressi edastada kolmel viisil.
Mis on WebP?
Uus pildivorming veebi jaoks
Google'i poolt
WebP on pildivorming (nagu png ja jpg), mille on välja töötanud Google. WebP (.webp) pildid kipuvad olema palju väiksemad, mis kiirendab veebisaite ja kasutab vähem ribalaiust.
Sõltuvalt pildist saate suurust vähendada 25%-lt 70%-le.
JPEG-l, PNG-l, GIF-il jne on oma plussid ja miinused. Allolev tabel annab teile idee:
| JPG | GIF | PNG | SVG | |
| Vektor | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Läbipaistvus | ❌ | ✅ | ✅ | ✅ |
| Animatsioon | ❌ | ✅ | ✅ | ✅ |
| Kadunud | ✅ | ❌ | ❌ | ❌ |
WebP-l on peaaegu kõik ülalmainitud funktsioonid! Miks me siis ei saa WebP-d igal pool kasutada?
Miks mitte kasutada WebP-d kõikjal?
Nagu näete, toetab ainult 80% seadmetest ainult WebP-d. Mitte ainult pärandbrauserid, vaid ka Safari/iOS-i Safari ei toeta endiselt WebP-d.
Miks on WebP teenindamine nii keeruline?
Nagu märkasite, edastame pilte vastavalt brauserile. Kui brauser ei toeta WebP-d, peame neile esitama originaalpildi (jpg/png/gif).
WebP teenindamiseks on kaks peamist viisi:
Pildisildi kasutamine
Saame kasutadapiltsilt, et öelda brauserile, et meil on WebP-vorming. Kui brauser seda toetab, laaditakse tavaline/varukujutis.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Erineva vastusega
Erineva vastuse korral on teil nagu tavaliselt üks fail. Täpselt:
<img src="img.jpg" />Üks pildi URL toetab jpg- ja webp-failide edastamist. Seda teeb server.
Kuigi see on .jpg-faililaiend, siis kui brauser toetab WebP-d, on vastuseks WebP. Seda nimetatakse ka "mitmekülgseks vastuseks".
Kujutise silt vs mitmekesine reaktsioon
Igal neist on oma plussid ja miinused. Siin on võrdlustabel:
| pildi silt | Mitmekesine vastus | |
|---|---|---|
| Töötab taustapiltidega | ❌ | ✅ |
| CDN-sõbralik | ✅ | ✅ (vaid mõned) |
| Server tuleb konfigureerida | ❌ | ✅ (nginx) |
| Töötab laisa laadimisega | ✅ | ✅ |
Kuidas WordPressis WebP-s pilte esitada?
1. meetod – kasutage CDN-i ainult koos fly WebP teisendusega
See on ilmselt kõige lihtsam lahendus. Mõned CDN-i pakkujad toetavad praegu piltide teisendamist WebP-ks koos pildi optimeerimisega.
Siin on mõned:
- JänkuCDN
- Cloudflare koos Poola keelega (Pro Plan)
- Pilvine ilm
- ShortPixel Adaptive Images (kasutab StackPathi CDN-i)
- WP tihendamine
Selle meetodi abil saate ka kettaruumi säästa, kuna te ei pea salvestama nii tavalisi kui ka teisendatud WebP-pilte.
JänkuCDN
BunnyCDN-iga on kaasas Bunny Optimizer, mis suudab pilte tihendada ja käigult WebP-ks teisendada.
2. meetod – mitmekülgse vastuse ja CDN-i kasutamine
Nagu ülalpool kirjeldatud, on "erineval vastusel" üks pildi URL, mis võib olenevalt taotletud brauserist esitada nii WebP kui ka mitte-veebi pilte.
Peame valima ka õige CDN-i, mis toetab vahemäluvõtmena WebP päringu päiseid. Vastasel juhul, kui WebP-pilt on serveri vahemällu salvestatud, edastatakse see brauseritele, mis ei toeta WebP-d.
Mitmekesise reageerimise kohandamine WordPressis
Lihtsaim viis WebP jaoks rikkaliku vastuse seadistamiseks WordPressis on kasutada WebP Expressi pistikprogrammi. Lihtsalt installige pistikprogramm ja klõpsake "Salvesta sätted ja jõustage uued .htaccess-reeglid".
WebP Express konfigureerib WebP-muunduri ja kirjutab reeglid üle nii, et päringu saamisel teisendab see pildid käigult WebP-ks ja kui brauser ei toeta WebP-d, edastatakse vaikepilt.
Kui olete Nginxis
WebP Express lisab vajalikud ".htaccess" ümberkirjutusreeglid, kuid töötab ainult Apache-, LiteSpeed- või OpenLiteSpeed-serveris. Kui kasutate Nginxi, peate redigeerimanginx.configja lisage järgmine kood:
# WebP Expressi reeglid# ---------------------asukoht ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Nõustu;aegub 365 päeva pärast;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;}# Marsruudi mitteolemasolevate veebilehtede päringud konverteri asukohta ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ---------------- (WebP Expressi reeglid lõpevad siin)Ülaltoodud kood lisab nõutavad vastuse päised (vahemälu haldamine on samuti erinev) ja proovib WebP-d edastada, kui see on olemas, vastasel juhul suunake see konverterile (brauseri toe alusel)
CDN-i pakkujad, kes toetavad funktsiooni Diverse Response
Kui teie CDN-i pakkuja ei toeta WebP-d vahemäluvõtmena, edastatakse WebP-failid brauseritesse, mis ei toeta WebP-d. Samamoodi on võimalus, et mitte-veebikujutised edastatakse toetatud brauseritesse.
JänkuCDN , KeyCDN , Google'i CDN ja paljud teised CDN-i pakkujad toetavad WebP-d vahemäluvõtmena. Veenduge, et olete need seadetes lubanud.
VJänkuCDN :
VKeyCDN :
Kas kasutate Cloudflare'i tasuta paketti?
Kahjuks ei toeta Cloudflare'i tasuta pakett WebP-d vahemäluvõtmena. Kasutage CDN-i (nt BunnCDN) või minge üle oma professionaalsele plaanile.
Seadistage populaarsete hostiteenuse pakkujatega mitmekesine vastus + CDN
Veenduge, et WebP Express on installitud.
- Kinsta või WP Engine – võtke ühendust nende tugimeeskonnaga, et lisada ülaltoodud Nginxi konfiguratsioon ja lisada WebP vahemällu võti nende CDN-i (KeyCDN).
- Cloudways – installige lihtsalt WebP Express ja salvestage sätted failiga .htacess. Kuna Cloudways kasutab hübriidset Apache + Nginxi lähenemisviisi, töötab see juba karbist välja.
- SiteGound – Nginxi konfiguratsiooni lisamiseks võtke ühendust toega. Kasutage ülaltoodud toetatud CDN-i.
- LiteSpeed / OpenLiteSpeed / Apache server – installige lihtsalt WebP Express ja salvestage sätted '.htacess'iga. Kasutage ka ülaltoodud toetatud CDN-i.
- Kohandatud VPS koos Nginxiga (LEMP Stack) – seadistamine
nginx.confja kasutage ülaltoodud toetatud CDN-i.
3. meetod – pildisildi kasutamine
Kui mõlemad ülaltoodud meetodid teie jaoks ei tööta, võite kasutada pildimärgendit. See ei nõua serveri konfigureerimist (nginx.conf redigeerimine) ja toetab kõiki CDN-i pakkujaid.
Selle meetodi kasutamine muudab WebP-edastuse HTML-i. See ei tööta taustpiltidega, ei ühildu mõne teema, vahemällu salvestamise pistikprogrammide, laisa laadimise pistikprogrammidega jne.
Kui kasutate seda meetodit, teisendatakse kõik img-sildid järgmiselt:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Kui brauser toetab WebP-d, edastatakse vastav fail, vastasel juhul edastatakse tavaline pilt.
WebP pildimärgendi kohandamine WordPressis
Lihtsaim viis pildisildi seadistamiseks on WebP Expressi kaudu.
Määrake töörežiimiks "CDN-sõbralik" ja lubage "Muuda HTML-i".
Järeldus
Soovin, et tuleks päev, mil kõik brauserid toetavad WebP-d!
Kui saate kulutada paar dollarit kuus, siis kõige lihtsam ja tõhusam viis on kasutada CDN-i nagu BunnyCDN, mis teisendab pildid käigult WebP-ks. Vastasel juhul järgige ülalmainitud meetodit nr 2.
