Doručování obrázků přes WebP však není snadné. Záleží na webovém serveru vašeho serveru, vybraném cdn, motivu, zásuvných modulech pro ukládání do mezipaměti atd.
Tato příručka vám pomůže doručit obrázky WebP na WordPress třemi způsoby.
Co je WebP?
Nový formát obrázků pro web
od společnosti Google
WebP je obrázkový formát (jako png a jpg) vyvinutý společností Google. Obrázky WebP (.webp) bývají mnohem menší, což zrychluje webové stránky a využívá menší šířku pásma.
V závislosti na obrázku můžete zmenšit velikost od 25 % do 70 %.
JPEG, PNG, GIF atd. mají svá pro a proti. Níže uvedená tabulka vám poskytne představu:
| JPG | GIF | PNG | SVG | |
| Vektor | ❌ | ❌ | ❌ | ✅ |
| Rastrové | ✅ | ✅ | ✅ | ❌ |
| Průhlednost | ❌ | ✅ | ✅ | ✅ |
| Animace | ❌ | ✅ | ✅ | ✅ |
| Ztracený | ✅ | ❌ | ❌ | ❌ |
WebP má téměř všechny výše uvedené funkce! Proč tedy nemůžeme používat WebP všude?
Proč nepoužívat WebP všude?
Jak vidíte, pouze 80 % zařízení podporuje pouze WebP. Nejen starší prohlížeče, Safari/iOS Safari stále nepodporuje WebP.
Proč je tak obtížné poskytovat WebP?
Jak jste si všimli, obrázky dodáváme podle prohlížeče. Pokud prohlížeč nepodporuje WebP, musíme mu poskytnout originální obrázek (jpg/png/gif).
WebP lze obsluhovat dvěma hlavními způsoby:
Pomocí značky obrázku
Můžeme použítobrázektag, který prohlížeči sdělí, že máme formát WebP. Pokud to prohlížeč podporuje, načte se běžný/záložní obrázek.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Podle jiné odpovědi
V jiné odpovědi, jako obvykle, máte jeden soubor. Přesně tak:
<img src="img.jpg" />Jedna adresa URL obrázku podporuje doručování souborů jpg a webp. To je to, co server dělá.
I když se jedná o příponu souboru .jpg, pokud prohlížeč podporuje WebP, odpověď bude WebP. Nazývá se také „různá reakce“.
Image Tag vs různorodá odezva
Každá má své pro a proti. Zde je srovnávací tabulka:
| image tag | Různá odezva | |
|---|---|---|
| Pracuje s obrázky na pozadí | ❌ | ✅ |
| Přátelský k CDN | ✅ | ✅ (jen pár) |
| Server je potřeba nakonfigurovat | ❌ | ✅ (nginx) |
| Pracuje s líným načítáním | ✅ | ✅ |
Jak obsluhovat obrázky ve WebP ve WordPressu?
Metoda č. 1 – Použijte CDN pouze s převodem fly WebP
To je asi nejjednodušší řešení. Někteří poskytovatelé CDN v současné době podporují konverzi obrazu na WebP za běhu spolu s optimalizací obrazu.
Zde je několik:
- BunnyCDN
- Cloudflare s polštinou (Pro Plan)
- Oblačno
- ShortPixel Adaptive Images (používá StackPath CDN)
- WP Compress
Pomocí této metody můžete také ušetřit místo na disku, protože nemusíte ukládat běžné i převedené obrázky WebP.
BunnyCDN
BunnyCDN přichází s Bunny Optimizer, který dokáže komprimovat obrázky a převádět je na WebP za běhu.
Metoda #2 - Použití Diverse Response + CDN
Jak je popsáno výše, „odpověď odrůdy“ bude mít jednu adresu URL obrázku, která může obsluhovat obrázky WebP i obrázky jiné, v závislosti na požadovaném prohlížeči.
Musíme také vybrat správné CDN, které podporuje záhlaví požadavků WebP jako klíč mezipaměti. V opačném případě, jakmile je obraz WebP uložen do mezipaměti na serveru, bude doručen do prohlížečů, které nepodporují WebP.
Přizpůsobení různé odezvy ve WordPressu
Nejjednodušší způsob, jak nastavit bohatou odezvu pro WebP ve WordPressu, je použít plugin WebP Express. Stačí nainstalovat plugin a kliknout na „Uložit nastavení a vynutit nová pravidla .htaccess“.
WebP Express nakonfiguruje převodník WebP a přepíše pravidla tak, že když obdrží požadavek, převede obrázky na WebP za běhu, a pokud prohlížeč nepodporuje WebP, bude doručen výchozí obrázek.
Pokud jste v Nginx
WebP Express přidává nezbytná pravidla pro přepis '.htaccess', ale funguje pouze na serveru Apache, LiteSpeed nebo OpenLiteSpeed . Pokud používáte Nginx, musíte upravitnginx.configa přidejte následující kód:
# Pravidla WebP Express# --------------------umístění ~* ^/?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;}# Směrování požadavků pro neexistující webps do umístění převodníku ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (pravidla WebP Express zde končí)Výše uvedený kód přidá požadované hlavičky odpovědí (správa mezipaměti se také liší) a pokusí se doručit WebP, pokud existuje, jinak jej přesměruje na převodník (na základě podpory prohlížeče)
Poskytovatelé CDN podporující Diverse Response
Pokud váš poskytovatel CDN nepodporuje WebP jako klíč mezipaměti, budou soubory WebP doručeny do prohlížečů, které WebP nepodporují. Podobně existuje šance, že obrázky, které nepocházejí z webu, budou doručeny do podporovaných prohlížečů.
BunnyCDN , KeyCDN , Google CDN a mnoho dalších poskytovatelů CDN podporuje WebP jako klíč mezipaměti. Ujistěte se, že je povolíte v nastavení.
PROTIBunnyCDN :
PROTIKeyCDN :
Používáte bezplatný tarif Cloudflare?
Bohužel bezplatný plán Cloudflare nepodporuje WebP jako klíč mezipaměti. Buď použijte CDN jako BunnCDN, nebo upgradujte na svůj profesionální plán.
Nastavte různorodou odpověď + CDN u oblíbených poskytovatelů hostingu
Ujistěte se, že je nainstalován WebP Express.
- Kinsta nebo WP Engine – kontaktujte jejich tým podpory, aby přidal výše uvedenou konfiguraci Nginx a zahrnul klíč mezipaměti WebP do jejich CDN (KeyCDN).
- Cloudways – stačí nainstalovat WebP Express a uložit nastavení pomocí .htacess. Protože Cloudways používá hybridní přístup Apache + Nginx, funguje hned po vybalení.
- SiteGound – Chcete-li přidat konfiguraci Nginx, kontaktujte podporu. Použijte podporovanou síť CDN, jak je uvedeno výše.
- LiteSpeed / OpenLiteSpeed / Apache server – stačí nainstalovat WebP Express a uložit nastavení pomocí '.htacess'. Použijte také podporované CDN, jak je uvedeno výše.
- Vlastní VPS s Nginx (LEMP Stack) – nastavení
nginx.confa použijte podporovanou síť CDN, jak je uvedeno výše.
Metoda č. 3 – Použití obrázkové značky
Pokud vám obě výše uvedené metody nevyhovují, můžete použít značku obrázku. Nevyžaduje konfiguraci serveru (editace nginx.conf) a podporuje všechny poskytovatele CDN.
Použití této metody změní HTML pro doručování WebP. Nefunguje s obrázky na pozadí, je nekompatibilní s některými motivy, pluginy pro ukládání do mezipaměti, pluginy pro líné načítání atd.
Pokud použijete tuto metodu, všechny značky img budou převedeny takto:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Pokud prohlížeč podporuje WebP, je doručen odpovídající soubor, jinak je doručen normální obrázek.
Přizpůsobení značky obrázku pro WebP ve WordPressu
Nejjednodušší způsob, jak nastavit značku obrázku, je přes WebP Express.
Nastavte provozní režim na „CDN friendly“ a povolte „Alter HTML“.
Závěr
Kéž by přišel den, kdy všechny prohlížeče budou podporovat WebP!
Pokud můžete utratit pár dolarů měsíčně, pak nejjednodušší a nejúčinnější způsob je použít CDN jako BunnyCDN, který převede obrázky na WebP za běhu. Jinak se držte metody č. 2, kterou jsem zmínil výše.
