Kuvien käsittely kotisivuille

Ei ole lainkaan yhdentekevää, millaisena lataat valokuvat ja kuvituksen kotisivuillesi. Yleisin syy sivuston hitauteen on liian isot kuvatiedostot. On todella näppärää ottaa valokuva kameralla ja langattomasti ladata se tietokoneen kautta kotisivuille, mutta nykyaikaiset kamerat, myös kännyköissä, tuottavat isoja tiedostoja. Jos tiedostokoko huitelee 2-3 megatavun tasolla, jo yksikin kuva voi hidastaa sivulatausta niin paljon, että käyttäjä luulee sivustossa olevan vikaa eikä jaksa odottaa latautumista.

Kuvat vaikuttavat myös hakukoneoptimointiin. Sivuston latausnopeus on yksi tekijä. Lisäksi hakukoneet lukevat kuvista nimen, kuvatekstin ja vaihtoehtoisen eli alt-tekstin, koska ainakaan vielä ne eivät ymmärrä, mitä kuva esittää ilman, että se tekstinä kerrotaan.

Osa kotisivualustoista pakkaa kuvia automaattisesti, kun lataat ne sivuillesi. Mutta esimerkiksi WordPress ei suoraan tee pakkausta, vaan sitä varten on asennettava erillinen lisäosa. Pidän kuitenkin parempana käytäntönä opetella suoraan kuvien oikeaoppinen käsittely eikä laskea sitä lisäosan varaan.

Mikä on sopiva kuvakoko?

Ensin sinun tulee tietää millaisessa roolissa kuva on sivuillasi. Onko se koko ruudun leveä taustakuva, pieni kuva tekstin ohessa vai kentien verkkokaupan tuotekuva? Kuvan sijoituspaikka vaikuttaa sen tarvittavaan kokoon. Mikäli epäilet, että tulet käyttämään samaa kuvaa monessa eri tilanteessa, suosittelen tekemään siitä eri versiot näihin tarkoituksiin. Kuvakokoa on mahdollista pienentää koodinkin avulla (css-tyylitiedostossa), mutta se ei vähennä latausaikaa vaan päin vastoin pidentää sitä.

Kotisivujen sommittelun näkökulmasta voi pohtia, olisiko hyvä käyttää kaikissa kuvissa samaa kuvasuhdetta. Jos sivustollasi on kuvia 2:3, 4:5 ja neliskanttisina siitä tulee äkkiä sekava. Ellei se sitten ole harkiten tehty ratkaisu ammattitaitoiselta graafiselta tai käyttöliittymäsuunnittelijalta.

Esimerkkejä kotisivuille sopivista kuvien kokomäärityksistä

Kotisivujen sommittelussa keskitytään leveyteen, korkeus skaalautuu suhteessa sen mukaan. Pystykuvan osalta on kuitenkin hyvä miettiä myös maksimikorkeus.

Kun opettelet omille sivuillesi sopivat kuvakoot, osaat soveltaa niitä myös pystykuviin sekä poikkeustilanteisiin. Pikselit eivät ole rakettitiedettä, vaan tavallinen mittayksikkö siinä missä millimetritkin!

Täysleveä taustakuva

leveys 1920px – 2200px
Yli 2200px ei paranna kuvanlaatua niin merkittävästi, että ihmissilmä sitä juuri erottaisi.

Poikkeuksena erikoisleveät näytöt, joissa on vaikkapa 4000 pikseliä leveys, mutta nämä ovat harvassa. Jos kohderyhmäsi ei ole tietokonepelien suurkuluttajia tai ohjelmistokehittäjiä, todennäköisesti heillä ei ole noin leveää näyttöä käytössään. Statcounterin mukaan tällä hetkellä suosituin tietokoneen näyttökoko Suomessa on 1920x1080px.

Koko ruudun leveys kuvalle

Puolen näytön levyinen kuva

leveys 960px
Tämä on luonnollisesti puolet suositellusta täysleveästä kuvasta.

Kuva, joka on puolet ruudun leveydestä

Sisältöalueen levyinen kuva

leveys 1200px (tai muu sisältöalueelle määritetty leveys)
Sisältöalue on se osa sivusta, jossa teksti ja muu sisältö pysyy, jos sitä ei ole erikseen määritetty koko ruudun leveydelle. Esimerkiksi täällä omilla sivuillani sisältö pysyy 1200px sisällä, vaikka ruutu olisi kuinka leveä.

Sisältöalueen leveys kuvalle

Pienempi kuva sisältötekstin yhteydessä

leveys 500-800px
Jos sisältöalueen leveydeksi on määritetty 1200px, ei sisältökuvienkaan tarvitse olla yhtään sen isompia.

Puolet sisältöalueen leveydestä kuvakoko

Galleriakuvat

leveys 500-1000px
Galleriakuvien leveyteen vaikuttaa gallerian sommittelu; onko galleriassassi 1, 2 vai ehkäpä 3 kuvaa rinnakkain? Jos kuvat aukeavat isommaksi lightboxiin tai uuteen välilehteen, on ehkä tarpeen myös kuvan olla isompi kuin sisältöalueen mukaan muokattu koko.

Etenkin valokuvaajat mielellään laittavat kuviaan galleriaan isona, jotta asiakas näkisi kuvat hyvin, mutta kannattaa muistaa myös riski kuvien luvattomasta kopioinnista sivuston toimivuuden lisäksi.

Galleriakuvien koko

Tuotekuvat verkkokauppaan

leveys enintään 900px
Etenkin verkkokaupassa latausajat ja sivuston toimivuus nousee tärkeään arvoon. On muuten hyvä opetella jo heti kaupan alkutaipaleella käsittelemään kaikki tuotekuvat samanmuotoiseksi (kuvasuhde kaikissa sama). Yhdenmukaiset kuvat tasapainottavat tuoteluetteloita ja tekevät kaupastasi ammattimaisemman ja tyylikkäämmän.

Tuotekuvan leveys verkkokauppaan

Artikkelikuva blogiin

leveys riippuu kotisivujesi sommittelusta
Toisissa on artikkelikuva määritetty taustakuvamaisesti skaalautumaan koko ruudun leveydelle, jossain taas se on vaikkapa puolet sisältöalueesta.
Tässä blogissa artikkelikuvat näkyvät vain pääsivulla luettelossa, joten kuvien ei tarvitse olla koko ruudun levyisiä. Kuitenkin artikkelikuvaa käytetään jakokuvana sosiaaliseen mediaan, joten sen on hyvä olla 1200px leveä, jotta somealusta toistaa kuvan tarpeeksi tarkkana.

Kuvan tiedostokoon hallinta

Kuvan tiedostomuoto määrittää osaltaan kuvan tiedostokokoa. Lisäksi kuva on tärkeää pakata pienemmäksi. Suoraan kamerasta tai kännykästä tulevat kuvat ovat liian isoja kotisivuille! Pakkauksen voi tehdä suoraan kuvankäsittelyohjelmassa, netissä tai lisäosan kautta WordPressissä.

Suosittelen tutustumaan Pandaan eli Tinyjpg-palveluun. Tinyjpg nappaa kuvakoosta pois vielä Photoshopin Save for web-toiminnonkin jälkeen jopa 70% kuvalaadun kärsimättä. Palvelu pakkaa sekä jpg- että png-kuvia.

Kuvan resoluutio ei vaikuta tiedostokokoon. Kuvalaadun kannalta netissä ei kuitenkaan ole tarpeellista käyttää yli 72dpi resoluutiota. Jos kuitenkin kuvat on tarkoitettu tulostettavaksi, niin resoluutiossa pitää ottaa huomioon tulostuslaatu.

Erittäin näppärä työkalu kuvien koon muokkaukseen ja kuvarajaukseen on Canva. Voit luoda Canvassa valmiin pohjan kuvan käyttötarkoituksen mukaan (esim. sisältökuvat 700 x 560px) ja tuoda kaikki kuvasi tähän pohjaan. Sitten vain yksitellen tallennat kuvat sieltä koneellesi.

Huomaa, että Canva pakkaa kuvia jo sen verran reilusti, ettei niitä kannata enää viedä erikseen Tinyjpg -pakkaukseen, koska silloin kuvalaatu voi jo huonontua.

Sopiva tiedostomuoto kuvalle

Mahdollisia kuvamuotoja netissä ovat ainakin JPG, PNG, GIF, BMP, TIFF, WebP ja BPG. Useimmiten kotisivuille valitaan kuvamuodoksi jpg tai png.

JPG / JPEG

Jpg-muoto on hyvä valinta valokuviin. Jpj-kuva on tiedostokooltaan yleensä pienempi kuin vastaava kuva esimerkiksi png-muodossa, koska jpg-kuvan tallennustapa on häviöllinen ja se kadottaa informaatiota kuvasta. Jpg-kuvaan tulee aina nelikulmainen tausta; oletuksena valkoinen mikäli itse kuva ei täytä nelikulmaista aluetta.

jpg-kuva on neliskanttinen

PNG

Png-muoto on hyvä valinta logoihin ja poikkeavan muotoiseen kuvitukseen. Jos tarvitaan läpinäkyvyyttä tai jos kuvasta halutaan muun muotoinen kuin nelikulmainen, tiedostomuodoksi valitaan png. Png-kuvassa ei ole pakko olla taustaa ja siinä on myös mahdollista määrittää osittainen läpinäkyvyys.

png-kuvassa on läpinäkyvä tausta

Kuvan tiedostonimi, kuvateksti ja alt-kuvaus

Nimellä on väliä. Kuten mainitsin, hakukoneet lukevat kuvien tiedostonimiä ja alt- eli vaihtoehtoisia kuvauksia. Kuvateksti eli teksti kuvan vieressä tai alla on edellämainittujen tavoin tärkeä. Google ei ymmärrä mitä kuva esittää, jos sille ei sitä erikseen kerrota. Lisäksi on hyvä huomioida, että erilaiset käytön apuvälineet, kuten lukulaitteet, lukevat myös kuvien nimiä, kuvatekstejä ja alt-kuvauksia ja kertovat käyttäjälle, mitä kuva esittää.

Nimen, kuvatekstin ja alt-kuvauksen on hyvä täsmätä myös kuvan kanssa olevaan tekstisisältöön, jotta ne osaltaan parantavat hakukonelöydettävyyttä. On siis tärkeää kertoa kuvan sisältö, mutta myös hyödyntää mahdollisuus avainsanojen käyttöön.

Kuvan kuten muidenkin tiedostojen nimissä etenkin netissä on hyvä muistaa käyttää vain perusmerkkejä eli

  • kirjaimet a-z ilman erikoiskirjaimia
  • numerot 0-9
  • väliviiva – sanoja erottamassa

Pisteet, pilkut, muut erikoismerkit tai ääkköset eivät kuulu tiedostonimiin. Ne voivat sekoittaa ja jopa rikkoa sivustosi!

Yhteenveto

Muista noudattaa kuvienkin osalta ohjeita, jotta sivustosi tai kauppasi toimii nopeasti ja löytyy hakukoneista. Mieti, mitkä työkalut sopivat sinulle parhaiten ja noudata samaa kaavaa joka kerta, kun viet kuvia kotisivuille tai verkkokauppaan:

  1. Kuvan käyttötarkoitus määrää kuvan mitat
  2. Hallitse kuvan tiedostokokoa pakkauksella
  3. Päätä kuvalle sopiva tiedostomuoto
  4. Nimeä kuva ja anna sille sopiva alt-kuvaus (sekä kuvateksti) avainsanoja hyödyntäen

Haluatko tietää lisää?

Kerro muillekin:

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Laura Jalonen markkinoinnin vinkit

Vinkkipankissani käsittelen aiheita, joita käyn läpi lähes jokaisen uuden asiakkaan kanssa. Täältä löytää vinkkejä etenkin aloittavan pienyrityksen tai yhdistyksen markkinointiin, mutta monet seikat pätevät myös isompien ja kokeneempien yritysten kohdalla.

Laura Jalonen