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.

Jos tiedosto on tallennettu koneelle:

Open

Kun viet hiiren kuvatiedoston päälle, näet kuvan mitat ja koon.

Tarkempaa tietoa kuvasta saat klikkaamalla hiiren oikealla kuvaa ja valisemalla Ominaisuudet.

Open

Yleiset -välilehdeltä näet kuvan koon kilotavuina.

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.

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 sisällön leveys on 1710px. Osastojen ja tuoteryhmien sisällön leveys taas on 1419px kun vasemmassa reunassa on tuotenavigaatio.