Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 14 Next »

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ää.

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

Sisältökuvat

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.

Tiedoston koko vs. kuvan koko

Tiedoston koko mitataan kilotavuina, Kt tai megatavuina, Mt (Englanniksi Kilobyte, Kb ja Megabyte Mb). Hyvänä muistisääntönä voi pitää, että verkkokauppaan ladattava kuva ei saa olla yli 500 Kt. Kuvankäsittelyohjelmalla voit kompressoida kuvia niin, että laatu pysyy hyvänä vaikka tiedostokoko pienenee.

Kuvan koko mitataan pikseleinä, px ja verkkokaupan mainospaikkoihin om jokaiseen omat suosituskoot. Sisällössä käytettävien kuvien koko voi vaihdella pienestä some-ikonista, osasto- tai tuoteryhmä kuvaan.

Kuvien kokoa suunniteltaessa on jo hyvä huomioida kuinka moneen kolumiin ja riviin sisältö aiotaan jakaa.

Mainosbannerien kuvakoot löydät tästä ohjeesta.

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.

Yleisiä kuva kokoja

Kokoero PNG ja JPG välillä

Vertailu kuvakokojen ja kolumnien kanssa verkkokaupan etusivulla

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

Kuvakoot osaston etusivulla

  • No labels