Karhulla on asiaa

WebP on verk­ko­si­vus­toil­le räätälöity ku­va­for­maat­ti

Atte Mäkinen 3

Sivuston nopeusoptimointi on monimutkainen kokonaisuus, eikä vähiten siksi, että Googlen kriteerit sivuston nopeudelle kehittyvät ja muuttuvat säännöllisesti. Google arvioi sivuston nopeutta neljällä avainmittarilla, joita kutsutaan nimellä Core Web Vitals. Googlen arvio vaikuttaa osaltaan muun muassa hakukonenäkyvyyteen, sillä Google haluaa kävijöiden päätyvän hyvin toimiville sivustoille.

Maaliskuussa 2024 Googlen kriteeristö on taas muuttumassa, kun ”Next Paint” korvaa ”First Input Delay” -mittarin yhtenä neljästä mittarista. Kyseinen muutos arvioi sivustoa yhä kokonaisvaltaisemmin pelkän ensimmäisen interaktion sijaan.

Sivuston nopeusoptimointi kattaa kymmeniä, ellei satoja osa-alueita, eikä niistä kaikkien huomioiminen ole käytännössä edes mielekästä. Kun olemme käyneet läpi kymmeniä nopeusraportteja, yksi kehityskohde kuitenkin toistuu raportista toiseen: kuvatiedostojen koko ja formaatti. Kyseessä on varsin suoraviivainen nopeuteen vaikuttava korrelaatio – mitä pienempiä kuvatiedostot ovat, sitä vähemmän bittejä selaimen tarvitsee sivustovierailun aikana ladata. Olemme kirjoittaneet aiemmin kuvien optimoimisesta verkkosivuille.

Mitä pienempiä kuvatiedostot ovat, sitä vähemmän bittejä selaimen tarvitsee sivustovierailun aikana ladata.

Kuvien optimointiin on kuitenkin onneksi muitakin vaihtoehtoja kuin Photoshopin kanssa säätäminen. Monella sivustolla kuvat pakataan automaattisesti lähelle optimaalista kokoa, sijainnin mukaan. Koon lisäksi kuitenkin kuvan tiedostoformaatti vaikuttaa merkittävästi latausnopeuteen.

Modernit selaimet ovat siirtyneet laajasti tukemaan kuvaformaatteja, joita käytetään vain verkkosivustoilla eikä lainkaan esimerkiksi printeissä. Yksi tällainen teknologia on erityisesti verkkosivustoja varten suunniteltu kuvatiedosto .webP. WebP mahdollistaa kuvien pakkaamisen 25–34 % pienemmäksi (Googlen arvio), ilman silmillä nähtävää laadun kärsimistä.

Esimerkkejä webP-pakkauksesta löydät Googlen WebP-galleriasta.

WebP-kuvien käyttöönotto vaatii sivustoon ja palvelimeen liittyvää kehitystä. Mikäli webP-formaatti ei vielä ole käytössä, on tämä kehitys tyypillisesti järkevä ja työmäärältään kohtuullinen kehitys. Uusimmilla sivustoilla webP on saatettu ottaa jo rakentamisen yhteydessä käyttöön.

Kuvien optimointi webP-muotoon on vain pieni osa sivuston nopeuden laajaa kokonaisuutta. Se on kuitenkin selkeä ja myös sivuston päivittäjien arkea helpottava palanen, jossa maltillisella kehitystyöllä saadaan aikaan mahdollisesti merkittäväkin säästö.

Usein kysyttyä

Pilaako webP kuvien laadun?

Ei, ainakaan huomattavasti. WebP on suunniteltu tarjoamaan korkealaatuista kuvaa pienemmällä tiedostokoolla verrattuna perinteisiin muotoihin, kuten jpeg. Se voi jopa parantaa laatua tietyissä tapauksissa.

Mitkä selaimet tukevat webP -tiedostomuotoa?

Useimmat nykyaikaiset selaimet tukevat webP-tiedostomuotoa. Näihin kuuluvat Google Chrome, Firefox, Safari, Edge ja Opera.

Vaikuttaako muutos sisällönsyöttöön?

Riippuen toteutustavasta. Karhun toteuttamilla sivustoilla .webP-kuvaformaatin käyttöönotto ei vaikuta.

Voinko ladata sivustolle minkä tahansa kokoisia kuvia?

Teknisesti kyllä, mutta se ei silti ole välttämättä järkevää. On suositeltavaa käyttää suunnilleen oikean kokoisia tai hieman suurempia kuvia ja antaa sivuston pakata kuva oikeaan kokoon. Mutta liika on liikaa, eikä mikään pakkaus pysty ihmeisiin.

Mietityttääkö sivuston nopeus tai kuvaformaatit? Jutellaan:

Atte Mäkinen asiakkuusjohtaja 050 543 7697

Tai lähetä meille viesti

Kun lähetät viestin, olemme sinuun yhteydessä. Pidämme datastasi huolta tietosuojasivullamme kuvatulla tavalla.

Kenttä on validointitarkoituksiin ja tulee jättää koskemattomaksi.

Tykkäsitkö tästä jutusta?

1
1
1
0
Kenttä on validointitarkoituksiin ja tulee jättää koskemattomaksi.
Jaa juttu somessa
Tällä viikolla näitä luettiin eniten
  1. Miten projektin hinnoittelumalli vaikuttaa suunnittelun joustavuuteen?
  2. Terminaalimultiplekseri tmux – ystävä, johon voi luottaa
  3. WCAG-kriteerit ymmärrettävästi – näin teet sivustostasi saavutettavan
Viime aikoina eniten reaktioita herättivät
Ota yhteyttä
Tilaa uutiskirje