Tuotekuvat Shopifyssa: näin teet kuvat, jotka myyvät eivätkä hidasta kauppaa

Verkkokaupassa asiakas ei voi ottaa tuotetta käteen. Kuva tekee sen työn. Baymardin verkkokauppatutkimuksessa 56 % testikäyttäjistä aloitti tuotesivulla katsomalla kuvia, ennen otsikkoa tai kuvausta, ja 42 % yritti päätellä tuotteen koon pelkistä kuvista.

Samat kuvat tekevät töitä myös kaupan ulkopuolella. Google Shopping, Googlen kuvahaku sekä Facebookin ja Instagramin katalogimainokset käyttävät kaupan omia tuotekuvia. Siksi kannattaa tehdä kuvat kerralla niin, että ne kelpaavat kaikkialle. Tähän oppaaseen on koottu Shopifyn, Googlen ja Metan ohjeet yhteen, ja lopussa on tarkistuslista, jonka voit antaa kuvaajalle tai käydä itse läpi.

Koko, kuvasuhde ja tiedostomuoto

Shopify suosittelee neliön muotoisille tuotekuville kokoa 2048 × 2048 pikseliä. Kuva saa olla enintään 5000 × 5000 pikseliä ja alle 20 megatavua. Shopify tekee jokaisesta kuvasta itse pienemmät versiot puhelimille, tietokoneille ja kokoelmasivuille ja valitsee jokaiselle selaimelle sopivan tiedostomuodon. Kuvia ei siis tarvitse pienentää itse ennen lataamista.

Tiedostomuodoksi Shopify suosittelee tuotekuville ensisijaisesti PNG:tä ja sen jälkeen JPEG:iä. Ne kelpaavat myös kaikkiin tuotesyötteisiin.

Tärkeämpää kuin tarkka pikselimäärä on se, että kaikki päätuotekuvat ovat samassa kuvasuhteessa. Shopifyn mukaan kokoelmasivulla vierekkäin näkyvät kuvat näkyvät eri kokoisina, jos niiden muoto vaihtelee. Silloin tuotteiden nimet ja hinnat hyppivät eri korkeuksille, ja sivu näyttää keskeneräiseltä.

• Valitse yksi muoto koko kauppaan. Neliö (1:1) sopii useimmille tuotteille ja toimii sellaisenaan myös syötteissä. Pystykuva (esimerkiksi 4:5) sopii vaatteille ja huonekaluille.
• Rajaa kaikki päätuotekuvat samaan muotoon jo ennen lataamista, ja jätä tuotteen ympärille joka kuvassa sama määrä tilaa.
• Monessa teemassa voit pakottaa kokoelmasivun kuvat samaan muotoon teemaeditorista. Rajaus voi kuitenkin leikata tuotteen reunoja, joten yhtenäinen lähtömateriaali on paras ratkaisu.

Mihin kuva menee	Vähintään	Suositus	Yläraja
Shopify-kauppa	–	2048 × 2048 px (neliö)	5000 × 5000 px, alle 20 Mt
Google Merchant Center	500 × 500 px (pakollinen 31.1.2027 alkaen)	vähintään 1500 × 1500 px	64 megapikseliä, 16 Mt
Metan katalogi (Facebook, Instagram)	500 × 500 px, JPEG tai PNG	–	8 Mt

Kun teet kuvat 2048 × 2048 pikselin kokoisina ja alle 8 megatavun tiedostoina, sama kuva kelpaa kauppaan, Googleen ja Metaan.

Rajaus ja tausta

Pääkuvan tehtävä on näyttää tuote selvästi. Googlen ohjeiden mukaan tuotteen pitää täyttää 75–90 % kuva-alasta. Silloin tuote erottuu myös pienenä kuvana hakutuloksissa ja kokoelmasivulla.

• Yhtenäinen, rauhallinen tausta kaikissa päätuotekuvissa. Valkoinen tai vaalea neutraali tausta on varma valinta.
• Ei tekstejä, kehyksiä eikä logoja kuvan päällä. Google hylkää tuotteen, jonka kuvassa on mainostekstiä, hinta tai toimitustieto, vesileima, viivakoodi tai jälkikäteen lisätty logo. Näytä ale-merkit ja tarrat teeman avulla, jolloin itse kuva pysyy puhtaana.
• Vain myytävä tuote. Pääkuvassa ei saa näkyä muita tuotteita, jotka eivät kuulu samaan pakettiin. Somisteet sopivat lisäkuviin.
• Ei paikkamerkkejä. Pelkkä logo, ”kuva tulossa” tai yksivärinen ruutu tuotekuvana johtaa Googlessa hylkäykseen.

Taustan voi siistiä Shopifyssa itse. Kun avaat kuvan hallintapaneelissa, Shopifyn kuvaeditorilla (Shopify Magic) voit vaihtaa taustan yhtenäiseksi väriksi tai läpinäkyväksi ja tehdä uuden taustan lyhyen kuvauksen perusteella. Pidä tuote kuitenkin täsmälleen sellaisena kuin se on. Kuva, joka näyttää tuotteen paremmalta kuin todellisuudessa, tuo palautuksia eikä myyntiä.

Jos käytät tekoälyllä tehtyjä tai muokattuja kuvia, älä poista kuvatiedostosta tietoa siitä, että kuva on tehty tekoälyllä. Google edellyttää, että tieto säilyy Merchant Centeriin lähetetyissä kuvissa. Shopify lisää tekoälyllä tehtyihin kuviin näkymättömän vesileiman.

Mitä kuvia yhdelle tuotteelle kannattaa tehdä

Yksi kuva valkoisella taustalla ei riitä vastaamaan asiakkaan kysymyksiin. Hyvä tuotesivu näyttää ainakin nämä:

1. Pääkuva yhtenäisellä taustalla, tuote edestä tai siitä kulmasta, josta se tunnistetaan.
2. Muut kuvakulmat: sivu, takaosa, pohja tai sisäpuoli, jos niillä on merkitystä ostopäätökselle.
3. Kuva käytössä tai ympäristössä, josta näkee koon: tuoli huoneessa, laukku olalla, muki kädessä. Baymardin mukaan 28 % suurista verkkokaupoista ei näytä tuotetta yhdessäkään kuvassa niin, että koon voisi päätellä.
4. Lähikuva materiaalista, saumasta tai yksityiskohdasta, joka erottaa tuotteen halvemmasta. Kuvan pitää olla niin tarkka, että se kestää zoomauksen.
5. Pakkaus tai mukana tulevat osat, jos asiakas haluaa tietää, mitä laatikossa on.
6. Video tai 3D-malli, jos tuote on parempi nähdä liikkeessä. Shopify ottaa videoita enintään 10 minuuttia ja 1 Gt, ja Shopifyn omat Online Store 2.0 -teemat ja Horizon-teemat näyttävät sekä videot että 3D-mallit.

Järjestyksellä on väliä. Ensimmäinen kuva näkyy kokoelmasivulla ja menee yleensä tuotesyötteeseen pääkuvaksi, joten se on aina puhdas tuotekuva. Käyttökuvat ja lähikuvat tulevat sen jälkeen.

Anna tiedostolle kuvaava nimi ennen latausta

Google lukee myös kuvan tiedostonimen. Sen ohjeiden mukaan lyhyt, kuvaava nimi (Googlen esimerkissä my-new-black-kitten.jpg) on parempi kuin IMG00023.JPG. Nimeä kuvat siis ennen lataamista, esimerkiksi villaneuletakki-harmaa-edesta.jpg.

• Käytä pieniä kirjaimia ja väliviivoja. Ääkköset kannattaa vaihtaa (ä → a, ö → o), jotta osoite pysyy siistinä.
• Shopifyn mukaan nimeä ei kannata lopettaa sanoihin kuten small, medium, large tai thumb, koska kuvapalvelu voi tulkita ne kokopyynnöksi.
• Jo ladatun kuvan nimen voi vaihtaa kohdassa Content > Files (Sisältö > Tiedostot) muuttamalla tiedoston URL-tunnistetta. Vanha osoite lakkaa silloin toimimasta, joten tee tämä vain kuville, joihin ei linkitetä muualta.

Kirjoita jokaiseen kuvaan alt-teksti

Alt-teksti on lyhyt kuvaus kuvasta. Ruudunlukijaa käyttävä asiakas kuulee sen kuvan kohdalla, se näkyy kuvan tilalla, jos kuva ei lataudu, ja sen avulla Google ymmärtää, mitä kuvassa on.

Näin lisäät sen Shopifyssa:

1. Avaa Products (Tuotteet) ja valitse tuote.
2. Klikkaa tuotekuvaa, jolloin kuvan esikatselu aukeaa.
3. Valitse Add alt text (Lisää vaihtoehtoinen teksti), kirjoita teksti ja tallenna.

Shopify suosittelee enintään 125 merkkiä, ja yläraja on 512. Googlen esimerkissä heikoin alt-teksti on puuttuva ja seuraavaksi heikoin hakusanoilla täytetty. ”Pentu” on parempi, ja paras on ”Dalmatialaispentu leikkii noutoleikkiä”. Hyvä alt-teksti siis kertoo, mitä juuri tässä kuvassa näkyy, ja erottaa sen saman tuotteen muista kuvista.

Heikko	Parempi
IMG_4821.jpg	Harmaa villaneuletakki puisilla napeilla, edestä
Neuletakki	Neuletakin hihansuu ja ribbineule lähikuvassa
villatakki neule osta halpa	Malli seisoo neuletakki päällä, takki ulottuu lantiolle

Jos kuvia on satoja, alt-tekstit voi tuoda tuote-CSV:n Image Alt Text -sarakkeessa, ja Shopify voi ehdottaa tekstiä kuville, joilta se puuttuu. Lue ehdotus aina läpi ennen hyväksymistä.

Liitä jokaiseen variaatioon oma kuva

Kun asiakas valitsee värin, hän haluaa nähdä juuri sen värin. Jos kuva ei vaihdu, hän epäröi tai tilaa väärän.

1. Avaa tuote kohdasta Products (Tuotteet).
2. Klikkaa Variants-osiossa kuvakuvaketta variaation vieressä.
3. Valitse kuva tuotteen kuvista tai lataa uusi ja tallenna.

Jokaiseen variaatioon voi liittää yhden kuvan. Lisää saman värin muut kuvat galleriaan peräkkäin. Moni teema näyttää silloin asiakkaalle valitun värin kuvat ensin.

Variaatiokuvat ovat tärkeitä myös syötteissä. Google pyytää jokaiselle variaatiolle oman kuvan, jossa näkyy vain se variaatio. Ilman variaatiokuvaa vihreä takki voi näkyä Google Shoppingissa harmaan takin kuvalla.

Tuotekuvat Google Shoppingissa ja Metan katalogissa

Tuotesyöte on lista kaupan tuotteista, jonka Shopify tai syötesovellus lähettää Googlelle (Merchant Center) ja Metalle (Facebookin ja Instagramin katalogi). Kuvat kulkevat syötteessä linkkeinä kaupan omiin kuviin. Siksi syötteen kuvat ovat juuri niin hyviä kuin kaupan kuvat.

Kyllä, samaan tuotteeseen voi liittää useita kuvia. Syötteessä on yksi pääkuva ja sen lisäksi lisäkuvia:

Kanava	Pääkuva	Lisäkuvia enintään	Huomioitavaa
Google Merchant Center	puhdas tuotekuva	10	Erillinen kenttä käyttökuville (lifestyle). Lisäkuvat samoin säännöin kuin pääkuva.
Metan katalogi	JPEG tai PNG, vähintään 500 × 500 px	20	Vaihdetulle kuvalle tarvitaan uusi osoite, muuten Meta ei huomaa muutosta.

Lisäkuviin sopivat muut kuvakulmat, tuote käytössä, lähikuva yksityiskohdasta, paketin osat ja pakkaus. Googlen mukaan liian pienet lisäkuvat eivät johda hylkäykseen, mutta niitä ei näytetä.

Googlen pääkuvan säännöt kannattaa pitää mielessä jo kuvatessa:

• Tuote täyttää 75–90 % kuvasta.
• Ei mainostekstiä, hintoja, ale-merkkejä, vesileimoja, viivakoodeja eikä jälkikäteen lisättyjä logoja.
• Ei kehyksiä eikä paikkamerkkikuvia.
• Pakkauksessa myytävästä tuotteesta näkyy pakkaus kolmiulotteisena, ei pelkkä etupuoli.
• Kuvan pitää olla tarkka. Sumeasta, pikselöityneestä tai pienestä kuvasta Merchant Center antaa ilmoituksen ”Low image quality”. Google ilmoittaa alle 500 × 500 pikselin kuvista varoituksella, ja 31.1.2027 alkaen niitä ei enää hyväksytä.

Kun Shopifyssa vaihdat tuotteen kuvan uuteen, uusi kuva saa uuden osoitteen, ja syöte päivittyy seuraavalla synkronoinnilla.

Tuotekuvat tekoälypalveluissa

Kun asiakas pyytää ChatGPT:ltä tai Googlen AI Modelta tuotesuositusta, vastauksessa on yhä useammin tuotekortteja kuvineen. Kuvalla voi myös hakea: Googlen mukaan Google Lensillä tehdään lähes 20 miljardia kuvahakua kuukaudessa, ja noin joka viides niistä liittyy ostamiseen.

Tekoälypalvelut eivät keksi tuotekuvia itse. Ne käyttävät samoja kuvia kuin kauppasi ja syötteesi:

• ChatGPT saa Shopify-kauppojen tuotteet Shopify Catalogin kautta. OpenAI:n tuotesyötteessä pääkuva on pakollinen tieto, ja sen pitää näyttää juuri kyseinen variaatio. Lisäkuvat ovat vapaaehtoisia.
• Googlen AI Mode hakee tuotteet Googlen tuotetietokannasta (Shopping Graph), jossa on Googlen mukaan yli 50 miljardia tuotetta. Googlen ohjeen mukaan Merchant Center -syöte auttaa tuotteita näkymään tekoälyn vastauksissa.
• Microsoft Copilot ja muut palvelut saavat Shopify-kaupan tuotteet Shopifyn Agentic-myyntikanavan kautta.

Siksi kaikki tämän oppaan hyvät käytännöt toimivat myös tekoälyssä:

• Variaatiokuva: kun jokaisella värillä on oma kuvansa, vihreää takkia kysyvä näkee vastauksessa vihreän takin.
• Väri ja materiaali myös tekstinä: tekoäly ei voi luottaa siihen, että se tulkitsee kuvasta värin oikein. Kirjoita väri variaation nimeen ja tuotteen ominaisuuksiin, niin kuva ja teksti kertovat saman asian.
• Alt-teksti ja tiedostonimi: niiden avulla Google ymmärtää, mitä kuvassa on.
• Puhdas, tarkka kuva: tuotekortti tekoälyn vastauksessa on pieni. Kun tuote täyttää kuvan eikä kuvassa ole tekstejä, tuote tunnistetaan pienenäkin.
• Koko ja laatu: sama 2048 × 2048 pikselin kuva kelpaa kaikkialle.

Kuvat eivät yksin ratkaise

OpenAI kertoo, että ChatGPT valitsee näytettävät tuotteet itse eivätkä ne ole mainoksia. Järjestykseen vaikuttavat muun muassa saatavuus, hinta, laatu ja se, onko myyjä tuotteen valmistaja tai päämyyjä. ChatGPT voi näyttää julkisiin arvosteluihin perustuvan yhteenvedon, ja OpenAI:n tuotesyötteessä on omat kentät tuotteen arvosanalle ja arvostelujen määrälle. Kerää siis tuotearvosteluja kaikilta ostajilta, älä vain tyytyväisiltä, ja pidä hinnat ja saatavuus ajan tasalla.

Tuotetiedot, rakenteinen data, UKK-tekstit ja Shopify Catalog käydään läpi artikkelissa Näin Shopify-kauppasi löytyy ChatGPT:stä ja Googlen AI-hausta.

Anna ensimmäisen kuvan latautua heti

Tuotesivun pääkuva on yleensä se, jota asiakas odottaa, ja juuri sen perusteella Shopify ja Google mittaavat, kuinka nopeasti sivu aukeaa. Kaksi asiaa ratkaisee:

• Ensimmäinen kuva latautuu heti, ja sivun alempana olevat kuvat vasta, kun asiakas vierittää niihin. Tavallinen virhe on, että teema viivyttää myös pääkuvaa samalla tavalla kuin alaosan kuvia.
• Puhelimeen ladataan pieni kuva ja isolle näytölle iso. Shopify tekee tämän itse, kun teema käyttää sen omia kuvatoimintoja.

Älä myöskään häivytä pääkuvaa näkyviin animaatiolla. Se näyttää hienolta, mutta asiakas odottaa kuvaa pidempään. Kaupan nopeuden mittaamisen ja muut tavalliset hidastajat käymme läpi artikkelissa Miksi Shopify-kauppa on hidas?.

Kehittäjälle: päätuotekuvaan loading="eager" ja fetchpriority="high", muihin loading="lazy"; kuvat image_url- ja image_tag-suodattimilla (widths ja sizes), ja kuvan paikka varataan leveydellä ja korkeudella, jotta sisältö ei hypi.

Näin Google löytää kuvasi

Googlen kuvahaku tuo kävijöitä, kun kuvat on tehty sen ohjeiden mukaan. Shopifyn omat teemat hoitavat suurimman osan tästä valmiiksi, mutta muokatussa teemassa kannattaa tarkistaa nämä:

• Kuva on oikea kuva, ei taustakuva. Google ei indeksoi kuvia, jotka on asetettu sivulle taustaksi.
• Kuva on lähellä tekstiä, joka kertoo siitä. Tuotekuva tuotteen nimen ja kuvauksen vieressä on Googlelle selvä.
• Kuva on tarkka. Googlen mukaan tarkat kuvat houkuttelevat käyttäjiä enemmän kuin sumeat.
• Tuotesivun rakenteinen data sisältää kuvan. Shopifyn omat teemat lisäävät tuotesivulle tuotteen tiedot Googlelle luettavassa muodossa. Muokatussa teemassa tarkista, että kuva on mukana.

Kehittäjälle: kuvat <img>-elementteinä (ei CSS:n background-image), srcset ja sizes, ja Product-rakenteisessa datassa image-kenttä.

Tuotekuvien tarkistuslista

Tämän listan voit antaa kuvaajalle tai käydä läpi ennen uuden tuotteen julkaisua.

Ennen kuvaamista

• Päätä yksi kuvasuhde koko kauppaan (yleensä neliö 1:1) ja yksi tausta päätuotekuville.
• Tee kuvauslista jokaiselle tuotteelle: pääkuva, muut kulmat, käyttökuva, kokovertailu, lähikuva, pakkaus.
• Kuvaa jokainen väri ja malli erikseen.

Kuvatessa

• Tuote täyttää 75–90 % kuvasta, ja tilaa jää joka reunaan saman verran.
• Valo on tasainen ja värit oikeat, jotta tuote näyttää samalta kuin paketista avattuna.
• Lähikuvat ovat niin tarkkoja, että ne kestävät zoomauksen.
• Vähintään yhdestä kuvasta näkee tuotteen koon.

Ennen latausta

• Kuvat noin 2048 × 2048 pikseliä, alle 8 megatavua, PNG tai JPEG.
• Kaikki päätuotekuvat samassa kuvasuhteessa.
• Ei tekstejä, hintoja, ale-merkkejä, kehyksiä, vesileimoja eikä lisättyjä logoja.
• Tiedostonimet kuvaavia: villaneuletakki-harmaa-edesta.jpg.
• Tekoälyllä muokatuissa kuvissa tuote näyttää samalta kuin todellisuudessa, ja tieto tekoälystä on tallessa.

Shopifyssa

• Ensimmäinen kuva on puhdas tuotekuva, sen jälkeen muut kulmat, käyttökuvat ja lähikuvat.
• Jokaisessa kuvassa oma, enintään noin 125 merkin alt-teksti.
• Jokaisella variaatiolla oma kuva, ja saman värin kuvat galleriassa peräkkäin.
• Video tai 3D-malli, jos tuote on parempi nähdä liikkeessä.

Syötteissä

• Merchant Centerissä ei ilmoituksia kuvista (esimerkiksi ”Low image quality”).
• Pääkuvan lisäksi lisäkuvia: Googleen enintään 10, Metaan enintään 20.
• Jokaisella variaatiolla oma kuva myös syötteessä.

Tekoälypalveluissa

• Jokaisella variaatiolla oma kuva, ja väri myös variaation nimessä ja ominaisuuksissa.
• Shopifyn Agentic-kanava ja Merchant Center -syöte käytössä.
• Tuotearvosteluja kerätään kaikilta ostajilta, ja hinnat ja saatavuus ovat ajan tasalla.

Teemassa

• Sivun ensimmäinen kuva latautuu heti, muut vasta tarvittaessa.
• Puhelimeen ladataan pieni kuva, isolle näytölle iso.
• Kokoelmasivun kuvat ovat samassa muodossa, eikä sivu hypi latautuessa.
• Ale-merkit ja tarrat tulevat teemasta, eivät kuvasta.

Lähteet: Shopifyn ohjekeskuksen tuotekuvien tyypit ja koot, alt-tekstin lisääminen, kuvat variaatioille, tiedostojen hallinta ja Shopify Magicin kuvatyökalut; shopify.devin teemojen suorituskykyohje; Googlen kuvien hakukoneoptimointi, Merchant Centerin pääkuva, lisäkuvat ja heikkolaatuiset kuvat; Metan katalogin kentät; OpenAI:n ohjeet ostoksista ChatGPT:ssä ja tuotesyötteestä; Googlen ohje tekoälyhakuun optimoinnista, AI Moden ostosominaisuudet ja Google Lensin luvut sekä Baymard Instituten tutkimus tuotekuvista, joista näkee koon. Osa lähteistä on englanniksi.

Mietitkö, miksi juuri sinun tuotteesi eivät näy Google Shoppingissa tai miksi tuotesivu aukeaa hitaasti? Kysy Virralta alta.