Kuvan koko nettisivuille: paljonko tuotekuva saa painaa?
Kirjoita hakukoneeseen ”kuvan koko nettisivuille”, niin saat vastauksia laidasta laitaan. Useimmat oppaat on kirjoitettu bloggaajille tai ohjelmoijille, ei sille, jonka verkkokaupassa on satoja tuotekuvia.
Alta löydät konkreettisen luvun, selityksen sille, mistä se tulee, ja keinon päästä siihen pilaamatta kuvien ulkonäköä. Keino tiivistyy kahteen vaiheeseen: kuvan mittojen pienentäminen ja tallennus WebP-muotoon. WebP on Googlen kehittämä, JPG:tä uudempi tiedostomuoto, joka tuottaa samantasoisella laadulla yleensä kevyempiä tiedostoja. Kokeilimme tätä yhdellä kuvalla ja näytämme tuloksen. Emme lupaa, että tiedostomuodon vaihto tuplaa myyntisi, koska sitä kukaan ei voi rehellisesti luvata.
Lyhyt vastaus: noin 130 kt tuotekuvaa kohden
Tuotesivulla katsottavalle kuvalle järkevä tavoite on noin 130 kt. Tuotelistauksen pikkukuva voi painaa enintään toistakymmentä kilotavua.
Tämä ei ole Googlen eikä minkään muunkaan organisaation normi. Sellaista normia ei yksinkertaisesti ole. Kyse on käytännön kompromissista: tietyn rajan alapuolella kuvasta katoavat yksityiskohdat, jotka asiakas haluaa nähdä, kuten kankaan pintarakenne, puun syykuvio tai lasitteen kiilto. Rajan yläpuolella maksat latausajalla yksityiskohdista, joita kukaan ei puhelimen näytöltä kuitenkaan erota.
Ennen kuin aloitat, katso, mistä lähdet liikkeelle. Jos tuotekuvasi painavat nyt useita megatavuja, hyöty on suuri. Jos ne painavat 200 kt kappaleelta, hyöty jää pieneksi.
Miksi kuvien painolla on väliä
Kuvat ovat tyypillisen etusivun painavin osa. HTTP Archive Web Almanac 2025 -raportin mukaan puhelimella katsotun etusivun painon mediaani on 2,56 Mt, ja tällaisen sivun kuvien yhteispainon mediaani on noin 911 kt. Se on suunnilleen kolmannes sivun painosta ja enemmän kuin kaikki JavaScript-koodi yhteensä.
Toinen syy on kaupalle tärkeämpi. Google mittaa, kuinka nopeasti näytöllä näkyvä suurin elementti ilmestyy. Tämän mittarin nimi on LCP. Puhelimella katsotuista sivuista 76 %:lla tuo suurin elementti on juuri kuva, ja kaupassa se on yleensä tuotekuva tai banneri.
Google odottaa, että tämä elementti ilmestyy 2,5 sekunnin kuluessa. Ei yhdessä testissä, vaan vähintään kolmessa neljäsosassa todellisista käynneistä. Yli 4 sekunnin tulosta se pitää huonona.
Parantaako nopeampi sivusto sijoitustasi Googlessa?
Se voi auttaa vähän, mutta vähemmän kuin moni opas antaa ymmärtää. Google kertoo, että sen sijoitusjärjestelmät käyttävät nopeusmittareita. Heti perään se kuitenkin lisää, että hyvät tulokset eivät takaa korkeaa sijoitusta ja että sivu, jonka sisältö on osuva, voittaa edelleen nopeamman mutta vähemmän osuvan sivun.
Nopeudella on eniten merkitystä silloin, kun usealla sivulla on suunnilleen yhtä hyvä sisältö. Tiedostomuoto itsessään ei ole sijoitukseen vaikuttava tekijä. Google ei palkitse kuvaa siitä, että se on WebP-muodossa. Välillisesti se palkitsee sivun, joka latautuu nopeammin.
Suhtaudu varauksella myös verkossa kiertäviin lukuihin. Suosittu väite, että sekunnin viive tarkoittaa 7 % vähemmän konversioita, on peräisin Aberdeen Groupin vuonna 2008 tekemästä kyselystä, johon osallistui yli 160 yritystä. Se ei perustu ostajien käyttäytymisen mittaamiseen. Älä tee päätöksiä sen varassa.
Ensin mitat, vasta sitten tiedostomuoto
Tässä kohtaa tehdään yleisin virhe. WebP-muotoon vaihtaminen on vasta toinen vaihe, ei ensimmäinen.
Puhelimen 12 megapikselin kuva on kooltaan 4000 × 3000 pikseliä. Google Merchant Center eli hallintapaneeli, jonka kautta kaupat vievät tuotteitaan Google Shoppingiin, suosittelee tuotekuvien mitoiksi noin 1500 × 1500 pikseliä. Se on järkevä lähtökohta myös sinun kaupallesi.
Jos kauppa lähettää suuremman tiedoston kuin kuva vie näytöllä tilaa, selain kyllä pienentää sen, mutta sen on ensin ladattava koko tiedosto.
Testasimme tämän yhdellä kuvalla
Otimme tuotekuvan keraamisesta mukista tasaista taustaa vasten ja tallensimme sen neljällä tavalla. Valitsimme kuvan tarkoituksella: kylläinen oranssi väri ja taustan tasainen liukuväri ovat kohtia, joihin pakkaus jättää helposti jälkiä. Pelkän tiedoston painon kannalta se on sen sijaan helpompi tapaus kuin kamerakuva.
| Versio | Mitat | Paino |
|---|---|---|
| Alkuperäinen JPG | 2880 × 2880 px | 1826 kt |
| Vain pienennetty, yhä JPG | 1500 × 1500 px | 550 kt |
| Vain WebP, täysikokoinen | 2880 × 2880 px | 128 kt |
| Pienennetty ja tallennettu WebP-muotoon | 1500 × 1500 px | 122 kt |
Pelkkä mittojen pienentäminen kevensi tiedostoa 70 %. Tallennus WebP-muotoon 130 kt:n tavoitepainolla teki siitä sen jälkeen vielä yli neljä kertaa kevyemmän. Kaikkiaan kuva on viisitoista kertaa kevyempi kuin alkuperäinen.
Tämä toinen kevennys ei kuitenkaan ole pelkän tiedostomuodon ansiota. Pienennetyn JPG:n laatu oli yhä 95, ja lisäosa pakkasi WebP-kuvaa voimakkaammin, jotta se mahtuisi 130 kilotavuun. Kerromme alempana, paljonko pelkkä tiedostomuodon vaihto säästää.
Eniten kertoo kahden viimeisen rivin vertailu. Molemmat versiot painavat lähes saman verran, mutta ne eivät ole yhtä hyviä. Tallennuslaatu asetetaan asteikolla, jonka yläraja on 100, ja mitä matalampi laatu on, sitä enemmän pieniä yksityiskohtia katoaa. Jotta täysikokoinen kuva mahtuisi 130 kilotavuun, lisäosan piti laskea laatu 55:een. Pienennetty kuva mahtui samaan 130 kilotavuun laadulla 87, ja mittauksemme mukaan pakkaus vääristi sitä vähemmän. Juuri siksi mitat tulevat ennen tiedostomuotoa.
Teimme testin 13. syyskuuta 2026 omalla ConverterSEO 1.31.1 -lisäosallamme, jonka tavoitepainoksi oli asetettu 130 kt, palvelimella, jossa oli WordPress 7.1 ja GD-kuvankäsittelykirjasto. Mukin kuva ei ole peräisin kamerasta: generoimme sen nimenomaan tätä testiä varten ja tallensimme sen JPG-muotoon laadulla 95. Oikeissa kamerakuvissa on enemmän kohinaa, ja ne painavat yleensä enemmän, joten sinun kuvillasi luvut ovat toiset. Ratkaisevaa on suunta: ensin mitat, sitten tiedostomuoto.
Heikentääkö WebP kuvien laatua?
Hieman heikentää. Valokuviin käytettävä WebP on häviöllinen muoto, joten se jättää tallennettaessa aina jotain pois. Ilmaus ”ilman laadun heikkenemistä” esiintyy oppaissa ja jopa Googlella itsellään, mutta sen takana on vertailu, jossa molempien tiedostojen laadun arvioi algoritmi. Se ei tarkoita, ettei tiedostosta olisi kadonnut mitään. Häviötöntä pakkausta käytetään tuotekuviin harvoin, koska tiedostoista tulee silloin moninkertaisesti suurempia.
Järkevillä asetuksilla ero voi kuitenkin olla hyvin pieni. Tässä sama kohta testimme mukista molempina versioina.
Pikseli pikseliltä tehty vertailu näyttää, että WebP poikkeaa alkuperäisestä hieman enemmän kuin vasemmalla oleva JPG. Näytöllä eroa on vaikea osoittaa edes suurennettuna. Lasitteen pilkut, heijastus ja mukin reuna pysyivät paikallaan.
Kahdessa tilanteessa kannattaa olla tarkkana:
- Tasaiset värisiirtymät, esimerkiksi studiokuvan tausta. Liian voimakkaasti pakattaessa tasaisen liukuvärin tilalle voi tulla raitoja.
- Hyvin korkea laatu. Silloin WebP yltää JPG:n tasolle vain vaivoin, joten tiedosto ei aina ole pienempi.
Ennen kuin muutat kaupan kaikki kuvat WebP-muotoon, kokeile muutamalla ja katso niitä suurennettuina alkuperäisten rinnalla. Aloita kuvista, joissa on tasainen tausta ja voimakas väri.
WebP vai JPG: paljonko oikeasti säästät
Google kertoi tutkimuksessaan, että WebP on 25–34 % pienempi kuin JPG, kun algoritmi arvioi molempien tiedostojen laadun samaksi. Se pitää paikkansa, mutta yhdellä varauksella, jota oppaat eivät yleensä mainitse. Testi tehtiin noin vuonna 2011, ja siinä WebP:tä verrattiin JPG-kuviin, jotka oli tallennettu vanhalla ohjelmalla. Tuo ohjelma tuottaa samalla laadulla suurempia tiedostoja kuin uudemmat työkalut.
Cloudinaryn uudempi analyysi vuodelta 2023 antaa kattavamman kuvan. Matalammilla laatuasetuksilla WebP on 25–35 % pienempi kuin ilman optimointia tallennettu JPG, ja korkeammilla asetuksilla tämä etu kutistuu. Kun vertailukohtana on JPG, joka on tallennettu tiedostoja itse tehokkaasti pienentävällä nykyaikaisella ohjelmalla, kuten mozjpegilla, WebP on enää 3–5 % pienempi.
Mitä tämä tarkoittaa sinulle? Jos lataat kuvat suoraan kamerasta, hyöty on selvä, mutta suurelta osin pienempien mittojen ja voimakkaamman pakkauksen ansiosta, ei pelkän tiedostomuodon. Jos joku on joskus pakannut JPG-tiedostosi kunnolla, pelkkä tiedostomuodon vaihto tuo vain vähän, ja enemmän saat irti mitoista.
On myös vielä uudempi AVIF-muoto. Samassa Cloudinaryn analyysissa se osoittautui noin 10–15 % pienemmäksi kuin WebP, mutta oletusasetuksilla sen tallentaminen kesti noin kymmenen kertaa kauemmin. Kaupassa, jossa on tuhansia kuvia, se on todellinen ero.
Minne WebP-kuvia voi lähettää ja minne ei
Tuotekuva ei päädy vain omaan kauppaasi. Lähetät sen myös Google Shoppingiin, muille kauppapaikoille ja joskus Amazoniin. WebP ei kelpaa kaikkialle.
| Missä | Kelpaako WebP |
|---|---|
| Oma WordPress-kauppasi | Kyllä, versiosta 5.8 alkaen, jos palvelin tukee WebP:tä |
| Google Merchant Center | Kyllä |
| Amazon | Luultavasti ei: se ei ollut sallittujen tiedostomuotojen listalla (tilanne vuonna 2024) |
| Tuotteiden tuonti WooCommerceen CSV-tiedostosta tai toisesta ohjelmasta | Kyllä, versiosta 7.7 alkaen |
Tästä syntyy yksinkertainen sääntö: säilytä alkuperäiset kuvat JPG- tai PNG-muodossa ja käytä WebP:tä kauppasi sivuilla. Älä muunna ainoaa kopiota, joka sinulla on.
Tukevatko asiakkaidesi selaimet WebP:tä?
Kyllä. Can I Use -palvelun elokuun 2026 tietojen mukaan noin 97 % maailmalla käytetyistä selaimista tukee WebP:tä täysin.
Safari on tukenut WebP:tä versiosta 14 lähtien. Versio julkaistiin syyskuussa 2020 yhdessä iOS 14:n kanssa. Mac-tietokoneilla tuki toimii kuitenkin vasta macOS 11 Big Surista alkaen. Vanhemmissa oppaissa yhä kiertävä väite ”Safari ei tue WebP:tä” on siis ollut vanhentunut jo vuosia. Myös Google-haku tukee virallisesti WebP-kuvia.
Mitä WordPress tekee puolestasi ja mitä ei
Heinäkuussa 2021 julkaistusta versiosta 5.8 alkaen WordPressin mediakirjastoon voi ladata WebP-kuvia, jos palvelin tukee tätä muotoa. WordPress ei kuitenkaan itse muunna JPG- tai PNG-tiedostojasi. Vuonna 2022 versioon 6.1 yritettiin lisätä toiminto, joka olisi luonut ladatuista JPG-tiedostoista automaattisesti WebP-versiot, mutta muutos peruttiin ennen julkaisua.
Näet WordPressin ohjausnäkymästä, pystyykö palvelimesi tallentamaan WebP-kuvia: Työkalut → Sivuston eheys → Tietoa → Mediahallinta. Etsi sieltä rivit ”GD-kirjaston tukemat tiedostotyypit” ja ”ImageMagick-kirjaston tukemat tiedostotyypit”. Jos jommassakummassa näkyy WEBP, kaikki on kunnossa.
Kaupassasi jo olevat kuvat pysyvät vanhassa muodossa, kunnes teet niille jotain. Vaihtoehtoja on kaksi.
- Yksittäiset kuvat muunnat ilmaiseksi WebP-muuntimella. Se toimii selaimessasi, joten tiedostot eivät päädy millekään palvelimelle.
- Kaikki kuvat kerralla muuntaa ConverterSEO-lisäosa. Se pakkaa kuvat kauppasi palvelimella ja vain kerran: kun lataat kuvan tai kun itse käynnistät kirjastossa jo olevien kuvien läpikäynnin. Ei koskaan silloin, kun asiakas selaa kauppaa.
Yksi tärkeä huomio. Pakkauksen jälkeen lisäosa korvaa mediakirjastossa olevan tiedoston WebP-versiolla ja poistaa alkuperäisen. Jos alkuperäiset kuvat ovat tallessa vain WordPressissä, ota niistä kopio ennen kuin aloitat, esimerkiksi lataamalla kansion wp-content/uploads tietokoneellesi webhotellin hallintapaneelin tiedostonhallinnan kautta.
Näin selvität, kannattaako vaihto
Testaa tuotesivu ja kategoriasivu PageSpeed Insightsilla. Jos työkalu ei nosta esiin korjattavia kuvia, WebP:stä saatava hyöty jää pieneksi.
Arvioi vaikutusta todellisten käyntien tiedoista, älä yhdestä mittauksesta, sillä yksittäinen testi antaa välillä paremman, välillä huonomman tuloksen. PageSpeed Insights näyttää nämä tiedot raportin yläosassa, jos sivulla on riittävästi kävijöitä. Google tarkistaa, latautuuko sivu nopeasti vähintään kolmessa neljäsosassa todellisista käynneistä.
Vielä yksi asia, jonka voi helposti tehdä väärin. Laiska lataus (lazy loading) lykkää kuvan lataamista siihen hetkeen, kun asiakas vierittää sivua kuvan kohdalle. Älä ota sitä käyttöön tuotteen pääkuvalle. Google kehottaa suoraan välttämään sitä, koska tällainen lataus viivästyttää sivun tärkeimmän elementin ilmestymistä. Laiska lataus on järkevä ratkaisu alempana sivulla oleville kuville.
Mistä aloittaa omassa kaupassasi
- Tarkista, paljonko tuotekuvasi painavat ja mitkä niiden mitat ovat: napsauta kuvaa mediakirjastossa ja katso kohdat ”Tiedostokoko” ja ”Koko” (jälkimmäinen kertoo mitat pikseleinä).
- Pienennä ne noin 1500 pikseliin eli kokoon, jota Google Merchant Center suosittelee tuotekuville.
- Tallenna ne WebP-muotoon niin, että ne painavat noin 130 kt.
- Katso muutamaa suurennettuna, erityisesti niitä, joissa on tasainen tausta.
- Säilytä alkuperäiset JPG-kuvat Amazonia ja muita kauppapaikkoja varten.
- Arvioi vaikutus todellisten käyntien, älä yksittäisen testin perusteella.
Jos kuvia on vain muutama, ilmainen WebP-muunnin riittää. Jos niitä on satoja, ConverterSEO-lisäosa muuntaa ne kaikki kerralla, ja pakkaus WebP-muotoon on siinä ilmaista ja rajatonta. Jotta samoilla kuvilla olisi myös hyvät tiedostonimet ja kuvaukset, lue artikkeli siitä, miten valmistelet kuvat hakukoneoptimointiin.