Yksi ainoa optimoimaton hero-kuva voi painaa enemmän kuin koko verkkosivun HTML, CSS ja JavaScript yhteensä. Kuvat muodostavat noin 50 % keskimääräisen verkkosivun kokonaistavumäärästä, mikä tekee niistä suurimman yksittäisen vivun suorituskyvyn parantamiseen. Silti kuvaoptimointi on yksi verkkokehityksen ja sisällöntuotannon väärinymmärretyimmistä osa-alueista.
Vaikutus ulottuu paljon latausnopeutta pidemmälle. Kuvan koko vaikuttaa hakusijoituksiisi, hosting-laskuusi, käyttäjiesi datasuunnitelmiin ja jopa konversioasteeseen.
Suorituskykykytkös: Core Web Vitals ja LCP
Googlen Core Web Vitals on joukko mittareita, jotka vaikuttavat suoraan hakusijoituksiin. Niistä Largest Contentful Paint (LCP) mittaa, kuinka kauan kestää suurimman näkyvän elementin renderöinti näytölle. Useimmissa tapauksissa tämä elementti on kuva.
Google pitää alle 2,5 sekunnin LCP:tä "hyvänä". 2,5–4 sekuntia on "parantamisen tarpeessa". Yli 4 sekuntia on "heikko". 3 MB:n hero-kuva tavallisella yhteydellä voi helposti työntää LCP:n yli 4 sekunnin rajan ja vetää koko sivun "heikko"-kategoriaan.
Seuraukset ovat konkreettisia:
- SEO-sijoitusten lasku — Core Web Vitals on sijoitussignaali; hitaat sivut menettävät paikkoja
- Korkeampi välitön poistumisprosentti — 53 % mobiilikävijöistä poistuu, jos sivun lataaminen kestää yli 3 sekuntia
- Matalampi konversioaste — jokainen ylimääräinen lataussekunnti vähentää konversioita noin 7 %
100 KB:n nyrkkisääntö Verkkosivun sisältökuville tavoittele alle 100 KB kuvaa kohti. Koko levyisille hero-kuville pysy alle 200 KB. Nämä tavoitteet ovat saavutettavissa nykyaikaisilla formaateilla ja oikealla pakkauksella ilman näkyvää laadun heikkenemistä.
Häviöllinen vs. häviötön: kompromissin ymmärtäminen
Kaikki kuvapakkaus jakautuu kahteen kategoriaan, ja väärän valinta on yleinen syy turvonneisiin tiedostoihin.
Häviötön pakkaus pienentää tiedostokokoa löytämällä tehokkaampia tapoja koodata sama data. Jokainen pikseli säilyy täsmälleen. Pienennys on vaatimaton — tyypillisesti 10–30 %. PNG käyttää häviötöntä pakkausta.
Häviöllinen pakkaus hylkää tietoa, jota ihmissilmä ei todennäköisesti huomaa. Väritarkkuutta liukuväreissä, hienoja tekstuuriyksityiskohtia ja hienovaraisia sävyvaihteluita yksinkertaistetaan. Pienennys on dramaattinen — tyypillisesti 70–90 %. JPEG ja WebP (häviöllisessä tilassa) käyttävät tätä lähestymistapaa.
Kriittinen oivallus on, että häviöllinen pakkaus laadulla 80–85 % on visuaalisesti erottamaton alkuperäisestä valokuvien osalta. Havaittu ero on käytännössä nolla, mutta tiedostokoon ero on valtava.
| Lähestymistapa | Koon pienennys | Laadun menetys | Paras valinta |
|---|---|---|---|
| Häviötön (PNG) | 10–30 % | Ei mitään | Logot, kuvakaappaukset, tekstipainotteiset grafiikat |
| Häviöllinen 85 % (JPEG/WebP) | 70–85 % | Huomaamaton | Valokuvat, kuvitukset, taustat |
| Häviöllinen 60 % (JPEG/WebP) | 85–95 % | Havaittavissa tarkassa tarkastelussa | Pikkukuvat, koristeelliset kuvat |
Monen tekemä virhe on käyttää häviötöntä pakkausta valokuvasisällölle tai häviöllistä pakkausta liian alhaisella laadulla tärkeille kuville. Sen ymmärtäminen, mitkä kuvat tarvitsevat mitäkin käsittelyä, on tehokkaan optimoinnin avain.
Formaatilla on merkitystä: sama kuva, villisti eri kokoja
Kuvaformaatin valinnalla on yhtä suuri vaikutus kuin pakkaustasolla. Valokuva tallennettuna PNG:nä voi olla 5–10 kertaa suurempi kuin sama kuva JPEG:nä laadulla 85 %, ilman havaittavaa eroa.
JPEG pysyy universaalina standardina valokuville. Sitä tuetaan kaikkialla ja se tarjoaa erinomaisen häviöllisen pakkauksen valokuvasisällölle.
WebP tarjoaa 25–35 % pienemmät tiedostot kuin JPEG vastaavalla visuaalisella laadulla, ja lisäetuna läpinäkyvyyden tuki. Kaikki nykyaikaiset selaimet tukevat sitä. Se on paras yleiskäyttöinen formaatti webille tänään.
AVIF on uusin haastaja, joka tarjoaa vielä parempaa pakkausta kuin WebP (noin 20 % pienempi), mutta selaintuki ja koodausnopeus ovat vielä kehittymässä.
PNG on oikea valinta vain kuville, jotka vaativat tarkan pikselitoiston — logot, kuvakkeet, kuvakaappaukset tekstillä tai läpinäkyvyyttä vaativat kuvat, joissa WebP ei ole vaihtoehto.
Kaistanleveys ja tallennustila: piilotetut kustannukset
Henkilökohtaisille blogeille ja pienille sivustoille kaistanleveyskustannukset saattavat vaikuttaa mitättömiltä. Mutta ne skaalautuvat nopeasti:
- Sivu, jossa on 2 MB kuvia ja 10 000 katselukertaa kuukaudessa, siirtää 20 GB kuvadataa kuukausittain
- Optimoi kuvat 400 KB:n kokonaismäärään, ja siirto on 4 GB — 80 % vähennys
- Mitatulla hostingilla tämä tarkoittaa suoraan pienempiä laskuja
Tallennustilakin kertyy. Verkkokauppa, jossa on 5 000 tuotetta, kunkin kanssa 4 optimoimatonta kuvaa á 2 MB, käyttää 40 GB pelkästään tuotekuviin. Optimoituna 200 KB:iin kukin, se laskee 4 GB:iin.
Responsiiviset kuvat ja laitteiden ongelma
1920 pikseliä leveä kuva näytettynä 375 pikseliä leveällä puhelinnäytöllä tuhlaa yli 96 % pikseleistään. Selain lataa koko kuvan ja hylkää suurimman osan datasta sovittaakseen sen näytölle.
Ratkaisu on responsiiviset kuvat — eri kokoisten kuvien tarjoaminen eri laitteille. Mobiilikävijä saa 400px leveän kuvan; pöytäkonekävijä saa 1200px leveän version. Konsepti on suoraviivainen, mutta toteutus vaatii srcset-attribuuttien, sizes-kuvaajan ja picture-elementin art direction -käytön ymmärtämistä.
Lazy loading: älä lataa näkymätöntä
Sivun taittokohdan alapuolella olevat kuvat — ne jotka eivät näy ilman vierittämistä — eivät tarvitse latausta heti. Lazy loading lykkää niiden lataamista, kunnes käyttäjä vierittää niiden lähelle. Tämä tarkoittaa, että alkuperäinen sivulataus sisältää vain näytöllä todella näkyvät kuvat, mikä parantaa dramaattisesti koettua suorituskykyä.
Nykyaikaiset selaimet tukevat natiivi lazy loadingia yhdellä HTML-attribuutilla. Se on yksi yksinkertaisimmista ja tehokkaimmista saatavilla olevista optimoinneista.
CDN:t: kuvien tarjoaminen reunalta
Content Delivery Network tallentaa kopiot kuvistasi ympäri maailmaa hajautetuille palvelimille. Tokiossa oleva kävijä saa kuvat lähellä olevalta palvelimelta sen sijaan, että ne tulisivat Pariisissa sijaitsevalta alkuperäispalvelimeltasi. Tämä vähentää viivettä, parantaa latausaikoja ja keventää infrastruktuurisi kuormaa.
Monet nykyaikaiset CDN:t tarjoavat myös lennossa tapahtuvan kuvien muokkauksen — automaattisen WebP-muunnoksen, koon muuttamisen eri laitteille ja optimaalisen pakkauksen koskematta alkuperäisiin tiedostoihin.
Lue lisää
Kuvaoptimointi on aihe, jossa pienet parannukset kertautuvat merkittäviksi tuloksiksi. Jos haluat kokeilla pakkaustasoja ja nähdä laatu-koko-kompromissin reaaliajassa, toolk.io tarjoaa kuvanpakkaajan, joka käsittelee kaiken selaimessasi. Oppaat kuvien pakkaamiseen ja formaattien välillä muuntamiseen ovat myös saatavilla sivustolla.