Doručovanie obrázkov cez WebP však nie je jednoduché. Záleží na webovom serveri vášho servera, vybranom cdn, téme, doplnkoch na ukladanie do vyrovnávacej pamäte atď.
Táto príručka vám pomôže doručiť obrázky WebP do WordPress tromi spôsobmi.
Čo je WebP?
Nový formát obrázkov pre web
spoločnosťou Google
WebP je obrázkový formát (ako png a jpg) vyvinutý spoločnosťou Google. Obrázky WebP (.webp) bývajú oveľa menšie, čo zrýchľuje webové stránky a využíva menšiu šírku pásma.
V závislosti od obrázka môžete zmenšiť veľkosť od 25 % do 70 %.
JPEG, PNG, GIF atď. majú svoje výhody a nevýhody. Nasledujúca tabuľka vám poskytne predstavu:
| JPG | GIF | PNG | SVG | |
| Vektor | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Transparentnosť | ❌ | ✅ | ✅ | ✅ |
| Animácia | ❌ | ✅ | ✅ | ✅ |
| Stratené | ✅ | ❌ | ❌ | ❌ |
WebP má takmer všetky funkcie uvedené vyššie! Prečo potom nemôžeme používať WebP všade?
Prečo nepoužívať WebP všade?
Ako vidíte, iba 80 % zariadení podporuje iba WebP. Nielen staršie prehliadače, Safari/iOS Safari stále nepodporuje WebP.
Prečo je také ťažké poskytovať WebP?
Ako ste si všimli, obrázky dodávame podľa prehliadača. Ak prehliadač nepodporuje WebP, musíme mu poskytnúť pôvodný obrázok (jpg/png/gif).
Existujú dva hlavné spôsoby poskytovania WebP:
Použitie značky obrázka
Môžeme použiťobrázoktag, ktorý prehliadaču oznámi, že máme formát WebP. Ak to prehliadač podporuje, načíta sa bežný/záložný obrázok.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Podľa inej odpovede
V inej odpovedi, ako obvykle, máte jeden súbor. presne tak:
<img src="img.jpg" />Jedna adresa URL obrázka podporuje doručovanie súborov jpg a webp. Toto robí server.
Aj keď ide o príponu súboru .jpg, ak prehliadač podporuje WebP, odpoveď bude WebP. Nazýva sa aj „rôzna reakcia“.
Image Tag verzus rôznorodá odozva
Každá má svoje pre a proti. Tu je porovnávacia tabuľka:
| obrázková značka | Rôznorodá odozva | |
|---|---|---|
| Pracuje s obrázkami na pozadí | ❌ | ✅ |
| Priateľské k CDN | ✅ | ✅ (len zopár) |
| Server je potrebné nakonfigurovať | ❌ | ✅ (nginx) |
| Pracuje s lenivým načítaním | ✅ | ✅ |
Ako podávať obrázky vo WebP vo WordPress?
Metóda č. 1 – CDN používajte iba s konverziou fly WebP
Toto je asi najjednoduchšie riešenie. Niektorí poskytovatelia CDN v súčasnosti podporujú konverziu obrazu na WebP za chodu spolu s optimalizáciou obrazu.
Tu je niekoľko:
- BunnyCDN
- Cloudflare s poľštinou (Pro Plan)
- Oblačno
- Adaptívne obrázky ShortPixel (používa StackPath CDN)
- WP Compress
Pomocou tejto metódy môžete tiež ušetriť miesto na disku, pretože nemusíte ukladať bežné aj skonvertované obrázky WebP.
BunnyCDN
BunnyCDN prichádza s Bunny Optimizer, ktorý dokáže komprimovať obrázky a previesť ich na WebP za behu.
Metóda č. 2 - Použitie Diverse Response + CDN
Ako je popísané vyššie, „rôzna odpoveď“ bude mať jedinú adresu URL obrázka, ktorá môže zobrazovať obrázky WebP aj iné obrázky v závislosti od požadovaného prehliadača.
Musíme tiež vybrať správne CDN, ktoré podporuje hlavičky požiadaviek WebP ako kľúč vyrovnávacej pamäte. V opačnom prípade, keď sa obraz WebP uloží do vyrovnávacej pamäte na serveri, bude doručený prehliadačom, ktoré nepodporujú WebP.
Prispôsobenie rôznych odpovedí vo WordPress
Najjednoduchší spôsob, ako nastaviť bohatú odozvu pre WebP vo WordPress, je použiť doplnok WebP Express. Stačí nainštalovať plugin a kliknúť na „Uložiť nastavenia a vynútiť nové pravidlá .htaccess“.
WebP Express nakonfiguruje prevodník WebP a prepíše pravidlá tak, že keď dostane požiadavku, skonvertuje obrázky na WebP za behu, a ak prehliadač nepodporuje WebP, bude doručený predvolený obrázok.
Ak ste v Nginx
WebP Express pridáva potrebné pravidlá prepísania '.htaccess', ale funguje iba na serveri Apache, LiteSpeed alebo OpenLiteSpeed . Ak používate Nginx, musíte ho upraviťnginx.configa pridajte nasledujúci kód:
# Pravidlá WebP Express# --------------------umiestnenie ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Accept;vyprší 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;}# Smerovať požiadavky pre neexistujúce webps do umiestnenia prevodníka ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (pravidlá WebP Express tu končia)Vyššie uvedený kód pridá požadované hlavičky odpovedí (správa vyrovnávacej pamäte sa tiež líši) a pokúsi sa doručiť WebP, ak existuje, inak ho presmeruje na konvertor (na základe podpory prehliadača)
Poskytovatelia CDN podporujúci Diverse Response
Ak váš poskytovateľ CDN nepodporuje WebP ako kľúč vyrovnávacej pamäte, súbory WebP budú doručené prehliadačom, ktoré nepodporujú WebP. Podobne existuje šanca, že obrázky, ktoré nepochádzajú z webu, budú doručené do podporovaných prehliadačov.
BunnyCDN , KeyCDN , Google CDN a mnohí ďalší poskytovatelia CDN podporujú WebP ako kľúč vyrovnávacej pamäte. Uistite sa, že ste ich povolili v nastaveniach.
VBunnyCDN :
VKeyCDN :
Používate bezplatný plán Cloudflare?
Bohužiaľ, bezplatný plán Cloudflare nepodporuje WebP ako kľúč vyrovnávacej pamäte. Buď použite CDN ako BunnCDN, alebo inovujte na svoj profesionálny plán.
Nastavte rôznorodú odozvu + CDN s obľúbenými poskytovateľmi hostingu
Uistite sa, že je nainštalovaný WebP Express.
- Kinsta alebo WP Engine – kontaktujte ich tím podpory a pridajte vyššie uvedenú konfiguráciu Nginx a zahrňte kľúč vyrovnávacej pamäte WebP do svojho CDN (KeyCDN).
- Cloudways – stačí nainštalovať WebP Express a uložiť nastavenia pomocou .htacess. Pretože Cloudways používa hybridný prístup Apache + Nginx, funguje hneď po vybalení.
- SiteGound - Ak chcete pridať konfiguráciu Nginx, kontaktujte podporu. Použite podporovanú sieť CDN, ako je uvedené vyššie.
- LiteSpeed / OpenLiteSpeed / Apache server – stačí nainštalovať WebP Express a uložiť nastavenia pomocou „.htacess“. Použite tiež podporovanú sieť CDN, ako je uvedené vyššie.
- Vlastné VPS s Nginx (LEMP Stack) - nastavenie
nginx.confa použite podporovanú sieť CDN, ako je uvedené vyššie.
Metóda č. 3 - Použitie obrázkovej značky
Ak vám nefungujú obe vyššie uvedené metódy, môžete použiť značku obrázka. Nevyžaduje konfiguráciu servera (úprava nginx.conf) a podporuje všetkých poskytovateľov CDN.
Použitím tejto metódy sa zmení HTML pre doručovanie WebP. Nefunguje s obrázkami na pozadí, je nekompatibilný s niektorými témami, doplnkami na ukladanie do vyrovnávacej pamäte, doplnkami na pomalé načítanie atď.
Ak použijete túto metódu, všetky značky img sa skonvertujú takto:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Ak prehliadač podporuje WebP, doručí sa príslušný súbor, v opačnom prípade sa doručí bežný obrázok.
Prispôsobenie značky obrázka pre WebP vo WordPress
Najjednoduchší spôsob nastavenia značky obrázka je cez WebP Express.
Nastavte pracovný režim na „CDN friendly“ a povoľte „Alter HTML“.
Záver
Prial by som si, aby prišiel deň, keď všetky prehliadače podporujú WebP!
Ak môžete minúť niekoľko dolárov mesačne, potom najjednoduchším a najefektívnejším spôsobom je použiť CDN, ako je BunnyCDN, ktorý prevedie obrázky na WebP za behu. V opačnom prípade sa držte metódy č. 2, ktorú som spomenul vyššie.
