Tuotekuvien ABC

Teimme tuotekuvista oman ohjeensa sen vuoksi, koska se on yksittäinen elementti, jolla on eniten vaikutusta koko sivustoon.

Tärkeitä ohjeita tuotekuviin liittyen

1. Kuvasuhde

Jotta varmistetaan, että verkkokauppa on tyylikäs ja kuvat näyttävät oikeilta, niin tuotekuvien kuvasuhde on tärkein muuttuja.

Yleisin kuvasuhde on 1:1, mutta myös 4:5 on yleistymässä (monet vaatekaupat käyttävät jo tätä kuvasuhdetta).

Kaikkien tuotekuviesi (sis. tuotekuva ja tuotekuvasto) tulee olla samassa kuvasuhteessa.

2. Kuvan tiedostokoko

Kuvan tiedostokoko on toinen tärkeä elementti. Yleisin syy hitaille verkkokaupoille on tiedostokooltaan suuret kuvat.

Tähtää aina alle 100 kt kokoiseen kuvaan. Mielellään jopa alle 50 kt.

100 - 200 kt ei ole vielä maailman loppu, mutta yli 200 alkaa näkymään jo selkeästi negatiivisesti.

HUOM! Tuotekuvaston kuvat saattavat monesti olla ns "fiiliskuvia" eli jotain muuta kuin valko/harmaataustainen kuva. Tarkkaile myös niiden kokoa. Tärkeämpi on kuitenkin olla lähes ehdoton tuotekuvan koon suhteen.

3. Kuvakoko

Tällä tarkoitetaan kuvan kokoa pikseleissä: kuinka leveä ja korkea kuva on.

On hyvä tähdätä aina myös samaan kuvakokoon, mutta tämä ei ole niin kriittinen kuin kuvasuhde. (esim. 600 x 600 px ja 1000 x 1000 px kuvien kuvasuhde on 1:1)

Suosittelemme kuvakokoa 1000 x 1000 px.

Jos hyödynnät Google ja/tai Facebookin dynaamisia tai tuoteluettelomainoksia, on kuvan koko oltava vähintään 600 x 600 px.

4. Tiedostotyyppi

Suosittelemme tekemään kuvat .jpg tai .png muodossa.

HUOM! Jos et tarvitse .png kuvaasi läpinäkyvyyttä, niin älä lisää sitä, sillä se kasvattaa tiedostokokoa. 

5. Taustaväri

Kuville tulisi designin nimissä valita aina samanvärinen tausta. Yleensä käytetään valkoista tai vaalean harmaata,

Facebook ja Google kuitenkin vaativat, että monissa mainosmuodoissa on käytössä valkoinen tausta. Kuvat, joissa on joku muu tausta saattavat mennä läpi, mutta he voivat milloin tahansa ilmoittaa, että mainoksia ei näytetä virheellisen tuotekuvan vuoksi.

HUOM! Yleensä kuville saadaan vaaleanharmaalta näyttävä taustaväri toimimalla niin, että kuvan taustaväri on valkoinen ja koodista tehdään koko kuvan päälle pieni tummennus.

6. Kuvan asettelu

Listasimme tämän viimeisenä, mutta tämä voisi olla jopa ensimmäisenä. Jos käytössäsi on 1000 x 1000 px kokoinen alue, niin yleensä hyvä tapa ei ole venyttää tuotekuvaa laidasta laitaan. Suosittelemme käyttämään alla näkyviä "apuviivoja", jotta kuvat toimivat hyvin.

Suosituksemme kuvien asetteluun on tämä:

  • Leveyssuunnassa kuva aina kuvan keskellä
  • Korkeussuunnassa kuvien tulee alkaa aina samalta korkeudelta. N. 10 % tyhjää kuvan alareunaan on hyvä
  • Päätä miten huomioit kuvissa tuotteiden eri todellisen koon (ovatko kaikki samankokoisia vai huomioidaanko todellista kokoa jo kuvissa). Korkeimmissa kuvissa kuvan yläreunaan kannattaa jättää myös n. 10 % tyhjää.

7. Kuvan nimeäminen & Alt-teksti

Kuvatiedosto kannattaa nimetä aina mahdollisimman selkeästi. Tiedostonimi kannattaa pitää yksinkertaisena eikä alkaa kirjoittamaan siihen mitään pitkää tarinaa tai avainsana-kikkailua. Hyvä esimerkki on {tuotteen-nimi}-{sku}.jpg tai pelkkä {tuotteen-nimi}.jpg.

Kuvan Alt-teksti laitetaan vasta verkkopalvelun hallinnassa eikä kuvien muokkausohjelmistossa. Tässäkään emme suosittele mitään avainsana-kikkailua vaan suosittelemme ajattelemaan sitä saavutettavuus näkökulmasta: miten kuvailet kuvaa henkilöille, jotka eivät pysty sitä näkemään. Esim. "Valkoinen Nike Jordan koripalllokenkä" on hyvä Alt-teksti kun taas "Edullinen hinta, laaja Nike valikoima, Valkoinen Nike Air Jordan koripallokenkä nopealla toimituksella ja takuulla"  on huono Alt-teksti.

Tuotekuvien hallinta WooCommercessa

WooCommercessa tuotekuvia hallitaan luonnollisesti tuotetasolla.
1. Tuotteiden hallintaan pääset vasemmasta sivupalkista: Tuotteet / Kaikki tuotteet.
2. Yksittäisen tuotteen avaat klikkaamalla tuotteen nimeä tai sen alla olevaa "Muokkaa" tekstiä.
3. Tuotteen hallinnasta oikean puolen sarakkeesta löydät alla olevan kuvan mukaisen kohdan, mistä löytyy "Tuotekuva" ja "Tuotekuvasto"

Tuotekuva = Tämä on tuotteen pääkuva. Se näkyy tuotekatalogeissa, hakutuloksissa ja ensimmäisenä kun tullaan tuotesivulle (toki tähänkin voidaan toteuttaa asiakaskohtaisesti eri ratkaisuita)

Tuotekuvasto = Tuotesivulla näkyvät muut kuvat. Hallintapuolella listan vasemmassa yläkulmassa näkyvä kuva on tuotesivulla toinen kuva jne. Näitä kuvia voidaan käyttää myös monella eri tavalla, kuten esittää ensimmäinen tuotekuvaston kuva tuotekatalogissa kun hiiri viedään tuotekuvan päälle.

Saitko tästä artikkelista vastauksen / apua ongelmaasi? Kiitos palautteesta Palautteen antamisessa oli ongelmia. Ole hyvä ja yritä uudestaan.

Tarvitsetko enemmän apua? Ota yhteyttä Ota yhteyttä