PageSpeed Insights näitab soovitust „Serve images in next-gen formats", kuid sinu saidi pildid on endiselt JPEG-vormingus. Kõigi piltide WebP-ks teisendamine on lihtne. Väljakutse on mujal: väike osa vanemate brauseritega külastajatest näeb katkiseid pilte, kui sa lihtsalt serveris vormingu välja vahetad.

Ülesanne ei ole teisendamine, vaid valikuline edastamine: WebP neile, kes seda toetavad, ja originaal kõigile teistele. WordPressis lahendatakse see kolmel erineval viisil, igaüks konkreetse tehnoloogilise ülesehituse ja eelarve jaoks.

💡 Kiirülevaade:

• Mõista, mis on WebP ja miks see on JPEG-st parem
• Õpi tundma kahte WebP serveerimise lähenemisviisi
• Vali oma tehnoloogilise ülesehituse ja eelarve jaoks üks kolmest meetodist
• Seadista plugin ja kontrolli tulemust Chrome DevToolsis

Mis on WebP ja miks sa seda vajad

WebP on Google'i pildivorming, mis pakub sama visuaalse kvaliteedi juures paremat tihendust kui JPEG ja PNG. Pilt, mis WebP-s kaalub 100 KB, kaalub JPEG-s 55-75 KB. Pole mingit maagiat: lihtsalt tõhusam tihendusalgoritm.

Vorming ei ole uus. Google avaldas spetsifikatsiooni 2010. aastal. Sellest ajast alates on WebP liikunud eksperimendist standardiks: kahjudega ja kadudeta tihendus, läbipaistvus, animatsioon. Sisuliselt ühendab see JPEG, PNG ja GIF-i võimalused ühes konteineris.

Kiire võrdlus traditsiooniliste vormingutega:

Suuruse erinevus on märgatav. Viiekümne pildiga lehekülje puhul vähendab WebP-le üleminek kogumahtu kordades. Mõju Core Web Vitalsile ja otsingutulemuste pingereale on otsene.

Miks sa ei saa WebP-d lihtsalt igal pool kasutusele võtta

Vastus taandub ühilduvusele. Täna toetab WebP-d üle 96% brauseritest: Chrome, Firefox, Safari (alates iOS 14-st), Edge. Kuid alles jääb väike protsent vanu seadmeid, mis seda vormingut ei mõista.

Kui sa lihtsalt asendad kõik JPEG-d serveris WebP-ga, näeb see väike protsent külastajatest katkiseid pilte. Ärisaidi või veebipoe jaoks on selline kasutajate kaotus vastuvõetamatu.

Seega taandub ülesanne mitte „piltide teisendamisele", vaid „WebP serveerimisele neile, kes seda toetavad, ja originaali serveerimisele kõigile teistele".

Kaks põhilist lähenemisviisi WebP serveerimiseks

Enne WordPressi meetodite juurde liikumist tasub mõista, kuidas brauser ja server vormingus kokku lepivad. On ainult kaks mehhanismi.

1. Lähenemisviis: silt

Brauserile pakutakse valikut WebP ja originaali vahel otse HTML-märgendis:

1
<picture>
2
  <source srcset="img.webp" type="image/webp">
3
  <source srcset="img.jpg" type="image/jpeg">
4
  <img src="img.jpg" alt="Image description">
5
</picture>

WebP-toega brauser võtab esimese <source> elemendi. Ülejäänud ignoreerivad WebP allikat ja laadivad JPEG <img> elemendist.

Pluss: töötab ilma serveri seadistamiseta ja mis tahes CDN-iga. Miinus: ei tööta CSS-i taustapiltidega ja muudab HTML-i struktuuri. Mõned vahemälu ja laisa laadimise pluginad komistavad <picture> elemendi otsa.

2. Lähenemisviis: varieeruv vastus

HTML-i jääb tavaline <img src="img.jpg">, kuid server tagastab sama URL-i korral erinevat sisu: WebP-faili WebP-toega brauseritele, originaali kõigile teistele.

Mehhanismi võti on HTTP-päis Accept. Brauser saadab selle iga päringuga, server või CDN otsustab, mida tagastada.

Pluss: töötab igal pool, sealhulgas CSS-i taustapiltidega. HTML ei muutu. Miinus: nõuab serveri seadistamist ja mitte iga CDN ei arvesta Accept päist vahemälu võtmes õigesti.

Võrdleme:

Nüüd vaatame, kuidas neid lähenemisviise WordPressis rakendatakse.

1. Meetod: CDN koos lennult WebP-ks teisendamisega

Lihtsaim tee. Ühendad CDN-i, mis optimeerib pilte lennult ja serveerib WebP-d toetavatele brauseritele. Teisendatud koopiaid sinu serveris ei salvestata, säästes kettaruumi.

Mitu toimivat varianti:

• BunnyCDN koos Bunny Optimizeriga tihendab ja teisendab pilte lennult, toetab WebP-d vahemäluvõtmes. Alates 0,01 $/GB.
• Cloudflare koos Polishiga (Pro tase, 20 $/kuus), automaatne tihendamine ja teisendamine WebP-sse.
• Cloudinary, spetsialiseerunud pilditöötlusteenus, WebP on vaikimisi toetatud.
• ShortPixel Adaptive Images, WordPressi plugin, mis kasutab bunny.net CDN-i. Teisendab ja edastab WebP-d automaatselt. Tasuta pakett: 500 MB liiklust kuus.
• WP Compress, hübriidteenus: pildi optimeerimine ja edastamine nende enda CDN-i kaudu.

Millal valida meetod 1: kui olete valmis CDN-i eest maksma ega taha serveri seadistamisega jännata. Ühendasite, lülitasite optimeerimise sisse ja kõik töötab.

Meetod 2: varieeruv vastus + CDN

Meetod neile, kes eelistavad ülesannet lahendada serveri tasemel ilma HTML-i märgendit muutmata.

Põhiolemus: seadistate serveri nii, et ühelt URL-ilt tagastatakse WebP või JPEG/PNG sõltuvalt Accept päisest. Kõik piltide URL-id koodis jäävad samaks.

Seadistamine WebP Expressi abil

Lihtsaim viis varieeruva vastuse rakendamiseks WordPressis on WebP Express plugin. Pluginil on üle 400 000 aktiivse installatsiooni, regulaarsed uuendused ja aktiivne autoripoolne tugi. See teeb kolme asja:

• Teisendab üleslaaditud pildid WebP-vormingusse.
• Kirjutab ümbersuunamise reeglid (.htaccess Apache/LiteSpeed jaoks või Nginx reeglid).
• Pildi pärimisel kontrollib Accept päist ja tagastab vajaliku vormingu.

Pärast installimist piisab, kui klõpsata „Save settings and force new.htaccess rules". Plugin seadistab konverteri ja reeglid ise.

Nginx serverite jaoks

WebP Express genereerib reeglid .htaccess jaoks (Apache/LiteSpeed/OpenLiteSpeed). Kui teil on Nginx, peate reeglid käsitsi konfiguratsiooni kirjutama:

1
## --- Nginx rules: try WebP first, fallback to converter
2
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
3
  add_header Vary Accept;
4
  expires 365d;
5
  if ($http_accept !~* "webp") {
6
    break;
7
  }
8
  try_files
9
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
10
    $uri.webp
11
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=$request_filename&wp-content=wp-content
12
    ;
13
}
14
 
15
## --- Route missing .webp requests to the realizer
16
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
17
    try_files
18
      $uri
19
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
20
      ;
21
}
22
## --- End WebP Express rules

Mida reeglid teevad: lisavad Vary: Accept päise (et CDN ei puhverdaks WebP-d kõigile), proovivad serveerida valmis .webp faili ja kui seda pole, saadavad päringu konverterisse.

Kriitiline: CDN-i valik meetodi 2 puhul

Viga, mis rikub kogu meetodi: CDN puhverdab WebP-d ja serveerib seda brauseritele, millel puudub vormingu tugi. See juhtub, kui CDN ei arvesta Accept päist puhvri võtmes.

Pakkujad, kes töötavad Vary: Accept-iga korrektselt:

Bunny CDN, varieeruva vastuse tugi lubatakse tsooni seadetes.

• KeyCDN, toetab samuti WebP-d puhvri võtme osana. Lubatakse tsooni seadetes, jaotises Cache.

• Google CDN, arvestab Vary: Accept-i vaikimisi.

Cloudflare'i tasuta paketis puudub Accept-i täielik arvestamine puhvri võtmes. Tulemus: WebP võib minna sinna, kus seda ei toetata. Kaks väljapääsu: minna üle Pro paketile (20 $/kuus) või kasutada CDN-i, mis oskab Vary: Accept-iga kohe algusest peale töötada (BunnyCDN või KeyCDN).

WebP Express + CDN kombinatsioon populaarsetel hostidel

Skeem on kõigil sama: installige WebP Express, seejärel toimige vastavalt serverikeskkonna asjaoludele:

• Kinsta / WP Engine, võtke ühendust toega. Insenerid lisavad Nginx konfiguratsiooni WebP Expressi jaoks ja lubavad õige WebP puhvri võtme nende CDN-is (KeyCDN Kinsta puhul).
• Cloudways, Apache+Nginx hübriid. WebP Express koos .htaccess salvestamisega on tavaliselt piisav. Reeglid võetakse automaatselt kasutusele.
• SiteGround, paluge toel lisada Nginx reeglid ja kasutage ühilduvat CDN-i.
• LiteSpeed / OpenLiteSpeed / Apache, ainult WebP Express ja .htaccess reeglid. Valige CDN, mis toetab Vary: Accept-i.
• Oma VPS Nginxiga (LEMP), lisage ülaltoodud Nginx reeglid käsitsi ja ühendage CDN, mis toetab Vary: Accept-i.

Millal valida meetod 2: kui te põhimõtteliselt ei soovi HTML-i märgendit muuta, teil on CSS-is taustapildid ja olete valmis serverit ühe korra seadistama.

Meetod 3: sildi abil

Varuvariant, kui kaks esimest ei sobi. Ei nõua serveri seadistamist, töötab iga CDN-iga. Plugin asendab standardsed <img> sildid <picture> konstruktsiooniga ja brauser valib vormingu ise.

Meetodi puudused:

• Ei tööta taustapiltidega.
• Võib konfliktida teemade ja puhverpluginatega, mis muudavad <img> väljundit.
• Muudab HTML-i struktuuri, mis mõnikord lõhub laisa laadimise pluginaid.

Seadistamine WebP Expressi abil

Seesama WebP Express võib töötada <picture> režiimis. Seadetes valige „CDN friendly" režiim ja lubage „Alter HTML" valik. Plugin mähib lennult kõik <img> sildid <picture> sisse koos WebP allikaga.

Millal valida meetod 3: kui puudub juurdepääs serveri konfiguratsioonile ja CDN ei toeta Vary: Accept-i. Näiteks odav hosting rangete piirangutega või tasuta Cloudflare.

Video: WebP WordPressis 10 minutiga

Kui eelistate pigem vaadata kui lugeda, siis siin on visuaalne õpetus WebP seadistamiseks WebP Expressi kaudu:

Video näitab WebP Expressi täielikku seadistamist alates installimisest kuni kontrollimiseni Chrome DevToolsis. Puudutatakse ka AVIF-iks teisendamist kui järgmist sammu pärast WebP-d.

⁉️🤔 Korduma kippuvad küsimused

Kas WebP tähendab alati failisuuruse vähenemist?

Mitte alati, aga enamikul juhtudel. Fotode ja ekraanipiltide puhul on sääst 25-50%, Google'i arendajate sõnul. Teksti või ühtlaste värvidega piltide puhul võib WebP olla isegi raskem kui PNG-8. Sisupiltide puhul annab WebP peaaegu alati võidu. Ikoonide ja lihtsa graafika jaoks on optimaalsem SVG või optimeeritud PNG. Pluginad nagu WebP Express teisendavad kõik, tulemus sõltub lähtevormingust.

Kas WebP-d saab WordPressis kasutada ilma pluginateta?

Alates WordPress 5.8-st jah. Tuumik aktsepteerib .webp faile meediateeki üleslaadimisel. Kuid puudub vanade piltide automaatne teisendamine ega vormingu asendamine brauseri jaoks. Kui laadite üles ainult uusi pilte WebP-s ja lepite sellega, et väikesele protsendile vanadest brauseritest ei pakuta varuvarianti, pole pluginad kohustuslikud. Olemasoleval saidil täielikuks juurutamiseks ei saa ilma pluginata: vajate partii teisendamist ja vormingu asendamise mehhanismi.

Kuidas kontrollida, et WebP-d serveeritakse õigesti?

Avage sait Chrome'is, vajutage F12, vahekaart Network, filtreerige Img järgi. Veerus Type peaks olema webp. Alternatiiv: otsige serveri vastusest päist X-WebP-Express (kui kasutate WebP Expressi) või content-type: image/webp. Chrome DevTools on kõige usaldusväärsem viis: filtreerige piltide järgi ja vaadake veergu Type. Kui seal on webp, siis kõik töötab.

Mida teha, kui CDN puhverdab WebP-d valesti?

Sümptom: mõned kasutajad näevad katkisi pilte, kuigi seadetes on kõik lubatud. Ravi: veenduge, et CDN arvestaks puhvri võtmes Accept ja Vary päiseid. BunnyCDN-i ja KeyCDN-i paneelides on selleks selged lülitid. Kui puhvri võtmes pole Accept päist, loob esimene päring Chrome'ist WebP koopia ja kõik järgnevad kasutajad, sealhulgas Safari ilma WebP toeta, saavad just selle koopia. Cloudflare'is pole tasuta lahendust, kas Pro või vahetage CDN-i.

WebP või AVIF, mida valida 2026. aastal?

AVIF annab veelgi parema tihenduse (20-30% väiksem kui WebP sama kvaliteedi juures), kuid brauseritugi on endiselt maas: umbes 92% versus 96% WebP puhul. 2026. aastal jääb WebP veebi de facto standardiks. AVIF jõuab järele, kuid erinevus brauseritoes on äriprojektide jaoks endiselt kriitiline. Praktiline strateegia: WebP praegu, AVIF siis, kui tugi ületab 95%.

Millist meetodit oma ülesande jaoks valida: lõplik jaotus

Meetodi valik ei sõltu sellest, milline on „üldiselt parem", vaid teie konkreetsest tehnoloogiavirnast ja valmisolekust kulutada aega või raha:

• Valmis maksma CDN-i eest ja mitte puutuma serverit, meetod 1 koos BunnyCDN-iga (alates $0.01/GB) või Cloudflare Pro-ga ($20/kuus). Seadistage viie minutiga ja unustage.
• Omate serveri ligipääsu ja soovite lahendada ühe korraga, meetod 2 koos WebP Expressi ja CDN-iga, mis toetab Vary: Accept päist. Töötab taustapiltidega, ei puuduta HTML-i.
• Puudub serveri ligipääs ja eelarve on piiratud, meetod 3 koos WebP Expressiga <picture> režiimis. Pole ideaalne, kuid parem kui üldse ilma WebP-ta.

Testige valitud meetodit staadiumikeskkonnas. Kontrollige vastuse päiseid ja veergu Type Chrome DevToolsis. Veenduge, et vanad brauserid saavad JPEG-d, mitte katkisi linke. Ja alles seejärel rakendage toodangus.

Proovige WebP Expressi, plugin katab mõlemad serverimeetodid kohe karbist välja ja on tasuta. Kirjutage kommentaaridesse, millise lähenemise valisite ja milliste komistuskividega kokku puutusite.