Cu toate acestea, livrarea imaginilor prin WebP nu este ușoară. Depinde de serverul web al serverului dvs., cdn-ul selectat, tema, pluginurile de cache etc.
Acest ghid vă va ajuta să livrați imagini WebP către WordPress în trei moduri.
Ce este WebP?
Nou format de imagine pentru web
de către Google
WebP este un format de imagine (cum ar fi png și jpg) dezvoltat de Google. Imaginile WebP (.webp) tind să fie mult mai mici, ceea ce accelerează site-urile web și utilizează mai puțină lățime de bandă.
În funcție de imagine, puteți reduce dimensiunea de la 25% la 70%.
JPEG, PNG, GIF etc. au avantajele și dezavantajele lor. Tabelul de mai jos vă va oferi o idee:
| JPG | GIF | PNG | SVG | |
| Vector | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Transparenţă | ❌ | ✅ | ✅ | ✅ |
| Animaţie | ❌ | ✅ | ✅ | ✅ |
| Pierdut | ✅ | ❌ | ❌ | ❌ |
WebP are aproape toate caracteristicile menționate mai sus! Atunci de ce nu putem folosi WebP peste tot?
De ce să nu folosești WebP peste tot?
După cum puteți vedea, doar 80% dintre dispozitive acceptă doar WebP. Nu numai browserele vechi, Safari/iOS Safari încă nu acceptă WebP.
De ce este atât de dificil să serviți WebP?
După cum ați observat, livrăm imagini în funcție de browser. Dacă browserul nu acceptă WebP, trebuie să le furnizăm imaginea originală (jpg/png/gif).
Există două moduri principale de a servi WebP:
Folosind eticheta de imagine
Putem folosiimagineetichetă pentru a spune browserului că avem un format WebP. Dacă browserul îl acceptă, imaginea obișnuită/de rezervă va fi încărcată.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Prin răspuns diferit
Într-un răspuns diferit, ca de obicei, aveți un fișier. Exact:
<img src="img.jpg" />O adresă URL a unei imagini acceptă livrarea fișierelor jpg și webp. Asta face serverul.
Chiar dacă este o extensie de fișier .jpg, dacă browserul acceptă WebP, atunci răspunsul va fi WebP. Denumit și „răspuns divers”.
Etichetă de imagine vs răspuns divers
Fiecare are argumentele sale pro și contra. Iată un tabel de comparație:
| etichetă de imagine | Răspuns divers | |
|---|---|---|
| Funcționează cu imagini de fundal | ❌ | ✅ |
| CDN prietenos | ✅ | ✅ (doar câteva) |
| Serverul trebuie configurat | ❌ | ✅ (nginx) |
| Funcționează cu încărcare leneșă | ✅ | ✅ |
Cum să serviți imagini în WebP în WordPress?
Metoda #1 - Utilizați CDN numai cu conversia Fly WebP
Aceasta este probabil cea mai simplă soluție. Unii furnizori CDN acceptă în prezent conversia directă a imaginii în WebP împreună cu optimizarea imaginii.
Iată câteva:
- BunnyCDN
- Cloudflare cu poloneză (plan Pro)
- Cloudinary
- ShortPixel Adaptive Images (folosește StackPath CDN)
- WP Compres
De asemenea, puteți economisi spațiu pe disc folosind această metodă, deoarece nu trebuie să stocați atât imaginile WebP obișnuite, cât și cele convertite.
BunnyCDN
BunnyCDN vine cu Bunny Optimizer, care poate comprima imaginile și le poate converti în WebP din mers.
Metoda #2 - Utilizarea răspunsului divers + CDN
După cum este descris mai sus, un „răspuns variat” va avea o singură adresă URL de imagine care poate servi atât imagini WebP, cât și imagini non-webp, în funcție de browserul solicitat.
De asemenea, trebuie să alegem CDN-ul potrivit care acceptă anteturile de solicitare WebP ca cheie cache. În caz contrar, odată ce imaginea WebP este stocată în cache pe server, aceasta va fi livrată către browsere care nu acceptă WebP.
Personalizarea răspunsului variat în WordPress
Cel mai simplu mod de a configura un răspuns bogat pentru WebP în WordPress este să utilizați pluginul WebP Express. Doar instalați pluginul și faceți clic pe „Salvați setările și forțați regulile .htaccess noi”.
WebP Express va configura convertorul WebP și va suprascrie regulile astfel încât atunci când primește o solicitare, va converti imaginile în WebP din mers, iar dacă browserul nu acceptă WebP, imaginea implicită va fi livrată.
Dacă sunteți în Nginx
WebP Express adaugă regulile necesare de rescriere „.htaccess”, dar funcționează numai pe un server Apache, LiteSpeed sau OpenLiteSpeed. Dacă utilizați Nginx, trebuie să editaținginx.configsi adauga urmatorul cod:
# Reguli WebP Express# --------------------locație ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Variază Accept;expires 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;}# Direcționați solicitările pentru web-uri inexistente către locația convertorului ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (Regulile WebP Express se termină aici)Codul de mai sus adaugă anteturile de răspuns necesare (de asemenea, gestionarea cache-ului variază) și încearcă să livreze WebP dacă există, altfel redirecționează-l către convertor (pe baza suportului pentru browser)
Furnizorii CDN care sprijină Diverse Response
Dacă furnizorul dvs. CDN nu acceptă WebP ca cheie de cache, fișierele WebP vor fi livrate către browsere care nu acceptă WebP. În mod similar, există șansa ca imaginile non-webp să fie livrate către browsere acceptate.
BunnyCDN , KeyCDN , Google CDN și mulți alți furnizori CDN acceptă WebP ca cheie cache. Asigurați-vă că le activați în setări.
VBunnyCDN :
VKeyCDN :
Folosiți planul gratuit Cloudflare?
Din păcate, planul gratuit al Cloudflare nu acceptă WebP ca cheie cache. Fie utilizați un CDN precum BunnCDN, fie faceți upgrade la planul lor profesional.
Configurați un răspuns divers + CDN cu furnizori de găzduire populari
Asigurați-vă că este instalat WebP Express.
- Kinsta sau WP Engine - contactați echipa de asistență pentru a adăuga configurația Nginx de mai sus și pentru a include cheia de cache WebP în CDN-ul lor (KeyCDN).
- Cloudways - instalați doar WebP Express și salvați setările folosind .htacess. Deoarece Cloudways folosește o abordare hibridă Apache + Nginx, funcționează imediat.
- SiteGound - Contactați asistența pentru a adăuga configurația Nginx. Utilizați un CDN acceptat ca mai sus.
- Server LiteSpeed / OpenLiteSpeed / Apache - trebuie doar să instalați WebP Express și să salvați setările cu „.htacess”. Utilizați, de asemenea, un CDN acceptat ca mai sus.
- VPS personalizat cu Nginx (LEMP Stack) - Configurare
nginx.confși utilizați un CDN acceptat ca mai sus.
Metoda #3 - Utilizarea unei etichete de imagine
Dacă ambele metode de mai sus nu funcționează pentru dvs., puteți utiliza eticheta de imagine. Nu necesită configurarea serverului (editarea nginx.conf) și acceptă toți furnizorii CDN.
Utilizarea acestei metode va schimba codul HTML pentru livrarea WebP. Nu va funcționa cu imagini de fundal, este incompatibil cu unele teme, pluginuri de cache, pluginuri de încărcare leneșă etc.
Dacă utilizați această metodă, toate etichetele img vor fi convertite astfel:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Dacă browserul acceptă WebP, se livrează fișierul corespunzător; în caz contrar, se livrează o imagine obișnuită.
Personalizarea unei etichete de imagine pentru WebP în WordPress
Cel mai simplu mod de a configura o etichetă de imagine este prin WebP Express.
Setați modul de lucru la „CDN friendly” și activați „Alter HTML”.
Concluzie
Mi-aș dori să vină ziua când toate browserele acceptă WebP!
Dacă poți cheltui câțiva dolari pe lună, atunci cel mai simplu și mai eficient mod este să folosești un CDN precum BunnyCDN, care va converti imaginile în WebP din mers. În caz contrar, rămâneți la metoda #2 pe care am menționat-o mai sus.
