Kuvien toimittaminen WebP:n kautta ei kuitenkaan ole helppoa. Se riippuu palvelimesi verkkopalvelimesta, valitusta cdn:stä, teemasta, välimuistilaajennuksista jne.
Tämä opas auttaa sinua toimittamaan WebP-kuvia WordPressiin kolmella tavalla.
Mikä on WebP?
Uusi kuvamuoto verkkoon
Googlelta
WebP on Googlen kehittämä kuvamuoto (kuten png ja jpg). WebP (.webp) -kuvat ovat yleensä paljon pienempiä, mikä nopeuttaa verkkosivustoja ja käyttää vähemmän kaistanleveyttä.
Kuvasta riippuen voit pienentää kokoa 25 %:sta 70 %:iin.
JPEG:llä, PNG:llä, GIF:llä jne. on hyvät ja huonot puolensa. Alla oleva taulukko antaa sinulle idean:
| JPG | GIF | PNG | SVG | |
| Vektori | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Läpinäkyvyys | ❌ | ✅ | ✅ | ✅ |
| Animaatio | ❌ | ✅ | ✅ | ✅ |
| Kadonnut | ✅ | ❌ | ❌ | ❌ |
WebP:ssä on melkein kaikki yllä mainitut ominaisuudet! Miksi emme sitten voi käyttää WebP:tä kaikkialla?
Mikset käytä WebP:tä kaikkialla?
Kuten näet, vain 80 % laitteista tukee vain WebP:tä. Vanhojen selaimien lisäksi Safari/iOS Safari ei silti tue WebP:tä.
Miksi WebP:n palveleminen on niin vaikeaa?
Kuten huomasit, toimitamme kuvat selaimen mukaan. Jos selain ei tue WebP:tä, meidän on toimitettava heille alkuperäinen kuva (jpg/png/gif).
On kaksi päätapaa palvella WebP:tä:
Kuvatunnisteen käyttäminen
Voimme käyttääkuva-tunniste kertoo selaimelle, että meillä on WebP-muoto. Jos selain tukee sitä, tavallinen/varakuva ladataan.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Eri vastauksella
Toisessa vastauksessa sinulla on tavalliseen tapaan yksi tiedosto. Tarkalleen:
<img src="img.jpg" />Yksi kuvan URL-osoite tukee jpg- ja webp-tiedostojen toimittamista. Tätä palvelin tekee.
Vaikka se on .jpg-tiedostopääte, jos selain tukee WebP:tä, vastaus on WebP. Kutsutaan myös "monipuoliseksi vastaukseksi".
Kuvatunniste vs. Monipuolinen vastaus
Jokaisella on hyvät ja huonot puolensa. Tässä vertailutaulukko:
| kuvatunniste | Monipuolinen vastaus | |
|---|---|---|
| Toimii taustakuvien kanssa | ❌ | ✅ |
| CDN-ystävällinen | ✅ | ✅ (vain muutama) |
| Palvelin on määritettävä | ❌ | ✅ (nginx) |
| Toimii laiskalla latauksella | ✅ | ✅ |
Kuinka tarjota kuvia WebP:ssä WordPressissä?
Tapa 1 - Käytä CDN:ää vain fly WebP-muunnoksen kanssa
Tämä on luultavasti yksinkertaisin ratkaisu. Jotkut CDN-palveluntarjoajat tukevat tällä hetkellä lennon aikana tapahtuvaa kuvan muuntamista WebP:ksi sekä kuvan optimointia.
Tässä muutamia:
- BunnyCDN
- Cloudflare Puolan kanssa (Pro Plan)
- Pilvistä
- ShortPixel Adaptive Images (käyttää StackPath CDN:ää)
- WP Pakkaa
Voit myös säästää levytilaa tällä menetelmällä, koska sinun ei tarvitse tallentaa sekä tavallisia että muunnettuja WebP-kuvia.
BunnyCDN
BunnyCDN:n mukana tulee Bunny Optimizer, joka voi pakata kuvat ja muuntaa ne WebP:ksi lennossa.
Menetelmä 2 - Monipuolisen vastauksen + CDN:n käyttö
Kuten yllä on kuvattu, "eri vastauksella" on yksi kuvan URL-osoite, joka voi palvella sekä WebP-kuvia että ei-webp-kuvia pyydetystä selaimesta riippuen.
Meidän on myös valittava oikea CDN, joka tukee WebP-pyyntöotsikoita välimuistiavaimeksi. Muussa tapauksessa, kun WebP-kuva on välimuistissa palvelimella, se toimitetaan selaimille, jotka eivät tue WebP:tä.
Monipuolisen vastauksen mukauttaminen WordPressissä
Helpoin tapa määrittää monipuolinen vastaus WebP:lle WordPressissä on käyttää WebP Express -laajennusta. Asenna vain laajennus ja napsauta "Tallenna asetukset ja pakota uudet .htaccess-säännöt".
WebP Express määrittää WebP-muuntimen ja korvaa säännöt niin, että kun se vastaanottaa pyynnön, se muuntaa kuvat lennossa WebP:ksi ja jos selain ei tue WebP:tä, toimitetaan oletuskuva.
Jos olet Nginxissä
WebP Express lisää tarvittavat .htaccess-uudelleenkirjoitussäännöt, mutta toimii vain Apache-, LiteSpeed- tai OpenLiteSpeed-palvelimella. Jos käytät Nginxiä, sinun on muokattavanginx.configja lisää seuraava koodi:
# WebP Express -säännöt# --------------------sijainti ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vaihtelee Hyväksy;vanhenee 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;}# Reititä pyynnöt ei-olemassa oleville webpsille muuntimen sijaintiin ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (WebP Expressin säännöt päättyvät tähän)Yllä oleva koodi lisää vaaditut vastausotsikot (myös välimuistin hallinta vaihtelee) ja yrittää toimittaa WebP:n, jos se on olemassa, muussa tapauksessa ohjaa se muuntimeen (selaintuen perusteella)
CDN-palveluntarjoajat, jotka tukevat Diverse Responsea
Jos CDN-palveluntarjoajasi ei tue WebP:tä välimuistiavaimena, WebP-tiedostot toimitetaan selaimille, jotka eivät tue WebP:tä. Samoin on mahdollista, että muita kuin Web-kuvia toimitetaan tuetuille selaimille.
BunnyCDN , KeyCDN , Google CDN ja monet muut CDN-palveluntarjoajat tukevat WebP:tä välimuistiavaimena. Varmista, että otat ne käyttöön asetuksista.
VBunnyCDN :
VKeyCDN :
Käytätkö Cloudflaren ilmaista sopimusta?
Valitettavasti Cloudflaren ilmainen suunnitelma ei tue WebP:tä välimuistiavaimena. Käytä joko CDN:ää, kuten BunnCDN:ää, tai päivitä heidän ammattisuunnitelmaansa.
Luo monipuolinen vastaus + CDN suosittujen hosting-palvelujen tarjoajien kanssa
Varmista, että WebP Express on asennettu.
- Kinsta tai WP Engine – ota yhteyttä heidän tukitiimiinsä lisätäksesi yllä olevat Nginx-kokoonpanot ja sisällyttääksesi WebP-välimuistiavain heidän CDN:ään (KeyCDN).
- Cloudways - asenna vain WebP Express ja tallenna asetukset .htacess-tiedoston avulla. Koska Cloudways käyttää hybridi Apache + Nginx -lähestymistapaa, se toimii heti.
- SiteGound – Ota yhteyttä tukeen lisätäksesi Nginx-kokoonpanon. Käytä tuettua CDN:ää kuten yllä.
- LiteSpeed / OpenLiteSpeed / Apache-palvelin - asenna vain WebP Express ja tallenna asetukset .htacess-tiedostolla. Käytä myös tuettua CDN:ää kuten yllä.
- Mukautettu VPS Nginxillä (LEMP-pino) - Ota käyttöön
nginx.confja käytä tuettua CDN:ää kuten yllä.
Menetelmä 3 - Kuvatunnisteen käyttäminen
Jos kumpikaan yllä olevista menetelmistä ei toimi sinulle, voit käyttää kuvatunnistetta. Se ei vaadi palvelimen määritystä (muokkaa nginx.conf-tiedostoa) ja tukee kaikkia CDN-palveluntarjoajia.
Tämän menetelmän käyttäminen muuttaa WebP-toimituksen HTML-koodia. Se ei toimi taustakuvien kanssa, ei ole yhteensopiva joidenkin teemojen, välimuistilaajennusten, laiskalatauslaajennusten jne. kanssa.
Jos käytät tätä menetelmää, kaikki img-tunnisteet muunnetaan seuraavasti:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Jos selain tukee WebP:tä, vastaava tiedosto toimitetaan, muuten toimitetaan normaali kuva.
WebP:n kuvatunnisteen mukauttaminen WordPressissä
Helpoin tapa määrittää kuvatunniste on WebP Expressin kautta.
Aseta toimintatilaksi "CDN-ystävällinen" ja ota käyttöön "Alter HTML".
Johtopäätös
Toivon, että päivä tulisi, jolloin kaikki selaimet tukevat WebP:tä!
Jos voit käyttää muutaman dollarin kuukaudessa, helpoin ja tehokkain tapa on käyttää CDN:ää, kuten BunnyCDN, joka muuntaa kuvat WebP:ksi lennossa. Muussa tapauksessa pysy yllä mainitsemassani menetelmässä #2.
