PageSpeed Insights näyttää suosituksen "Serve images in next-gen formats", mutta sivustosi kuvat ovat yhä JPEG-muodossa. Kaiken muuntaminen WebP:ksi on suoraviivaista. Haaste on toinen: pieni osa kävijöistä, joilla on vanhempi selain, näkee rikkinäisiä kuvia, jos vaihdat formaatin suoraan palvelimella.

Tehtävä ei siis ole muuntaminen, vaan valikoiva tarjoilu: WebP:tä niille, jotka sitä tukevat, ja alkuperäistä kaikille muille. WordPressissä tämä ratkaistaan kolmella eri tavalla, kukin tiettyä teknologiapinoa ja budjettia varten.

💡 Nopea yleiskatsaus:

• Ymmärrä, mitä WebP on ja miksi se on parempi kuin JPEG
• Opi kaksi tapaa tarjoilla WebP:tä
• Valitse yksi kolmesta menetelmästä pinoosi ja budjettiisi sopien
• Määritä lisäosa ja varmista tulos Chrome DevToolsissa

Mitä WebP on ja miksi tarvitset sitä

WebP on Googlen kuvamuoto, joka pakkaa paremmin kuin JPEG ja PNG samalla visuaalisella laadulla. Kuva, joka painaa 100 kt WebP:nä, painaa 55-75 kt. Ei taikuutta: vain tehokkaampi pakkausalgoritmi.

Formaatti ei ole uusi. Google julkaisi spesifikaation vuonna 2010. Sen jälkeen WebP on edennyt kokeilusta standardiksi: häviöllinen ja häviötön pakkaus, läpinäkyvyys, animaatio. Käytännössä se yhdistää JPEG:n, PNG:n ja GIF:n ominaisuudet yhteen säiliöön.

Nopea vertailu perinteisiin formaatteihin:

Kokoero on huomattava. Sivustolla, jossa on viisikymmentä kuvaa sivua kohden, WebP:hen siirtyminen pienentää kokonaispainoa moninkertaisesti. Vaikutus Core Web Vitalseihin ja hakusijoituksiin on suora.

Miksi et voi vain ottaa WebP:tä käyttöön kaikkialla

Vastaus liittyy yhteensopivuuteen. Nykyään WebP:tä tukee yli 96% selaimista: Chrome, Firefox, Safari (iOS 14:stä alkaen), Edge. Mutta jäljelle jää pieni prosentti vanhoja laitteita, jotka eivät ymmärrä formaattia.

Jos yksinkertaisesti korvaat kaikki JPEG:t WebP:llä palvelimella, nuo muutamat prosentit kävijöistä näkevät rikkinäisiä kuvia. Kaupalliselle sivustolle tai verkkokaupalle tällainen käyttäjien menetys ei ole hyväksyttävää.

Tehtävä ei siis ole "muuntaa kuvia", vaan "tarjoilla WebP:tä niille, jotka sitä tukevat, ja alkuperäistä kaikille muille".

Kaksi perustapaa tarjoilla WebP:tä

Ennen kuin siirrytään WordPress-menetelmiin, on hyvä ymmärtää, miten selain ja palvelin neuvottelevat formaatista. Mekanismeja on vain kaksi.

Tapa 1: -tagi

Selaimelle tarjotaan valinta WebP:n ja alkuperäisen välillä suoraan HTML-merkinnässä:

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-tuella varustettu selain ottaa ensimmäisen <source>-elementin. Muut ohittavat WebP-lähteen ja lataavat JPEG:n <img>-elementistä.

Plussaa: toimii ilman palvelimen konfigurointia ja minkä tahansa CDN:n kanssa. Miinusta: ei toimi CSS-taustakuvien kanssa ja muuttaa HTML-rakennetta. Jotkin välimuisti- ja lazy loading -lisäosat kompastuvat <picture>-tagiin.

Tapa 2: vaihteleva vaste

HTML:ssä säilyy tavallinen <img src="img.jpg">, mutta palvelin palauttaa samaan URL-osoitteeseen eri sisältöä: WebP-tiedoston selaimille, joissa on WebP-tuki, ja alkuperäisen kaikille muille.

Mekanismin avain on HTTP-otsake Accept. Selain lähettää sen jokaisen pyynnön mukana, ja palvelin tai CDN päättää, mitä palauttaa.

Plussaa: toimii kaikkialla, myös CSS-taustakuvissa. HTML ei muutu. Miinusta: vaatii palvelimen konfiguroinnin, eikä jokainen CDN huomioi Accept-otsaketta oikein välimuistiavaimessa.

Verrataan:

Katsotaan seuraavaksi, miten näitä lähestymistapoja sovelletaan WordPressissä.

Menetelmä 1: CDN ja lennossa tapahtuva WebP-muunnos

Yksinkertaisin polku. Otat käyttöön CDN:n, joka optimoi kuvat lennossa ja tarjoilee WebP:tä sitä tukeville selaimille. Muunnettuja kopioita ei tallenneta palvelimellesi, mikä säästää levytilaa.

Useita toimivia vaihtoehtoja:

• BunnyCDN Bunny Optimizerilla, pakkaa ja muuntaa kuvat lennossa, tukee WebP:tä välimuistiavaimessa. Hinta alkaen 0,01 $/Gt.
• Cloudflare Polish-ominaisuudella (Pro-taso, 20 $/kk), automaattinen pakkaus ja muunto WebP:ksi.
• Cloudinary, kuvien käsittelyyn erikoistunut palvelu, WebP-tuki sisäänrakennettuna.
• ShortPixel Adaptive Images, WordPress-lisäosa, joka käyttää bunny.net CDN:ää. Muuntaa ja tarjoilee WebP-kuvat automaattisesti. Ilmainen taso: 500 Mt liikennettä kuukaudessa.
• WP Compress, hybridipalvelu: kuvien optimointi ja toimitus oman CDN-verkkonsa kautta.

Milloin valita menetelmä 1: jos olet valmis maksamaan CDN:stä etkä halua säätää palvelimen asetusten kanssa. Yhdistit, laitoit optimoinnin päälle, ja se toimi.

Tapa 2: vaihteleva vastaus + CDN

Menetelmä niille, jotka haluavat ratkaista tehtävän palvelintasolla muuttamatta HTML-merkintää.

Ydin: määrität palvelimen niin, että se palauttaa yhdestä URL-osoitteesta WebP:tä tai JPEG/PNG:tä Accept-otsakkeesta riippuen. Kaikki koodissa olevat kuva-URL:t pysyvät samoina.

Käyttöönotto WebP Expressin avulla

Helpoin tapa toteuttaa vaihteleva vastaus WordPressissä on WebP Express -lisäosa. Lisäosalla on yli 400 000 aktiivista asennusta, säännölliset päivitykset ja aktiivinen tekijän tuki. Se tekee kolme asiaa:

• Muuntaa ladatut kuvat WebP-muotoon.
• Kirjoittaa uudelleenohjaussäännöt (.htaccess Apache/LiteSpeedille tai Nginx-säännöt).
• Kun kuvaa pyydetään, tarkistaa Accept-otsakkeen ja palauttaa tarvittavan muodon.

Asennuksen jälkeen riittää, että napsautat "Tallenna asetukset ja pakota uudet.htaccess-säännöt". Lisäosa määrittää muuntimen ja säännöt itse.

Nginx-palvelimille

WebP Express luo säännöt .htaccess-tiedostolle (Apache/LiteSpeed/OpenLiteSpeed). Jos sinulla on Nginx, sinun on kirjoitettava säännöt manuaalisesti konfiguraatioon:

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

Mitä säännöt tekevät: lisäävät Vary: Accept -otsakkeen (jotta CDN ei välimuistita WebP:tä kaikille), yrittävät tarjota valmiin .webp-tiedoston, ja jos sitä ei ole, lähettävät pyynnön muuntimelle.

Kriittistä: CDN:n valinta tapaan 2

Virhe, joka rikkoo koko menetelmän: CDN välimuistittaa WebP:n ja tarjoaa sitä selaimille, joissa ei ole muototukea. Näin käy, kun CDN ei huomioi Accept-otsaketta välimuistiavaimessa.

Palveluntarjoajat, jotka toimivat oikein Vary: Accept-otsakkeen kanssa:

Bunny CDN, vaihtelevan vastauksen tuki otetaan käyttöön vyöhykeasetuksissa.

• KeyCDN, tukee myös WebP:tä osana välimuistiavainta. Otetaan käyttöön vyöhykeasetuksissa, Cache-osiossa.

• Google CDN, huomioi Vary: Accept-otsakkeen oletuksena.

Cloudflaren ilmaisella tasolla Accept-otsaketta ei huomioida täysin välimuistiavaimessa. Seuraus: WebP voi päätyä sinne, missä sitä ei tueta. Kaksi ulospääsyä: vaihda Pro-tasolle (20 $/kk) tai käytä CDN:ää, joka osaa käsitellä Vary: Accept-otsaketta suoraan (BunnyCDN tai KeyCDN).

WebP Express + CDN -yhdistelmä suosituilla palveluntarjoajilla

Kaava on kaikille sama: asenna WebP Express ja toimi sitten palvelinympäristön olosuhteiden mukaan:

• Kinsta / WP Engine, ota yhteyttä tukeen. Insinöörit lisäävät Nginx-konfiguraation WebP Expressille ja ottavat käyttöön oikean WebP-välimuistiavaimen CDN:ssään (KeyCDN Kinstassa).
• Cloudways, Apache+Nginx-hybridi. WebP Express ja .htaccess-tiedoston tallennus yleensä riittävät. Säännöt poimitaan automaattisesti.
• SiteGround, pyydä tukea lisäämään Nginx-säännöt ja käytä yhteensopivaa CDN:ää.
• LiteSpeed / OpenLiteSpeed / Apache, vain WebP Express ja .htaccess-säännöt. Valitse CDN, jossa on Vary: Accept -tuki.
• Oma VPS Nginxillä (LEMP), lisää yllä olevat Nginx-säännöt manuaalisesti ja yhdistä CDN, jossa on Vary: Accept -tuki.

Milloin valita tapa 2: jos et periaatteessa halua muuttaa HTML-merkintää, sinulla on taustakuvia CSS:ssä ja olet valmis määrittämään palvelimen kerran.

Tapa 3: -tagin avulla

Varavaihtoehto, kun kaksi ensimmäistä eivät sovi. Ei vaadi palvelimen konfigurointia, toimii minkä tahansa CDN:n kanssa. Lisäosa korvaa tavalliset <img>-tagit <picture>-rakenteella, ja selain valitsee muodon itse.

Menetelmän haitat:

• Ei toimi taustakuvien kanssa.
• Saattaa olla ristiriidassa teemojen ja välimuistilisäosien kanssa, jotka muokkaavat <img>-tulostetta.
• Muuttaa HTML-rakennetta, mikä joskus rikkoo lazy loading -lisäosat.

Käyttöönotto WebP Expressin avulla

Sama WebP Express voi toimia <picture>-tilassa. Valitse asetuksista "CDN friendly" -tila ja ota käyttöön "Alter HTML" -vaihtoehto. Lisäosa käärii lennossa kaikki <img>-tagit <picture>-tagin sisään WebP-lähteellä.

Milloin valita tapa 3: jos palvelimen konfiguraatioon ei ole pääsyä eikä CDN tue Vary: Accept-otsaketta. Esimerkiksi halpa hosting, jossa on tiukat rajoitukset, tai ilmainen Cloudflare.

Video: WebP WordPressissä 10 minuutissa

Jos katsot mieluummin kuin luet, tässä on visuaalinen opas WebP:n käyttöönottoon WebP Expressin avulla:

Video näyttää koko WebP Expressin asennuksen asennuksesta varmennukseen Chrome DevToolsissa. Siinä sivutaan myös AVIF-muunnosta WebP:n jälkeisenä seuraavana askeleena.

⁉️🤔 Usein kysytyt kysymykset

Onko WebP aina koon pieneneminen?

Ei aina, mutta useimmissa tapauksissa kyllä. Valokuvissa ja kuvakaappauksissa säästö on 25-50%, Googlen kehittäjien mukaan. Tekstiä tai tasaisia värejä sisältävissä kuvissa WebP voi olla jopa raskaampi kuin PNG-8. Sisältökuvissa WebP tuo lähes aina hyödyn. Ikoneissa ja yksinkertaisessa grafiikassa SVG tai optimoitu PNG on toimivampi ratkaisu. Lisäosat, kuten WebP Express, muuntavat kaiken, ja lopputulos riippuu lähdeformaatista.

Voiko WebP:tä käyttää WordPressissä ilman lisäosia?

WordPress 5.8:sta alkaen voi. Ydin hyväksyy .webp-tiedostot mediapankkiin ladattaessa. Automaattista vanhojen kuvien muuntamista tai formaatin korvaamista selaimelle ei kuitenkaan ole. Jos lataat vain uusia kuvia WebP-muodossa ja sinulle sopii, ettei varavaihtoehtoa ole pienelle vanhojen selainten osuudelle, lisäosat eivät ole pakollisia. Olemassa olevan sivuston täysimittaiseen toteutukseen tarvitset lisäosan: tarvitset erämuunnoksen ja formaatin korvausmekanismin.

Miten tarkistan, että WebP tarjoillaan oikein?

Avaa sivusto Chromessa, paina F12, siirry Network-välilehdelle ja suodata Img-tyypillä. Type-sarakkeessa pitäisi lukea webp. Vaihtoehtoisesti: etsi palvelimen vastauksesta X-WebP-Express-otsaketta (jos käytät WebP Expressiä) tai content-type: image/webp. Chrome DevTools on luotettavin tapa: suodata kuvien mukaan ja katso Type-saraketta. Jos siinä lukee webp, kaikki toimii.

Mitä tehdä, jos CDN välimuistittaa WebP:n väärin?

Oire: jotkut käyttäjät näkevät rikkinäisiä kuvia, vaikka asetuksissa kaikki on päällä. Hoito: varmista, että CDN huomioi Accept- ja Vary-otsakkeet välimuistiavaimessa. BunnyCDN:n ja KeyCDN:n paneeleissa tähän on omat valintansa. Jos Accept ei ole välimuistiavaimessa, Chromen ensimmäinen pyyntö luo WebP-kopion, ja kaikki myöhemmät käyttäjät, mukaan lukien Safari ilman WebP-tukea, saavat juuri tämän kopion. Cloudflareen ei ole ilmaista ratkaisua, vaan tarvitaan joko Pro-paketti tai CDN:n vaihto.

WebP vai AVIF, kumpi valita vuonna 2026?

AVIF tarjoaa vielä paremman pakkauksen (20-30% pienempi kuin WebP samalla laadulla), mutta selaintuki laahaa edelleen: noin 92% verrattuna WebP:n 96%:iin. Vuonna 2026 WebP on yhä de facto -standardi verkossa. AVIF on kirimässä kiinni, mutta selaintuen ero on edelleen kriittinen kaupallisissa projekteissa. Käytännön strategia: WebP nyt, AVIF sitten, kun tuki ylittää 95%.

Mikä menetelmä valita omaan tarpeeseesi: lopullinen erittely

Menetelmän valinta ei riipu siitä, mikä on "yleisesti parempi", vaan omasta teknologiapinostasi ja halukkuudestasi käyttää aikaa tai rahaa:

• Olet valmis maksamaan CDN:stä etkä halua koskea palvelimeen, menetelmä 1 BunnyCDN:llä (alkaen 0,01 $/Gt) tai Cloudflare Prolla (20 $/kk). Asennus vie viisi minuuttia, ja sen voi unohtaa.
• Sinulla on palvelinyhteys ja haluat ratkaista asian kerralla, menetelmä 2 WebP Expressillä ja CDN:llä, joka tukee Vary: Accept -otsaketta. Toimii taustakuvien kanssa, ei koske HTML:ään.
• Ei palvelinyhteyttä ja budjetti on rajallinen, menetelmä 3 WebP Expressillä <picture>-tilassa. Ei ihanteellinen, mutta parempi kuin ei WebP:tä lainkaan.

Testaa valittua menetelmää staging-ympäristössä. Tarkista vastausotsakkeet ja Type-sarake Chrome DevToolsissa. Varmista, että vanhat selaimet saavat JPEG-kuvia, eivät rikkinäisiä linkkejä. Ja vasta sitten vie tuotantoon.

Kokeile WebP Expressiä, lisäosa kattaa molemmat palvelinmenetelmät suoraan paketista ja on ilmainen. Kerro kommenteissa, minkä lähestymistavan valitsit ja mitä sudenkuoppia kohtasit.