Näin otat verkkosivuille sopivat kuvat: tärkeät ohjeet yrityksille ja valokuvaajille
- DigiLick
- 1 tunti sitten
- 9 min käytetty lukemiseen
Mitä valokuvaajan kannattaa huomioida kotisivuja varten? Näin saat verkkosivuista ammattimaiset ja toimivat
Hyvät kotisivut eivät synny pelkästään teknisestä toteutuksesta tai hyvistä teksteistä. Yksi tärkeimmistä asioista verkkosivuilla ovat laadukkaat kuvat. Usein asiakkaan ensimmäinen mielikuva yrityksestä syntyy juuri kuvien perusteella jo ennen kuin hän ehtii lukea palveluista tai hinnoista mitään.
Moni yritys panostaa valokuvaukseen, mutta silti lopputulos ei aina toimi verkkosivuilla parhaalla mahdollisella tavalla. Syynä ei yleensä ole huono valokuvaus, vaan se, että kuvia ei ole suunniteltu verkkosivukäyttöä varten. Kotisivuille sopivissa kuvissa täytyy huomioida esimerkiksi responsiivisuus, eri näyttökoot, hakukoneystävällisyys, sivuston nopeus sekä se, miten kuvia käytetään sivuston rakenteessa. Sama kuva voi näyttää hyvältä sosiaalisessa mediassa, mutta toimia verkkosivuilla yllättävän huonosti.
Tässä blogissa selitetään tärkeimmät asiat, jotka yrityksen ja valokuvaajan kannattaa huomioida ennen kuvausten aloittamista.
Ota sekä pysty- että vaakakuvia
Kotisivuilla vaakakuvat ovat usein kaikkein hyödyllisimpiä, vaikka moni yritys ajattelee ensimmäisenä pystykuvia esimerkiksi Instagramia varten. Vaakakuvia tarvitaan usein etusivun isoissa pääkuvissa, bannereissa, palvelusivujen taustakuvissa, referensseissä, blogeissa ja uutiskirjeissä.
Pystykuvillekin on oma paikkansa. Ne toimivat hyvin esimerkiksi henkilöstöesittelyissä, mobiilinäkymissä ja somekäytössä. Käytännössä paras ratkaisu on ottaa samasta tilanteesta useampi rajaus sekä pysty- että vaakamuodossa.
Tämä antaa enemmän mahdollisuuksia verkkosivujen suunnitteluun myöhemmin. Samalla vältetään tilanne, jossa muuten hyvä kuva ei sovikaan teknisesti siihen kohtaan, johon sitä tarvittaisiin.
Jätä kuviin riittävästi tilaa
Yksi yleisimmistä verkkosivuprojektien ongelmista on liian tiukasti rajatut kuvat.
Nykyiset verkkosivut ovat responsiivisia, eli ne mukautuvat automaattisesti eri näyttökokoihin. Sama kuva voi näkyä hyvin eri tavalla puhelimessa, tabletissa ja tietokoneella. Jos kuva on rajattu liian tarkasti, tärkeä osa kuvasta voi kadota mobiilissa kokonaan.
Esimerkiksi henkilön pää, tuotteen yksityiskohta tai yrityksen tärkeä elementti voi leikkautua pois näkyvistä. Siksi kuvissa kannattaa jättää hieman “ilmaa” kohteen ympärille. Tämä antaa verkkosivujen toteuttajalle enemmän vapautta rakentaa sivustosta teknisesti toimiva kaikille laitteille. Väljä sommittelu näyttää usein myös ammattimaisemmalta ja rauhallisemmalta kuin liian ahdas rajaus.
Tuotekuvissa mittasuhteet ovat erittäin tärkeitä
Verkkokaupoissa yksi yleisimmistä asiakaspalautuksien syistä liittyy tuotteen kokoon. Asiakas kuvittelee tuotteen suuremmaksi tai pienemmäksi kuin se todellisuudessa on. Vaikka verkkokaupassa olisi tarkat senttimitat, moni hahmottaa tuotteen koon ensisijaisesti kuvien perusteella. Tämän vuoksi tuotekuvissa kannattaa näyttää mittasuhteita käytännössä.
Tuote voi näkyä esimerkiksi kädessä, pöydällä, käyttötilanteessa tai jonkin tutun esineen vieressä. Näin asiakas ymmärtää tuotteen mittasuhteet huomattavasti nopeammin kuin pelkkien numerotietojen avulla. Hyvät tuotekuvat voivat vähentää väärinkäsityksiä, palautuksia ja tilausperuutuksia. Samalla ne lisäävät luottamusta verkkokauppaan ja helpottavat ostopäätöksen tekemistä.
Valo ratkaisee enemmän kuin kallis kamera
Laadukas valaistus on usein tärkeämpää kuin itse kamerakalusto. Paras lopputulos syntyy yleensä luonnonvalossa tai hyvin valaistussa ympäristössä. Liian pimeät tai kellertävät kuvat voivat tehdä muuten laadukkaasta yrityksestä epäammattimaisen vaikutelman.
Kotisivuille tulevien kuvien kannattaa olla selkeitä, teräviä, luonnollisen värisiä ja rauhallisia taustaltaan. Taustaan kannattaa kiinnittää erityistä huomiota jo kuvausvaiheessa. Ylimääräiset johdot, tavarat, sekavat pinnat tai häiritsevät yksityiskohdat vievät helposti huomion pois itse aiheesta. Usein juuri yksinkertainen ja siisti kuva toimii verkkosivuilla kaikkein parhaiten.
Ota mieluummin liikaa kuvia kuin liian vähän
Kotisivujen suunnittelussa vaihtoehtojen määrä helpottaa lähes aina lopputulosta. Jos kuvia on liian vähän, samoja kuvia joudutaan käyttämään useissa eri kohdissa sivustoa. Tämä tekee sivustosta helposti itseään toistavan näköisen.
Siksi kuvia kannattaa ottaa runsaasti:
eri kuvakulmista
eri rajauksilla
eri etäisyyksiltä
erilaisissa tilanteissa
useilla sommitteluilla
Usein juuri ne kuvat, joita ei alun perin ajateltu tärkeimmiksi, toimivat lopulta parhaiten verkkosivujen rakenteessa.
Älä lisää tekstiä suoraan kuviin
Yksi yleinen virhe on lisätä teksti suoraan kuvatiedoston päälle jo ennen verkkosivuille vientiä. Vaikka tämä voi näyttää nopeasti hyvältä esimerkiksi sosiaalisessa mediassa, verkkosivujen näkökulmasta ratkaisu ei yleensä ole paras mahdollinen.
Jos kuvan päälle halutaan otsikko, slogan tai muu teksti, se kannattaa lisätä verkkosivualustan omana tekstielementtinä eikä osana kuvaa.
Tähän on useita syitä. Hakukoneet eivät lue kuvaan upotettua tekstiä samalla tavalla kuin oikeaa verkkosivun tekstiä. Kun teksti lisätään sivustolle tekstinä, Google ymmärtää sisällön paremmin, sisältö tukee SEO-näkyvyyttä ja myös tekoälypohjaiset haut hahmottavat sivun aiheen selkeämmin.
Lisäksi responsiivisilla verkkosivuilla kuva rajautuu eri laitteilla eri tavalla. Jos teksti on osa kuvaa, se voi mobiilissa mennä osittain piiloon tai muuttua vaikeasti luettavaksi. Tekstielementtinä lisätty sisältö toimii huomattavasti joustavammin eri kokoisissa näytöissä.
Missä muodossa kuvat kannattaa toimittaa?
Verkkosivuja varten kuvat kannattaa toimittaa mahdollisimman laadukkaina ja alkuperäisessä koossa. Hyviä tiedostomuotoja ovat yleensä JPG, JPEG, PNG ja WebP. Useimmiten laadukas JPG toimii valokuvissa erittäin hyvin. PNG sopii erityisesti tilanteisiin, joissa tarvitaan läpinäkyvää taustaa, logoja tai graafisia elementtejä. WebP on moderni tiedostomuoto, jota käytetään paljon verkkosivuilla, koska se voi pienentää kuvatiedostojen kokoa ilman, että laatu heikkenee liikaa.
Wix tukee useita kuvatiedostomuotoja, kuten JPG-, PNG-, GIF-, WebP-, SVG-, HEIC-, TIFF- ja RAW-tiedostoja. Käytännössä yrityksen kannattaa kuitenkin pitää asia yksinkertaisena: valokuvat voi yleensä toimittaa laadukkaina JPG-tiedostoina, logot ja ikonit mieluiten SVG- tai PNG-muodossa ja verkkokäyttöön optimoidut kuvat tarvittaessa WebP-muodossa.
Nykyään verkkosivuilla ei yleensä ole yhtä tarkkaa pikselikokoa, joka sopisi kaikkiin tilanteisiin. Sivustot mukautuvat eri näyttölaitteille automaattisesti. Tärkeintä on, että kuva on riittävän suuri, terävä ja laadukas.
Kuvia voidaan aina pienentää, mutta niitä ei voida laadukkaasti suurentaa. Jos liian pientä kuvaa yritetään venyttää suuremmaksi, siitä tulee helposti sumea ja pikselöitynyt. Siksi verkkosivujen toteuttaja tarvitsee mieluummin liian suuren kuin liian pienen kuvan.
Älä lähetä kuvia Messengerissä tai WhatsAppissa
Yleensä Messenger, WhatsApp ja osa sähköpostipalveluista pakkaavat kuvia automaattisesti pienemmiksi. Tämän seurauksena kuvan laatu voi heikentyä merkittävästi jo ennen kuin kuva ehtii verkkosivuille asti.
Paras tapa toimittaa kuvat on yleensä esimerkiksi WeTransfer, Google Drive, Dropbox, OneDrive tai Sharepoint. Näin kuvat säilyvät alkuperäisessä laadussaan ja niitä voidaan käyttää verkkosivuilla ilman ylimääräisiä laatuongelmia.
Miten Wix optimoi kuvia verkkosivuilla?
Wix tekee paljon kuvien teknistä optimointia automaattisesti. Kun kuva lisätään Wix-sivustolle, Wix pakkaa ja mukauttaa kuvia niin, että sivusto latautuisi mahdollisimman nopeasti eri laitteilla. Tämä on tärkeää, koska hitaasti latautuvat kuvat voivat heikentää käyttäjäkokemusta ja saada asiakkaan poistumaan sivulta ennen kuin hän ehtii tutustua yritykseen.
Wix osaa tarjota eri kokoisia versioita samasta kuvasta eri laitteille. Puhelimella sivustoa katsova käyttäjä ei siis välttämättä lataa samaa suurta kuvaa kuin isolla tietokonenäytöllä oleva käyttäjä. Tämä parantaa sivuston nopeutta erityisesti mobiilissa.
Wix voi myös hyödyntää moderneja kuvatiedostomuotoja, kuten WebP:tä, silloin kun selain tukee sitä. Lisäksi Wixissä on käytössä niin sanottu lazy loading -toiminto, eli kuvia ladataan vasta silloin, kun ne ovat tulossa käyttäjän näkyviin. Tämä auttaa erityisesti pitkillä sivuilla ja blogiteksteissä, joissa kuvia voi olla paljon.
Vaikka Wix tekee paljon automaattisesti, se ei tarkoita, että kuvien valmistelulla ei olisi merkitystä. Parhaan lopputuloksen saa, kun sivustolle tuodaan jo lähtökohtaisesti laadukkaita, järkevästi rajattuja ja verkkokäyttöön sopivia kuvia.
Kuvien nimeäminen ja alt-tekstit vaikuttavat hakukonenäkyvyyteen
Kuvien hakukoneoptimointi unohtuu helposti, vaikka sillä voi olla merkitystä sivuston löydettävyyden kannalta. Wixissä kuville voi lisätä alt-tekstit, eli vaihtoehtoiset tekstit. Ne auttavat hakukoneita ymmärtämään, mitä kuvassa on. Samalla ne parantavat saavutettavuutta, koska ruudunlukijat voivat lukea alt-tekstin käyttäjälle.
Hyvä alt-teksti on kuvaileva ja luonnollinen. Esimerkiksi “kuva1” tai “IMG_2345” ei kerro hakukoneelle tai käyttäjälle juuri mitään. Parempi vaihtoehto olisi esimerkiksi “rakennusalan yrittäjä työmaalla” tai “käsintehty sininen keramiikkakulho pöydällä”, riippuen siitä, mitä kuvassa oikeasti näkyy.
Myös tiedostonimillä on merkitystä. Ennen kuvien lataamista sivustolle tiedosto kannattaa nimetä kuvaavasti. Esimerkiksi “mustat-nahkalaukut-verkkokauppa.jpg” kertoo kuvasta enemmän kuin kameran automaattinen tiedostonimi.
Tässä ei kuitenkaan kannata mennä liiallisuuksiin. Tiedostonimen ja alt-tekstin pitää olla ensisijaisesti selkeä ja todenmukainen, ei täyteen ahdettu avainsanalista.
Wixin kuvapankit voivat auttaa alkuun
Kaikilla yrityksillä ei ole heti mahdollisuutta järjestää ammattivalokuvausta, ja joskus verkkosivut halutaan julkaista nopeasti. Tällöin kuvapankkikuvat voivat olla hyvä apu erityisesti sivuston alkuvaiheessa.
Wixissä on käytettävissä oma ilmainen kuvakirjasto sekä integraatio Unsplashiin, josta löytyy paljon laadukkaita kuvia verkkosivukäyttöön.
Lisäksi Wixissä voi hyödyntää maksullista Shutterstockia, jonka kautta löytyy laaja valikoima ammattitasoisia kuvia eri toimialoille.
Kuvapankkikuvat voivat toimia hyvin esimerkiksi tunnelmakuvina tai väliaikaisena ratkaisuna silloin, kun omia kuvia ei vielä ole käytettävissä. Ongelmana on kuitenkin se, että samoja kuvia voivat käyttää myös muut yritykset, myös kilpailijat.
Joskus täysin sama kuva voi tulla vastaan useilla eri verkkosivuilla, mikä heikentää helposti yrityksen persoonallisuutta ja aitouden tunnetta. Asiakkaat tunnistavat nykyään kuvapankkikuvia yllättävän hyvin, erityisesti silloin kun kuvat näyttävät liian geneerisiltä tai “liian täydellisiltä”.
Ammattivalokuvaajan ottamat kuvat tukevat brändiä parhaiten
Parhaat verkkosivut rakennetaan yleensä omien kuvien ympärille. Ammattivalokuvaajan ottamat kuvat tekevät sivustosta aidomman, uskottavamman ja selvästi enemmän yrityksen näköisen.
Omissa kuvissa voidaan huomioida yrityksen värit, tunnelma, toimitilat, henkilöstö, tuotteet ja toimintatapa. Tämä on iso etu verrattuna kuvapankkikuviin, jotka ovat usein yleisluontoisia eivätkä kerro juuri kyseisestä yrityksestä mitään.
Aidot kuvat auttavat asiakasta hahmottamaan, millainen yritys on, keitä sen takana on ja millaista palvelua hän voi odottaa. Tämä lisää luottamusta ja tekee yhteydenoton helpommaksi.
Verkkokaupan kuvat vaikuttavat suoraan ostamiseen
Verkkokaupassa kuvat eivät ole vain koristelua. Ne ovat usein tuotteen tärkein myyntityökalu. Asiakas ei voi koskea tuotetta, sovittaa sitä tai tarkastella sitä fyysisesti, joten kuvien täytyy korvata suuri osa tästä kokemuksesta.
Hyvässä verkkokaupassa tuotteesta kannattaa näyttää useampi kuva: yleiskuva, lähikuva, yksityiskohdat ja käyttötilanne. Jos tuotteessa on materiaali, pinta, koko tai jokin tärkeä yksityiskohta, se kannattaa näyttää kuvissa mahdollisimman selkeästi.
Wix-verkkokaupassa kuvien tekninen optimointi auttaa sivuston nopeudessa, mutta se ei korvaa hyvää kuvausta. Tuotteen täytyy silti näkyä asiakkaalle selkeästi ja houkuttelevasti. Hyvät tuotekuvat voivat lisätä ostamisen varmuutta ja vähentää turhia kysymyksiä, palautuksia ja väärinkäsityksiä.
Blogikuvat tukevat luettavuutta ja näkyvyyttä
Blogiteksteissä kuvat auttavat rytmittämään sisältöä ja tekemään lukukokemuksesta kevyemmän. Hyvä artikkelikuva voi myös vaikuttaa siihen, klikataanko blogitekstiä esimerkiksi hakutuloksissa, sosiaalisessa mediassa tai uutiskirjeessä.
Wix-blogissa kuviin kannattaa kiinnittää huomiota samalla tavalla kuin muillakin sivuilla. Kuvan tulisi liittyä aidosti aiheeseen, olla laadukas ja tukea tekstin sanomaa. Blogikuvan alt-teksti ja tiedostonimi kannattaa myös kirjoittaa kuvaavasti.
Jos blogissa käsitellään esimerkiksi kotisivujen kuvia, hyvä kuva voisi näyttää aitoa työtilannetta, verkkosivujen suunnittelua tai yrityksen omaa visuaalista materiaalia. Liian geneerinen kuvapankkikuva ei välttämättä tuo sisältöön lisäarvoa.
Kuvatehosteita kannattaa käyttää harkiten
Wixissä voi käyttää erilaisia kuvatehosteita, kuten taustakuvia, hover-efektejä, parallax-tyyppisiä ratkaisuja ja gallerioita. Ne voivat tehdä sivustosta näyttävän, mutta niitä kannattaa käyttää harkiten.
Jos tehosteita on liikaa tai kuvat ovat liian raskaita, sivusto voi tuntua hitaalta tai levottomalta. Hyvä verkkosivusto ei ole pelkästään näyttävä, vaan myös helppo käyttää. Kuvien tehtävä on tukea sisältöä ja ostopolkua, ei viedä kaikkea huomiota itseensä.
Erityisesti etusivulla kannattaa miettiä tarkasti, mikä kuva tukee tärkeintä viestiä. Ensimmäisen näkymän tulisi kertoa nopeasti, mitä yritys tekee ja miksi asiakkaan kannattaa jatkaa sivulla.
Tekoälykuvat
Nykyään Wix tarjoaa mahdollisuuden luoda kuvia myös tekoälyn avulla. Tämä voi olla hyödyllinen ratkaisu esimerkiksi silloin, kun yrityksellä ei vielä ole omaa kuvapankkia tai tarvitaan nopeasti visuaalista materiaalia verkkosivuille, blogeihin tai kampanjoihin.
Tässä esimerkki Wixin tekoälykuvan luontiohjelmasta. Prompti tehtiin ChatGPT:llä, ja laitettiin Wixiin "Describe your image"-kohtaan.
Seuraavanlainen prompti tehtiin: Moderni ja ammattimainen valokuvaustilanne yrityksen verkkosivuja varten. Kuvassa valokuvaaja kuvaa yrittäjää luonnonvalossa modernissa työympäristössä. Näytöllä näkyy verkkosivujen suunnittelua ja laadukkaita kuvia. Tunnelma on aito, lämmin ja yritysbrändiä tukeva. Kuvassa paljon luonnollista tilaa tekstille, vaakamallinen sommittelu, realistinen tyyli, erittäin laadukas ja uskottava yritysvalokuva.
Lopputulos ei ollut ihan toivotunlainen:
Kun sama promptausteksti kirjoitettiin englanniksi, niin lopputulos oli hieman parempi, mutta edelleen käyttökelvoton. Teknologian kehitys menee tällä hetkellä erittäin nopeasti eteenpäin, mutta tällä hetkellä Wixin oma tekoälykuvien luonti ei vielä välttämättä ole markkinoiden kehittynein ratkaisu. Lopputulos voi joskus näyttää hieman geneeriseltä tai sisältää epäluonnollisia yksityiskohtia, joita ihmissilmä alkaa nopeasti tunnistaa.
Tekoälyllä voidaan luoda esimerkiksi tunnelmakuvia, taustakuvia, kuvituskuvia ja erilaisia konseptikuvia.
Monet käyttäjät ovat myös nykyään entistä tietoisempia tekoälyllä tuotetuista kuvista. Joillekin voi syntyä jopa tietynlainen “tekoälykuvaväsymys”, jolloin liian silotellut tai epäaidon näköiset kuvat voivat heikentää luottamusta yritykseen. Siksi erityisesti yritysten verkkosivuilla aidot kuvat ovat edelleen erittäin arvokkaita. Asiakkaat haluavat nähdä oikeita ihmisiä, oikeita työympäristöjä ja aitoa yritystoimintaa.
Juuri aitous, persoonallisuus ja alkuperäinen sisältö voivat erottaa yrityksen kilpailijoista tilanteessa, jossa internet täyttyy yhä enemmän tekoälyllä tuotetusta materiaalista. Tekoälykuvat voivat toimia hyvänä täydentävänä elementtinä, mutta parhaimmillaan verkkosivut rakentuvat edelleen aidon kuvamateriaalin ympärille.
Hyvät kuvat tukevat SEO- ja GEO-näkyvyyttä
Nykyään kuvat eivät vaikuta pelkästään sivuston ulkonäköön. Ne vaikuttavat myös siihen, miten hakukoneet ja tekoälypohjaiset hakupalvelut arvioivat verkkosivun laatua, luotettavuutta ja hyödyllisyyttä.
SEO:n eli hakukoneoptimoinnin kannalta tärkeitä asioita ovat muun muassa kuvan tiedostonimi, alt-teksti, sivun latausnopeus ja se, miten hyvin kuva tukee sivun sisältöä. GEO:n eli tekoälyhakuihin liittyvän näkyvyyden näkökulmasta tärkeää on myös se, että sivusto vaikuttaa aidolta, asiantuntevalta ja luotettavalta.
Aidot yrityksestä otetut kuvat tukevat tätä paremmin kuin geneeriset kuvapankkikuvat. Ne kertovat, että yritys on olemassa oikeasti, sillä on oma tyyli, omat ihmiset ja oma tapa toimia.
Hyvin suunnitellut kuvat auttavat rakentamaan verkkosivut, jotka näyttävät ammattimaisilta, toimivat teknisesti oikein ja tukevat yrityksen näkyvyyttä pitkällä aikavälillä.
Yhteenveto: hyvä verkkosivukuva on sekä kaunis että käyttökelpoinen
Verkkosivuille sopiva kuva ei ole pelkästään kaunis kuva. Sen täytyy toimia eri laitteilla, latautua nopeasti, tukea sivun sisältöä ja vahvistaa yrityksen brändiä.
Kun kuvaus suunnitellaan verkkosivuja varten jo etukäteen, lopputulos on yleensä paljon parempi. Valokuvaaja saa selkeämmät ohjeet, verkkosivujen tekijällä on enemmän vaihtoehtoja ja yritys saa käyttöönsä kuvia, jotka palvelevat sekä asiakkaita että hakukoneita.
Wix tekee paljon kuvien teknistä optimointia automaattisesti, mutta paras lopputulos syntyy silti laadukkaista alkuperäisistä kuvista, hyvästä suunnittelusta ja selkeistä SEO-asetuksista. Siksi kuviin kannattaa suhtautua osana koko verkkosivustrategiaa, ei vain sivuston visuaalisena koristeena.
Tarvitsetko apua kotisivujen suunnittelussa?
Hyvät kuvat ovat tärkeä osa onnistuneita verkkosivuja, mutta parhaaseen lopputulokseen vaikuttavat myös sivuston rakenne, tekstit, hakukoneoptimointi, mobiilikäytettävyys ja koko käyttäjäkokemus. Nykyään verkkosivujen kannattaa toimia hyvin myös tekoälypohjaisissa hauissa ja palveluissa, joten pelkkä näyttävä ulkoasu ei enää yksin riitä.
Me DigiLickillä suunnittelemme ja toteutamme erityisesti Wix-kotisivuja yrityksille käytännönläheisesti ja liiketoiminnan näkökulmasta. Huomioimme sivustoissa sekä perinteisen SEO:n että GEO-ajattelun, eli sen, miten yritys näkyy myös tekoälyhauissa ja tulevaisuuden hakupalveluissa.
Autamme tarvittaessa myös kuvien suunnittelussa, sisältörakenteessa, verkkosivujen tekstisisällöissä sekä siinä, millainen visuaalinen kokonaisuus tukee juuri sinun yrityksesi brändiä, löydettävyyttä ja uskottavuutta parhaiten.
Jos suunnittelet uusia kotisivuja tai nykyinen sivusto kaipaa päivitystä, voit olla meihin matalalla kynnyksellä yhteydessä. Katsotaan yhdessä, millainen verkkosivuratkaisu tukisi yrityksesi näkyvyyttä ja liiketoimintaa parhaiten nyt ja tulevaisuudessa.
