A képek WebP-n keresztüli szállítása azonban nem egyszerű. Ez függ a szerver webszerverétől, a kiválasztott cdn-től, a témától, a gyorsítótárazási beépülő moduloktól stb.
Ez az útmutató háromféle módon segít a WebP-képek WordPress-be való eljuttatásában.
Mi az a WebP?
Új képformátum az internethez
a Google által
A WebP egy képformátum (például a png és a jpg), amelyet a Google fejlesztett ki. A WebP (.webp) képek általában sokkal kisebbek, ami felgyorsítja a webhelyeket és kevesebb sávszélességet használ.
A képtől függően a méretet 25%-ról 70%-ra csökkentheti.
A JPEG-nek, PNG-nek, GIF-nek stb. megvannak az előnyei és hátrányai. Az alábbi táblázat ötletet ad:
| JPG | GIF | PNG | SVG | |
| Vektor | ❌ | ❌ | ❌ | ✅ |
| Raszter | ✅ | ✅ | ✅ | ❌ |
| Átláthatóság | ❌ | ✅ | ✅ | ✅ |
| Élénkség | ❌ | ✅ | ✅ | ✅ |
| Elveszett | ✅ | ❌ | ❌ | ❌ |
A WebP szinte az összes fent említett funkcióval rendelkezik! Akkor miért nem használhatjuk mindenhol a WebP-t?
Miért nem használjuk mindenhol a WebP-t?
Mint látható, az eszközöknek csak 80%-a támogatja csak a WebP-t. Nemcsak a régi böngészők, a Safari/iOS Safari továbbra sem támogatja a WebP-t.
Miért olyan nehéz a WebP kiszolgálása?
Ahogy észrevette, a képeket a böngészőnek megfelelően szállítjuk. Ha a böngésző nem támogatja a WebP-t, meg kell adnunk nekik az eredeti képet (jpg/png/gif).
A WebP kiszolgálásának két fő módja van:
A képcímke használata
Tudjuk használniképcímkével jelzi a böngészőnek, hogy WebP formátummal rendelkezünk. Ha a böngésző támogatja, akkor a normál/tartalék kép betöltődik.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Más válasz alapján
Egy másik válasz, mint általában, egy fájl van. Pontosan:
<img src="img.jpg" />Egy kép URL-je támogatja a jpg és webp fájlok kézbesítését. Ezt csinálja a szerver.
Annak ellenére, hogy .jpg fájlkiterjesztésről van szó, ha a böngésző támogatja a WebP-t, akkor a válasz WebP lesz. Más néven "változatos válasz".
Képcímke és változatos válasz
Mindegyiknek megvannak a maga előnyei és hátrányai. Itt van egy összehasonlító táblázat:
| képcímke | Változatos reakció | |
|---|---|---|
| Háttérképekkel működik | ❌ | ✅ |
| CDN-barát | ✅ | ✅ (csak néhány) |
| A szervert konfigurálni kell | ❌ | ✅ (nginx) |
| Lusta töltéssel működik | ✅ | ✅ |
Hogyan lehet képeket kiszolgálni a WebP-ben a WordPressben?
1. módszer – Csak CDN-t használjon a fly WebP konverzióhoz
Talán ez a legegyszerűbb megoldás. Egyes CDN-szolgáltatók jelenleg támogatják az azonnali kép WebP-vé konvertálását, valamint a képoptimalizálást.
Íme néhány:
- BunnyCDN
- Cloudflare lengyel nyelven (Pro terv)
- Felhős
- ShortPixel adaptív képek (StackPath CDN-t használ)
- WP tömörítés
Ezzel a módszerrel lemezterületet is megtakaríthat, mivel nem kell normál és konvertált WebP-képeket is tárolnia.
BunnyCDN
A BunnyCDN a Bunny Optimizerrel érkezik, amely képes tömöríteni a képeket, és menet közben WebP-re konvertálni.
2. módszer – Diverse Response + CDN használata
A fent leírtak szerint a „változatos válaszok” egyetlen kép URL-címével rendelkeznek, amely a kért böngészőtől függően WebP és nem webalapú képeket is kiszolgálhat.
Ezenkívül ki kell választanunk a megfelelő CDN-t, amely támogatja a WebP-kérés fejléceit gyorsítótár kulcsként. Ellenkező esetben, ha a WebP-képfájl gyorsítótárban van a kiszolgálón, a rendszer olyan böngészőkhöz is eljut, amelyek nem támogatják a WebP-t.
A változatos válaszok testreszabása a WordPressben
A WebP-re vonatkozó gazdag válasz beállításának legegyszerűbb módja a WordPressben a WebP Express beépülő modul használata. Csak telepítse a bővítményt, és kattintson a "Beállítások mentése és új .htaccess szabályok kényszerítése" gombra.
A WebP Express úgy konfigurálja a WebP konvertert, és felülírja a szabályokat, hogy amikor egy kérés érkezik, akkor menet közben konvertálja a képeket WebP-re, és ha a böngésző nem támogatja a WebP-t, akkor az alapértelmezett kép lesz kézbesítve.
Ha Nginxben vagy
A WebP Express hozzáadja a szükséges „.htaccess” átírási szabályokat, de csak Apache, LiteSpeed vagy OpenLiteSpeed szerveren működik. Ha Nginxet használ, szerkesztenie kellnginx.configés add hozzá a következő kódot:
# WebP Express szabályok# --------------------hely ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Változó Elfogadás;365 nap múlva lejár;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;}# A nem létező webekre vonatkozó kérések a ~* ^/?wp-content/ konverterhelyre irányítása .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (A WebP Express szabályok itt érnek véget)A fenti kód hozzáadja a szükséges válaszfejléceket (a gyorsítótár-kezelés is változó), és megpróbálja eljuttatni a WebP-t, ha létezik, ellenkező esetben átirányítja a konverterhez (a böngésző támogatása alapján)
A Diverse Response szolgáltatást támogató CDN-szolgáltatók
Ha a CDN-szolgáltató nem támogatja a WebP-t gyorsítótár-kulcsként, a WebP-fájlok a WebP-t nem támogató böngészőkbe kerülnek. Hasonlóképpen van esély arra is, hogy a nem webes képeket a támogatott böngészőkbe szállítsák.
BunnyCDN , KeyCDN , Google CDN és sok más CDN-szolgáltató támogatja a WebP-t gyorsítótár-kulcsként. Győződjön meg arról, hogy engedélyezte őket a beállításokban.
VBunnyCDN :
VKeyCDN :
Használja a Cloudflare ingyenes csomagját?
Sajnos a Cloudflare ingyenes csomagja nem támogatja a WebP-t gyorsítótár-kulcsként. Használjon CDN-t, például a BunnCDN-t, vagy frissítsen a professzionális tervére.
Hozzon létre egy változatos választ + CDN népszerű tárhelyszolgáltatókkal
Győződjön meg arról, hogy a WebP Express telepítve van.
- Kinsta vagy WP Engine – vegye fel a kapcsolatot a támogatási csapattal a fenti Nginx konfiguráció hozzáadásához, és adja hozzá a WebP gyorsítótárazási kulcsot a CDN-be (KeyCDN).
- Cloudways – csak telepítse a WebP Express-t, és mentse a beállításokat a .htacess használatával. Mivel a Cloudways hibrid Apache + Nginx megközelítést használ, a dobozból kiindulva működik.
- SiteGound – Lépjen kapcsolatba az ügyfélszolgálattal az Nginx konfiguráció hozzáadásához. Használjon támogatott CDN-t a fentiek szerint.
- LiteSpeed / OpenLiteSpeed / Apache szerver - csak telepítse a WebP Express-t, és mentse a beállításokat a '.htacess' segítségével. Használjon támogatott CDN-t is a fentiek szerint.
- Egyéni VPS Nginx-szel (LEMP Stack) – Beállítás
nginx.confés használjon támogatott CDN-t a fentiek szerint.
3. módszer – Képcímke használata
Ha mindkét fenti módszer nem működik az Ön számára, használhatja a képcímkét. Nem igényel szerverkonfigurációt (az nginx.conf szerkesztése), és támogatja az összes CDN-szolgáltatót.
Ezzel a módszerrel megváltozik a WebP kézbesítés HTML-kódja. Nem működik háttérképekkel, nem kompatibilis bizonyos témákkal, gyorsítótárazó bővítményekkel, lusta betöltő bővítményekkel stb.
Ha ezt a módszert használja, az összes img tag a következőképpen lesz konvertálva:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Ha a böngésző támogatja a WebP-t, akkor a megfelelő fájl lesz kézbesítve, ellenkező esetben normál kép.
A WebP képcímkéjének testreszabása a WordPressben
A képcímke beállításának legegyszerűbb módja a WebP Express.
Állítsa a működési módot „CDN-barát”-ra, és engedélyezze az „Alter HTML” lehetőséget.
Következtetés
Bárcsak eljön a nap, amikor minden böngésző támogatja a WebP-t!
Ha el tud költeni néhány dollárt havonta, akkor a legegyszerűbb és leghatékonyabb módja egy olyan CDN használata, mint a BunnyCDN, amely a képeket menet közben WebP-vé alakítja. Ellenkező esetben maradjon a fent említett 2. módszernél.
