Ohjeet - WiseCMS: Artikkeleiden kuvien koko

Ohjeet WisePlatformin artikkeleiden kuvakokoihin.

Yhtenäinen ilme kuvilla

Kuvat ovat kotisivujen tärkein elementti, kun halutaan lisätä visuaalisuutta ja yhtenäistä linjaa. Sivuston aiheeseen sopivat sekä riittävällä resoluutiolla (72 ppi) varustetut laadukkaat kuvat ovat nettisivujen perusta. Kuvien on hyvä edustaa myös yhtenäistä linjaa läpi koko sivuston. Yhtenäisyyttä voi halutessaan luoda pienellä kuvankäsittelyllä lisäämällä kuviin esimerkiksi samaa sävymaailmaa.


Kuvakoko ja -suhde

Artikkeleiden kuvat

WisePlatformissa kotisivuille lisättävien kuvien suositusleveys on 1600 px. Tämän levyinen kuva toimii yhtä hyvin artikkelikuvissa kuin myös sliderissa. Toisin sanoen kuvat kannattaa aina kun mahdollista ladata julkaisujärjestelmään tämän levyisenä. Järjestelmän artikkelihallinnassa kuvien kokoon pystyy vaikuttamaan esimerkiksi palstaleveyksiä muuttamalla.

Kuvien korkeudessa kannattaa kiinnittää huomiota siihen, että kuvasuhteet säilyvät kautta linjan sivustolla samana. Mikäli vierekkäin on tekstiä ja kuva, kannattaa kuvan korkeutta peilata suhteessa vieressä olevan tekstin korkeuteen. Samoin, jos sivustolla on useampi kuva rinnakkain eri palstoissa.

Artikkeleissa suosittelemme usein käyttämään kuvia, joiden kuvasuhde on 16:9, sillä esimerkiksi niin sanotuissa artikkelinostoissa (artikkelin sisään lisätään sisältöeditorista artikkelielementti) järjestelmä skaalaa kuvan automaattisesti tähän kuvasuhteeseen. Tällöin kuva tulee artikkelinostoissa kokonaan näkyviin eikä reunoilta jää mitään pois. 1600 x 900 px kokoinen kuva on siis hyvä valinta sivuilla paikkaan kuin paikkaan.

Verkkokaupan kuvat

Verkkokaupan kuvissa toimii parhaiten neliön mallinen kuva, mieluiten kuvasuhteeltaan 800 x 800 px, jolloin kuvasta ei rajata mitään pois tai alkuperäistä ei venytetä.


Tallennusmuoto

Kuvakoon ja resoluution lisäksi on hyvä huomioida myös kuvan tallennusmuoto. Etenkin suurempana esitettävät kuvat, jotka sisältävät myös tekstiä, on suositeltavaa tallentaa mieluummin png-muodossa kuin jpeg:nä. Näin teksti säilyy tarkkana.