WebP-kuvat nopeuttavat sivustoasi

WebP-kuvaformaatti on jatkuvasti yleistynyt ja yhä useammat hyödyntävätkin sitä omilla kotisivuillaan tai verkkokaupassa. Googlen lupauksien mukaan WebP-formaatti mahdollistaa pienemmät kuvatiedostot vähintään yhtä hyvällä laadulla kuin vastaavissa JPG-kuvissa.

Kirjoituksessa käydään läpi, mikä WebP on, miten se pakkaa kuvia ja miksi sitä kannattaa käyttää. Teimme myös pienimuotoisen testin, jossa muutimme viisi JPG-kuvaa webP-formaattiin. Lopuksi käymme vielä läpi, miten kyseisen tiedostomuodon saa käyttöön omalle WordPress-sivustolle.

WebP-kuvatiedoston logo.

Mikä WebP on?

WebP on Googlen kehittämä kuvatiedostomuoto, joka esiteltiin ensimmäisen kerran syksyllä 2010. Sen on tarkoituksena toimia korvaavana tiedostomuotona JPG, PNG ja GIF-tiedostoille. Google lupaa, että .webp-tiedostomuoto puristaa kuvat pienempään tiedostokokoon ja säilyttää silti alkuperäisen kuvatiedoston laadun.

WebP-kuvat ovat jo laajasti käytössä useilla kotisivuilla ja yleistyvät jatkuvasti. Esimerkiksi iso osa meidän sivustomme kuvista tarjotaan kävijöille nimenomaan webP-tiedostomuodossa. Lisäksi Google käyttää itse kyseistä tiedostomuotoa muun muassa Youtuben pikkukuvissa (engl. thumbnails).

Tällä hetkellä Google kehittää jo webP 2 -versiota, jonka tavoitteena on tarjota entistä parempi tekniikkaa kuvien pakkaamiseen, jotta kuvista saadaan vieläkin pienempiä ilman laadun merkittävää heikkenemistä. Uuden version julkaisuajankohdasta ei ole vielä tarkempaa tietoa.

Miksi kuvia kannattaa pakata?

Visuaalisuudella on nykyaikana todella merkittävä rooli ja erilaisia kuvia käytetäänkin todella paljon kotisivuilla ja verkkokaupoissa. Kuvat vievätkin arviolta jopa 50 % nykyaikaisten verkkosivustojen koosta ja vaikuttavat sitä kautta suoraan sivustojen nopeuteen. Kotisivujen latausnopeus voi vaikuttaa merkittävästi sivuston konversioon.

Pienemmät kuvat vaikuttavat myös suoraan sivuston levytilan määrään, jos tilaa tarvitaan vähemmän voi jo pienempi ja edullisempi kotisivutila riittää mainiosti. Kuvien pakkaamisen lisäksi on tärkeää, että kuvat ladataan sivustolle suoraan oikeassa koossa. Katso, miten kuvan pienentäminen onnistuu ilmaisohjelmien avulla.

Eri pakkaustavat

WebP-kuvaformaatti tukee sekä häviöllistä että häviötöntä pakkausta. Pakkaustapa vaikuttaa merkittävästi siihen, miten pieneksi kuva saadaan pakattua. Perinteisesti häviöllistä pakkausta hyödynnetään JPG-kuvien kanssa ja häviötöntä PNG-kuvien kanssa.

WebP-formaatti voi merkittävästi nopeuttaa kotisivuja.

Häviöllinen pakkaus

WebP häiviöllinen pakkaus (engl. lossy compression) on selvästi esimerkiksi JPG-kuvien vastaavaa pakkausta parempi ja sen avulla voidaankin saavuttaa merkittäviä säästöjä kuvien koossa.

Yksinkertaistettuna häviöllisen pakkauksen ideana on vähentää kuvassa olevien pikseleiden määrää yhdistämällä lähes samanlaisia pikseleitä toisiinsa. Kuvan laatu toki laskee, mutta pakkaus on mahdollista tehdä sen verran hienovaraisesti, ettei sitä ihmissilmällä merkittävästi huomaa.

WebP:n häviöllisessä pakkauksessa hyödynnetään VP8-videokoodekin pakkausalgoritmia. Käytännössä kuva jaetaan alueisiin, joilla on visuaalisesti samankaltaista sisältöä: esimerkiksi paljon yksityiskohtia sisältävä alue tai vähän yksityiskohtia sisältävä alue. Jokaiselle alueelle määritetään pakkausparametrit erikseen, jotta pakkaaminen on mahdollisimman tehokasta ilman laadun kärsimistä.

Häviötön pakkaus

Häviötön pakkaus (engl. lossless compression) on ikään kuin vastakohta häviölliselle pakkaamiselle, eikä sillä yleensä saada yhtä tehokkaita tuloksia aikaan. Yksinkertaisimmillaan voidaan sanoa, että tavoitteena on pakata itse kuvatiedosto mahdollisimman pieneksi. Varsinainen kuva pysyy häviöttömässä pakkauksessa yleensä lähes muuttumattomana, eli esimerkiksi samanlaisia pikseleitä ei yhdistetä toisiinsa.

Google on kehittänyt .webp-kuvaformaatin häviöttömän pakkauksen itse ja se käyttää useita eri keinoja pakkaamiseen, jotta tiedostosta saadaan mahdollisimman pienikokoinen. Kuvien eri pakkausmetodeja on avattu tarkemmin Googlen kirjoituksessa: https://developers.google.com/speed/webp/docs/compressio

Miksi kannattaa käyttää Webp-kuvia?

WebP-tiedostomuodon merkittävin hyöty on tietenkin kuvien pakkaaminen pienempään kokoon laadun kärsimättä. Tämä voi auttaa nopeuttamaan sivuja tai verkkokauppaa merkittävästi. Esimerkiksi Google oma testaustyökalu Google Lighthouse suosittelee käyttämään kyseistä tiedostomuotoa kuville.

Googlen mukaan sen avulla voidaankin säästää noin 25-34 % koosta verrattuna saman laatuisiin JPG-tiedostoihin. Toki saatava säästö riippuu merkittävästi kuvan alkuperäisestä koosta, monimutkaisuudesta ja siitä käytetäänkö pakkaamiseen häviöllistä vai häviötöntä pakkausmetodia.

Lähde: https://developers.google.com/speed/webp/docs/webp_stud

Google Lighthouse suosittelee käyttäämään webp-kuvia.

Kaikki ohjelmistot eivät tue webp-formaattia

WebP-formaatti on verrattain uusi, vaikka se onkin ollut käytettävissä jo lähes kymmenen vuotta. Yhä edelleen on kuitenkin jonkin verran selaimia ja muita ohjelmistoja, jotka eivät kyseistä kuvaformaattia tue.

Kaikki eniten käytetyt selaimet, kuten Chorme, Firefox, Edge ja Safari, tukevat kyseistä tiedostomuotoa. Tosin esimerkiksi Safarissa tuki rajoittuu ainoastaan selaimen uudempiin versioihin. Kaikkiaan noin 93 % tällä hetkellä käytetyistä selaimista tukee jo kyseistä formaattia. Lähde: https://caniuse.com/

GIF-tiedostojen kohdalla webP-tiedostomuoto ei kuitenkaan tarjoa usein optimaalista lopputulosta. Yleensä pienempi tiedosto vähintään samalla laadulla saadaan APNG-tiedostomuodolla.

Eri selaimet tukevat webp-formaatia vaihtelevasti: vihreä = täysi tuki, raidallinen vihreä = osittainen tuki ja punainen = ei tukea.

Testasimme webp-tiedostomuotoa

Halusimme testata webP-formaatin tehokkuutta, joten valitsimme viisi erilaista kuvaa, jotka muuttaisimme kyseiseen tiedostomuotoon. Testiin pyrittiin valitsemaan hieman erilaisia kuvia, jotta nähdään, toimiiko pakkaus tehokkaasti hyvin erilaisissa kuvissa ilman, että laatu oleellisesti kärsii.

Testin vaihteet:
  1. Valitut kuvat ladattiin kuvapankeista jo valmiiksi hieman pienempänä kokona (max 1200 leveinä).
  2. Ne pienennettiin Photoshopilla blogissamme yleisestä käytettyyn 800 x 350 px kokoon. Kuvia ei käsitelty muuten.
  3. Kuvat tallennettiin JPG-muodossa mahdollisimman laadukkaana, maksimiarvolla 10.
  4. Tämän jälkeen nuo JPG-kuvat tallennettiin Photoshopin avulla webP-muotoon. Häviöllisessä pakkauksessa käytettiin ohjelman tarjoamaa oletusarvoa 75.
  5. Vertailun vuoksi JPG-tiedostoista tehtiin myös pakatut JPG-kuvat. Pakkauksessa käytettiin tällä kertaa arvoa 7, jonka pitäisi suunnilleen vastata webP-kuville käytettyä pakkausarvoa.
  6. Lopuksi kaikkia kolmea versiota kuvasta verrattiin keskenään tiedostokoon ja kuvien silmämääräisen laadun mukaan.

Alla olevaan taulukkoon on koottu eri pakkaustavoilla tallennettujen kuvien tiedostokoot.

Jpg (10)WebP (75)Jpg (7)

569 kt

137 kt

190 kt

247 kt

37 kt

73 kt

172 kt

20 kt

46 kt

116 kt

12 kt

37 kt

203 kt

26 kt

58 kt

Kuten taulukko osoittaa webP-tiedostomuodolla sai siis tehtyä selvästi pienimmät tiedostot ja riippuen kuvasta, erot ovat jopa todella merkittäviä.

Silmämääräisesti kuvia verrattaessa webP-kuvat olivat paikoin aavistuksen alkuperäisiä JPG-kuvia pehmeämpiä, etenkin terävien reunojen osalta. Enemmän pakattu JPG-kuva oli puolestaan paikoin selvästi rakeisempi kuin tiedostokooltaan pienempi webP-kuva.

WebP-kuva on laadukkaampi verrattuna jpg-kuvaan.
Vasemmalla webP-muodossa tallennettu kuva ja oikealla pakattu JPG-kuva. Tässä tallennettuna JPG-tiedostoksi.

Todennäköisesti varsinaisella sivustolla tai verkkokaupassa pakkauksesta aiheutuvia pieniä muutoksia ei edes huomaisi, kun vertailukuvaa ei ole esillä. Toki tällaiset muutokset on hyvä tiedostaa ja niiden kanssa kannattaa olla tarkkana, jotta kuvan laatu ei laske liikaa.

Miten käyttää webp-kuvia WordPress-sivustolla?

WebP-kuvia ei kannata yleensä ladata suoraan WordPress-sivuston mediakirjastoon, koska kaikki selaimet eivät niitä tue. Jos kuvat ladattaisiin suoraan, olisi täysin mahdollista, että jollekin vierailijalle kuva ei näkyisi.

Tätä tarkoitusta varten löytyy onneksi useampia käteviä lisäosia, jotka muuttavat kuvat webP-formaattiin. Tällaiset lisäosat tarjoavat myös tarpeen mukaan alkuperäisen JPG- tai PNG-kuvan niille käyttäjille, joiden selain ei tue .webP-formaattia.

Vastaavia webP-formaattiin kuvat muuttavia lisäosia löytyy myös muille yleisimmille julkaisujärjestelmille.

Ewww Image Optimizer

Ewww Image Optimizer on kuvien pakkaamiseen tarkoitettu WordPress-lisäosa. Se pakkaa ja optimoi kuvia sekä lisäksi tarjoaa ne mahdollisuuksien mukaan webP-formaatissa käyttäjälle. Itse lisäosa on ilmainen, mutta siihen on saatavilla useita maksullisia lisenssejä, jotka tuovat lisäominaisuuksia ja laajemmat käyttömahdollisuudet lisäosalle.

Imagify

Imagify on WordPress-lisäosa, joka automaattisesti pakkaa kuvat ja muuttaa ne aina tarvittavaan kokoon. Lisäksi se tarjoaa kuvat webP-muodossa niille käyttäjille, joiden selain tukee kyseisestä tiedostoformaattia. Imagify on saatavilla ilmaiseksi ja lisäksi tarjoaa useita eri hintaisia maksullisia lisenssivaihtoehtoja isompaan tarpeeseen.

Smush

Smush on tunnettu kuvien optimointiin tarkoitettu lisäosa WordPress-sivustoille. Smush pakkaa ja optimoi sivuston kuvat sekä muuttaa ne webp-formaattiin. Lisäosa on ilmainen, mutta siihen on saatavilla myös maksullisia pro-versioita. WebP-formaatin hyödyntäminen edellyttää maksullista versiota.

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on pinterest