Tomēr attēlu piegāde, izmantojot WebP, nav vienkārša. Tas ir atkarīgs no jūsu servera tīmekļa servera, atlasītā cdn, motīva, kešatmiņas spraudņiem utt.
Šī rokasgrāmata palīdzēs jums piegādāt WebP attēlus uz WordPress trīs veidos.
Kas ir WebP?
Jauns attēla formāts tīmeklim
no Google
WebP ir attēla formāts (piemēram, png un jpg), ko izstrādājis Google. WebP (.webp) attēli mēdz būt daudz mazāki, kas paātrina vietnes un izmanto mazāku joslas platumu.
Atkarībā no attēla izmēru var samazināt no 25% līdz 70%.
JPEG, PNG, GIF utt. ir savi plusi un mīnusi. Zemāk esošā tabula sniegs jums priekšstatu:
| JPG | GIF | PNG | SVG | |
| Vektors | ❌ | ❌ | ❌ | ✅ |
| Rastrs | ✅ | ✅ | ✅ | ❌ |
| Pārredzamība | ❌ | ✅ | ✅ | ✅ |
| Animācija | ❌ | ✅ | ✅ | ✅ |
| Pazudis | ✅ | ❌ | ❌ | ❌ |
WebP ir gandrīz visas iepriekš minētās funkcijas! Tad kāpēc mēs nevaram izmantot WebP visur?
Kāpēc neizmantot WebP visur?
Kā redzat, tikai 80% ierīču atbalsta tikai WebP. Ne tikai mantotās pārlūkprogrammas, bet arī Safari/iOS Safari joprojām neatbalsta WebP.
Kāpēc ir tik grūti apkalpot WebP?
Kā jau pamanījāt, mēs piegādājam attēlus atbilstoši pārlūkprogrammai. Ja pārlūkprogramma neatbalsta WebP, mums ir jānodrošina oriģinālais attēls (jpg/png/gif).
Ir divi galvenie WebP apkalpošanas veidi:
Izmantojot attēla tagu
Varam izmantotbildetagu, lai paziņotu pārlūkprogrammai, ka mums ir WebP formāts. Ja pārlūkprogramma to atbalsta, tiks ielādēts parastais/atkāpšanās attēls.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Ar atšķirīgu atbildi
Citā atbildē, kā parasti, jums ir viens fails. Tieši tā:
<img src="img.jpg" />Viens attēla URL atbalsta jpg un webp failu piegādi. To dara serveris.
Pat ja tas ir .jpg faila paplašinājums, ja pārlūkprogramma atbalsta WebP, atbilde būs WebP. To sauc arī par "daudzveidīgu reakciju".
Attēla tags pret daudzveidīgu atbildi
Katram ir savi plusi un mīnusi. Šeit ir salīdzināšanas tabula:
| attēla atzīme | Daudzveidīga reakcija | |
|---|---|---|
| Darbojas ar fona attēliem | ❌ | ✅ |
| CDN draudzīgs | ✅ | ✅ (tikai daži) |
| Serveris ir jākonfigurē | ❌ | ✅ (nginx) |
| Strādā ar slinku ielādi | ✅ | ✅ |
Kā pasniegt attēlus WebP programmā WordPress?
1. metode — izmantojiet CDN tikai ar fly WebP konvertēšanu
Tas, iespējams, ir vienkāršākais risinājums. Daži CDN pakalpojumu sniedzēji pašlaik atbalsta tūlītēju attēla konvertēšanu uz WebP, kā arī attēla optimizāciju.
Šeit ir daži:
- BunnyCDN
- Cloudflare ar poļu valodu (Pro plāns)
- Mākoņains
- ShortPixel adaptīvie attēli (izmanto StackPath CDN)
- WP saspiest
Varat arī ietaupīt vietu diskā, izmantojot šo metodi, jo jums nav jāsaglabā gan parastie, gan pārveidotie WebP attēli.
BunnyCDN
BunnyCDN ir aprīkots ar Bunny Optimizer, kas var saspiest attēlus un lidojuma laikā pārvērst tos par WebP.
2. metode — daudzveidīgas atbildes un CDN izmantošana
Kā aprakstīts iepriekš, "dažādu atbildei" būs viens attēla URL, kas atkarībā no pieprasītās pārlūkprogrammas var apkalpot gan WebP, gan ne-web attēlus.
Mums ir arī jāizvēlas pareizais CDN, kas atbalsta WebP pieprasījumu galvenes kā kešatmiņas atslēgu. Pretējā gadījumā, tiklīdz WebP attēls tiek saglabāts servera kešatmiņā, tas tiks piegādāts pārlūkprogrammām, kas neatbalsta WebP.
Dažādas atbildes pielāgošana pakalpojumā WordPress
Vienkāršākais veids, kā programmā WordPress iestatīt bagātīgu WebP atbildi, ir izmantot WebP Express spraudni. Vienkārši instalējiet spraudni un noklikšķiniet uz "Saglabāt iestatījumus un piespiest jaunus .htaccess noteikumus".
WebP Express konfigurēs WebP pārveidotāju un pārrakstīs noteikumus, lai, saņemot pieprasījumu, tie lidojumā pārvērstu attēlus par WebP, un, ja pārlūkprogramma neatbalsta WebP, tiks piegādāts noklusējuma attēls.
Ja atrodaties Nginx
WebP Express pievieno nepieciešamos “.htaccess” pārrakstīšanas noteikumus, taču darbojas tikai Apache, LiteSpeed vai OpenLiteSpeed serverī. Ja izmantojat Nginx, jums tas ir jārediģēnginx.configun pievienojiet šādu kodu:
# WebP Express noteikumi# ---------------------atrašanās vieta ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Mainīt Akceptēt;beidzas 365. d.;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;}# Neesošu tīmekļa vietņu pieprasījumi maršrutēt uz pārveidotāja atrašanās vietu ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ---------------- (WebP Express noteikumi beidzas šeit)Iepriekš minētais kods pievieno vajadzīgās atbildes galvenes (arī kešatmiņas pārvaldība atšķiras) un mēģina piegādāt WebP, ja tāda pastāv, pretējā gadījumā novirzīt to uz pārveidotāju (pamatojoties uz pārlūkprogrammas atbalstu).
CDN pakalpojumu sniedzēji, kas atbalsta Diverse Response
Ja jūsu CDN nodrošinātājs neatbalsta WebP kā kešatmiņas atslēgu, WebP faili tiks piegādāti pārlūkprogrammām, kas neatbalsta WebP. Tāpat pastāv iespēja, ka attēli, kas nav Webp, tiks piegādāti atbalstītajās pārlūkprogrammās.
BunnyCDN , KeyCDN , Google CDN un daudzi citi CDN nodrošinātāji atbalsta WebP kā kešatmiņas atslēgu. Noteikti iespējojiet tos iestatījumos.
VBunnyCDN :
VKeyCDN :
Vai izmantojat Cloudflare bezmaksas plānu?
Diemžēl Cloudflare bezmaksas plāns neatbalsta WebP kā kešatmiņas atslēgu. Izmantojiet CDN, piemēram, BunnCDN, vai jauniniet uz viņu profesionālo plānu.
Iestatiet daudzveidīgu reakciju + CDN ar populāriem mitināšanas pakalpojumu sniedzējiem
Pārliecinieties, vai WebP Express ir instalēts.
- Kinsta vai WP Engine — sazinieties ar viņu atbalsta komandu, lai pievienotu iepriekš minēto Nginx konfigurāciju un iekļautu WebP kešatmiņas atslēgu savā CDN (KeyCDN).
- Cloudways — vienkārši instalējiet WebP Express un saglabājiet iestatījumus, izmantojot .htacess. Tā kā pakalpojumā Cloudways tiek izmantota hibrīda Apache + Nginx pieeja, tā darbojas jau no kastes.
- SiteGound — sazinieties ar atbalsta dienestu, lai pievienotu Nginx konfigurāciju. Izmantojiet atbalstītu CDN, kā norādīts iepriekš.
- LiteSpeed / OpenLiteSpeed / Apache serveris - vienkārši instalējiet WebP Express un saglabājiet iestatījumus ar '.htacess'. Izmantojiet arī atbalstītu CDN, kā norādīts iepriekš.
- Pielāgots VPS ar Nginx (LEMP Stack) — iestatīšana
nginx.confun izmantojiet atbalstītu CDN, kā norādīts iepriekš.
3. metode — attēla atzīmes izmantošana
Ja abas iepriekš minētās metodes jums neder, varat izmantot attēla tagu. Tam nav nepieciešama servera konfigurācija (rediģējot nginx.conf), un tas atbalsta visus CDN nodrošinātājus.
Izmantojot šo metodi, tiks mainīts WebP piegādes HTML. Tas nedarbosies ar fona attēliem, nav saderīgs ar dažiem motīviem, kešatmiņas spraudņiem, slinkas ielādes spraudņiem utt.
Ja izmantojat šo metodi, visi img tagi tiks pārveidoti šādi:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Ja pārlūkprogramma atbalsta WebP, tiek piegādāts atbilstošais fails; pretējā gadījumā tiek piegādāts parasts attēls.
WebP attēla taga pielāgošana programmā WordPress
Vienkāršākais veids, kā iestatīt attēla tagu, ir WebP Express.
Iestatiet darbības režīmu uz “CDN draudzīgs” un iespējojiet “Alter HTML”.
Secinājums
Es vēlos, lai pienāktu diena, kad visas pārlūkprogrammas atbalstīs WebP!
Ja varat iztērēt dažus dolārus mēnesī, tad vienkāršākais un efektīvākais veids ir izmantot CDN, piemēram, BunnyCDN, kas lidojuma laikā pārveidos attēlus par WebP. Pretējā gadījumā pieturieties pie 2. metodes, ko es minēju iepriekš.
