Tässä artikkelissa käymme läpi minkä kokoisia kuvia kannattaa käyttää verkkokaupan sisällössä. Kuvat elävöittävät verkkokauppaa, luovat tunnelmaa ja vahvistavat brändiviestiäsi. Jokainen kuva tuo kuitenkin sivuillesi lisää sisältöä. joka vaikuttaa suoraan siihen, kuinka nopeasti verkkokauppa latautuu. Mitä suurempia kuvia, sitä kauemmin sivun latautuminen kestää.
Graafikkomme huomioivat tämän aina verkkokaupan suunnittelu vaiheessa, oli sitten kyse uuden verkkokaupan avaamisesta tai verkkokaupan tuoreutuksesta. Jos teet sisältöä tai mainosbannereita itse, ota huomioon seuraavat seikat.
Tuotekuvat
Verkkokaupassa tuotteiden kuvat tulevat suoraan ERP:stä, joten tuotekuvien koko ja kuvasuhde kannattaa miettiä jo tuotekuvia tehtäessä. Tuotekuvista voit luke lisää täältä Tuote - Kuvat -välilehti
Kuvakoko
Tiedoston koko vs. kuvan koko
Miten tarkistan kuvakoon?
Jos tiedosto on tallennettu koneelle:
Tarkempaa tietoa kuvasta saat klikkaamalla hiiren oikealla kuvaa ja valisemalla Ominaisuudet.
Tiedostoformaatti ja kuvan nimeäminen
Mitä tiedostoformaattia voin käyttää verkkokaupan sisällössä?
Yleisohjeena voi käyttää JPG ja PNG -tiedostoja. Jos kuvassa pitää olla läpinäkyvä tausta, tällöin kuvan pitää olla PNG-muodossa. Yleisesti PNG on suurempi kokoinen kuin JPG ja JPG on varsin hyvä kuvaformaatti verkkokaupan sisältöön käytettäväksi.
Jos käytät sisällössä graafisia ikoneita, nämä ovat yleensä PNG-muodossa.
Verkkokaupan logot graafikomme tekevät vektorimuodossa.
Myös GIF-tiedostoja voi käyttää sisällössä ja mainosbannereissa, mutta niiden kanssa kannattaa olla tarkkana, eikä niitä kannata käyttää yltäkylläisesti.
Muista nimetä kuva
Jos kuvasi nimi on esim. image2.jpg, tällöin hakukoneet eivät pysty tulkitsemaan kuvaa.
Optimoinnin kannalta on siis tärkeää, että nimeät kuvat tuoteryhmän tms. mukaan. Älä kuitenkaan käytä ääkkösiä tai erikoismerkkejä.
Lisää vaihtoehtoinen teksti eli alt-teksti
Hakukoneet ymmärtävät myös kuvaan liitetyn alt-tekstin ja tilanteessa, jossa kuva ei jostain syystä lataudu, näkyy ruudulla alt-teksti. Se kannattaa siis kirjoittaa niin, että tekstistä käy ilmi sama asia kuin kuvasta.
Alt-tekstin ei tarvitse vastata kysymykseen ”mitä kuvassa on?” vaan ”mitä kuvasta pitäisi ymmärtää?”
Julkisen puolen toimijoita koskee lisäksi saavutettavuusdirektiivi, joka astui voimaan 2019.
Esimerkkejä erilaisista verkkokaupan etusivuista
Tärkeimpien tuotemerkkilogojen nostaminen etusivulla
Logokuvien mitat ovat 170 x 50 px.
Etusivun sisältötekstin vieressä oleva kuva
Kuvan mitat ovat 400x250 px.
Etusivulla kolme osastoa, pää- tai tuoteryhmää vierekkäin
Kuvan mitat ovat 405x250 px, mutta sen kuvasuhteet muuttuvat kun näytön muoto muuttuu.
Samat kuvat näyttävät siis tältä, jos etusivu katsellaan tabletilta:
Etusivulla neljä osastoa, pää- tai tuoteryhmää vierekkäin
Kuvan mitat ovat 400x400 px.
Tässä on käytetty myös neliön mallisia (1:1) kuvia, joita on kolmessa sarakkeessa. Kuvien koko 500x500 px.
Yleisien kuvakokojen vertailu
Kokoero PNG ja JPG välillä
Verkkokaupan etusivun leveys, osaston ja tuoteryhmien sisällön leveys
Verkkokaupan etusivun sisällön leveys on 1710px. Osastojen ja tuoteryhmien sisällön leveys taas on 1419px kun vasemmassa reunassa on tuotenavigaatio.
Kuvakoot verkkokaupan etusivulla
