Päi­vi­tet­ty 13.9.2019

Valit­taes­sa kuvia yri­tyk­sen koti­si­vuil­le on muu­ta­mia tär­kei­tä asioi­ta, jot­ka pitää huo­mioi­da sekä käyt­tä­jien että haku­ko­nei­den näkö­kul­mas­ta.

Kuvien opti­moin­nin hyö­dyis­tä

Yri­tyk­sen koti­si­vuil­la on tär­ke­ää panos­taa teks­tien ja toi­min­nal­li­suuk­sien lisäk­si myös kuviin. Kuvien avul­la voi­daan vah­vis­taa asiak­kaan mie­li­ku­vaa yri­tyk­ses­tä, ker­toa yri­tyk­sen tuot­teis­ta ja pal­ve­luis­ta, teh­dä sivu­jen selaa­mi­ses­ta visu­aa­li­ses­ti miel­lyt­tä­vää ja kiin­nos­ta­vaa sekä vai­kut­taa haku­ko­nei­siin.

Jot­ta kuvat oli­si­vat mah­dol­li­sim­man toi­mi­via ja nii­den käy­tös­tä saa­tai­siin täy­si hyö­ty irti, kuvat oli­si syy­tä opti­moi­da sekä käyt­tä­jiä että haku­ko­nei­ta aja­tel­len. Tämä tar­koit­taa esi­mer­kik­si kuvien koon opti­moin­tia ja kuvien nimeä­mis­tä haku­ko­neys­tä­väl­li­ses­ti. Seu­raa­vak­si käy­dään läpi, mitä kaik­kea pitää ottaa huo­mioon ja miten opti­moin­ti käy­tän­nös­sä tapah­tuu.

Kuvien nimeä­mi­nen ja kuva­teks­tit

Google arvos­taa sel­lai­sia sivu­ja, jot­ka tar­joa­vat moni­puo­lis­ta ja hyvää sisäl­töä kävi­jöil­leen. Näin ollen sekä laa­duk­kaat teks­tit että kuvat vai­kut­ta­vat haku­ko­ne­nä­ky­vyy­teen posi­tii­vi­ses­ti.

Kuvien nimeä­mi­nen on olen­nai­nen osa haku­ko­neop­ti­moin­tia. Kuvat on hyvä nime­tä mah­dol­li­sim­man havain­nol­lis­ta­vik­si. Esi­mer­kik­si nume­ro­sar­jat eivät ker­ro kuvas­ta mitään ja sik­si kuvat kan­nat­taa­kin nime­tä ennem­min sen mukaan, mitä ne kuvaa­vat. Infor­ma­tii­vi­seen nimeen voi hyvin lisä­tä myös avain­sa­nan, jol­la kuvan halu­taan löy­ty­vän Googles­ta.

Lyhyet ja kuvaa­vat nimet toi­mi­vat par­hai­ten. Sen sijaan nume­roi­ta, lii­an pit­kiä tie­dos­to­ni­miä ja koko­nai­sia lausei­ta kan­nat­taa vält­tää.

Kuva­teks­tien lisää­mi­nen kuvan yhtey­teen pal­ve­lee käyt­tä­jiä. Kuva­teks­teis­sä ker­ro­taan jotain ext­raa kuvaan liit­tyen, eivät­kä ne sik­si ole vält­tä­mät­tö­miä. Kuva­teks­tit tule­vat kui­ten­kin lue­tuik­si jopa muu­ta teks­tiä toden­nä­köi­sem­min, joten nii­hin kan­nat­taa sijoit­taa sisäl­lön kan­nal­ta kes­kei­siä asioi­ta.

Pidät­kö luke­mas­ta­si? Haluai­sit­ko lisää kiin­nos­ta­vaa sisäl­töä?

Kuvien alt-teks­tit ja tit­let

Kuvan nimeä­mi­sen (ja mah­dol­li­sen kuva­teks­tin) lisäk­si on erit­täin kan­nat­ta­vaa lisä­tä kuvaan myös alt-teks­ti. Jos­kus kuvaa ei voi­da syys­tä tai toi­ses­ta näyt­tää, ja sil­loin käyt­tä­jä näkee niin kut­su­tun alt-teks­tin eli vaih­toeh­toi­sen teks­tin. Käy­tän­nös­sä alt-teks­tit pal­ve­le­vat esi­mer­kik­si haku­ko­nei­ta, jot­ka eivät osaa tul­ki­ta var­si­nai­sia kuvia. Alt-teks­tit ker­to­vat myös monien näkö­vam­mais­ten käyt­tä­mil­le ruu­dun­lu­kuoh­jel­mil­le, mitä kuvas­sa on.

Nimen­sä mukaan teks­ti on siis vaih­toeh­to kuval­le ja sik­si sen on olta­va mah­dol­li­sim­man infor­ma­tii­vi­nen. Alt-teks­tin pitäi­si toi­mia itse­näi­ses­ti kuvaa näke­mät­tä ja sik­si sen tuli­si­kin vas­ta­ta kysy­myk­seen: “Mitä kuva vies­tii?”.

Alt-teks­teis­sä pätee sama sään­tö kuin kuvien nimis­sä­kin: kuvaa­vat mut­ta lyhyet teks­tit toi­mi­vat haku­ko­neop­ti­moin­nin kan­nal­ta par­hai­ten.

Vaih­toeh­toi­sen teks­tin lisäk­si kuvaan voi­daan lisä­tä myös tit­le-teks­ti. Sii­nä mis­sä alt-teks­ti näkyy käyt­tä­jäl­le sil­loin, kun kuva ei näy, tit­le näkyy kuvan yhtey­des­sä.

Tit­le tulee näky­viin, kun käyt­tä­jä vie hii­ren kuvan pääl­le, ja sen avul­la voi­daan tar­jo­ta lisä­tie­toa kuvas­ta, jos niin halu­taan.

Kuva­tie­dos­ton koko ja sivun latausai­ka

Kuva­tie­dos­to­jen koko vai­kut­taa sivu­jen latausai­kaan ja käyt­tä­jäys­tä­väl­li­syy­teen sekä näin ollen myös haku­ko­ne­nä­ky­vyy­teen.

Kuvien pitää ehdot­to­mas­ti olla hyvä­laa­tui­sia ja tark­ko­ja. Kuva­tie­dos­to saat­taa kui­ten­kin olla tur­han suu­ri, jos kuva on todel­la tark­ka. Lii­an suu­ret kuvat latau­tu­vat hitaas­ti ja lisäk­si ne vie­vät pal­jon pal­ve­lin­ti­laa. Hitaas­ti latau­tu­vat kuvat ja sivut ärsyt­tä­vät kävi­jää ja saat­ta­vat ajaa hänet myös tie­hen­sä.

Hyvä nyrk­ki­sään­tö on, että kuvat ovat tie­dos­to­kool­taan mie­lel­lään noin 100 kt (kilo­ta­vua), kui­ten­kin aivan mak­si­mis­saan 200 kt. Näin var­mis­te­taan, ettei­vät sivuil­la vie­rai­le­vat pois­tu siel­tä aina­kaan sen vuok­si, että kuvat aukea­vat lii­an hitaas­ti.

Tie­dos­to­ko­koa voi­daan käte­väs­ti pie­nen­tää eri­lais­ten ilmais­ten ohjel­mien avul­la. Me esi­mer­kik­si käy­täm­me usein Tinypng.com-sivulta löy­ty­vää sovel­lus­ta, jon­ka avul­la png- ja jpg-kuva­tie­dos­tot voi­daan nopeas­ti ja hel­pos­ti muut­taa pie­nem­mik­si.

Työ­ka­lu­na se on var­sin help­po­käyt­töi­nen: sivul­le raa­ha­taan alku­pe­räi­nen suu­ri kuva­tie­dos­to, joka sit­ten auto­maat­ti­ses­ti pie­nen­ne­tään. Kuvan laa­dus­sa ei tapah­du sil­mil­lä havait­ta­vaa muu­tos­ta, mut­ta tie­dos­ton koko pie­ne­nee usein huo­mat­ta­vas­ti­kin.

Kuva­tie­dos­ton koko on help­po pie­nen­tää esi­mer­kik­si raa­ha­mal­la ja pudot­ta­mal­la tie­dos­to Tinypng.com-sivulle. TinyPNG muut­taa tie­dos­ton kokoa auto­maat­ti­ses­ti, ja voit lada­ta uuden pie­nem­män tie­dos­ton koneel­le­si.

Kuva­ko­ko (reso­luu­tio), siis pik­se­lei­den mää­rä leveys- ja pys­ty­suun­nas­sa pitää puo­les­taan vali­ta käy­tet­tä­vän alus­tan mukaan. Kuvan on olta­va vähin­tään yhtä leveä kuin sarak­keen, johon se tulee. Jos esi­mer­kik­si net­ti­si­vus­ton leveys on tark­kuu­del­taan 1000 px (pik­se­liä), tuli­si myös kuvan olla levey­del­tään vähin­tään yhtä leveä.

Omien kuvien hyö­dyn­tä­mi­nen

Yri­tyk­sen kan­nat­taa mah­dol­li­suuk­sien­sa mukaan käyt­tää omia kuvi­aan net­ti­si­vu­jen­sa kuvi­tuk­ses­sa. Yksi­löl­li­set ja ainut­laa­tui­set kuvat ovat yleen­sä yri­tyk­sen­sä näköi­siä ja kuvas­ta­vat sen toi­min­taa, pal­ve­lui­ta ja arvo­ja parem­min kuin genee­ri­set kuva­pank­ki­ku­vat.

Omien kuvien käy­tös­sä pitää toki huo­mioi­da, että nii­den tulee olla hyvä­laa­tui­sia ja ammat­ti­mai­sia. Epä­tar­kat kuvat luo­vat usein väis­tä­mät­tä nega­tii­vi­sen mie­li­ku­van yri­tyk­ses­tä. Sik­si on tär­ke­ää, että kuvat ottaa sii­hen har­jaan­tu­nut hen­ki­lö tai mie­lel­lään esi­mer­kik­si ammat­ti­ku­vaa­ja. Jos har­kit­set ammat­ti­ku­vaa­jan palk­kaa­mis­ta, käy vil­kai­se­mas­sa vin­kit ammat­ti­va­lo­ku­vaa­jan valin­taan.

Kuva­pank­kien käyt­tä­mi­nen

Mitä tahan­sa kuvia ei tie­ten­kään saa teki­jä­noi­keuk­sien takia käyt­tää ilman lupaa, joten kuva­pank­kien käyt­tä­mi­nen on var­tee­no­tet­ta­va vaih­toeh­to sil­loin, jos yri­tys­tä var­ten otet­tu­ja laa­duk­kai­ta kuvia ei syys­tä tai toi­ses­ta ole saa­ta­vil­la.

Aloit­te­le­va yri­tys, joka tar­vit­see uusil­le koti­si­vuil­leen pal­jon kuvia nopeas­ti ja edul­li­ses­ti voi hyö­tyä ilmais­ten kuva­pank­kien tar­jon­nas­ta. Toki kuvat on hyvä vaih­taa yksi­löl­li­sem­piin vaih­toeh­toi­hin heti, kun sel­lai­sia voi­daan ottaa omas­ta toi­min­nas­ta.

Kuva­pank­kien kuvat ovat usein laa­dul­taan hyviä, mut­ta pank­kien selaa­mi­seen ja sopi­vien kuvien etsi­mi­seen kan­nat­taa vara­ta run­saas­ti aikaa, jot­ta oli­si mah­dol­lis­ta löy­tää oman yri­tyk­sen brän­diin ja toi­min­taan sovel­tu­via kuvia.

Vali­tet­ta­van usein kui­ten­kin näkee suo­ma­lais­ten yri­tys­ten koti­si­vuil­la esi­mer­kik­si sel­lai­sia kuvia, jot­ka ovat sel­väs­ti peräi­sin aivan jos­tain muu­al­ta kuin kyl­mäs­tä poh­jo­las­ta. Ete­lä-euroop­pa­lai­nen kau­pun­ki­ku­va suo­ma­lai­sen jul­ki­si­vu­re­mont­te­ja tar­joa­van yri­tyk­sen sivuil­la ei vält­tä­mät­tä ole paras vaih­toeh­to.

Kuva­pank­kei­hin voi ostaa lisens­se­jä, mut­ta usei­ta hyviä löy­tyy myös ilmai­sek­si. Hyväk­si havait­se­miam­me ilmai­sia kuva­pank­ke­ja ovat esi­mer­kik­si Unsplash.com, Pexels.com ja Pixabay.com.

Yhteen­ve­to­na

Älä siis arkai­le käyt­tää moni­puo­li­ses­ti kuvia yri­tyk­se­si koti­si­vuil­la, mut­ta muis­ta kui­ten­kin paka­ta kaik­ki tie­dos­tot pie­nem­mik­si esi­mer­kik­si ilmai­sen Tinypng.com-sivuston avul­la. Muis­ta nime­tä kuvat yti­mek­kääs­ti ja infor­ma­tii­vi­ses­ti. Kir­joi­ta myös alt-teks­tit, jot­ka näky­vät sil­loin, kun kuvat eivät. Ilmai­sis­ta kuva­pan­keis­ta löy­tyy hyviä kuvia, mut­ta yksi­löl­li­ses­ti yri­tys­tä var­ten ote­tut kuvat toi­mi­vat usein parem­min.