Näin valitset sopivat kuvat verkkosivullesi

Mieti ensin, mikä kuvan tehtävä on

Kysy ennen kuvan valintaa: ”Mitä kävijän pitäisi ymmärtää tai tuntea tässä kohdassa sivua?”

Etusivun kuva voi esitellä yritystäsi. Palvelukuva voi näyttää, mitä teet tai miltä lopputulos näyttää. Tiimikuva auttaa tunnistamaan ihmiset, jotka asiakas tapaa. Valitse kuva, joka tukee tätä tarkoitusta.

Kirjoita ennen etsimistä yhden lauseen kuvaus tarpeesta: ”Kuvan pitäisi näyttää remontoimamme pieni kylpyhuone ja jättää vasemmalle tilaa otsikolle.” Tarkka tavoite auttaa karsimaan näyttäviäkin kuvia, jotka eivät sovi sivulle.

Vertaa vaihtoehtoja kolmella kysymyksellä: Mitä kuva kertoo kävijälle? Onko tieto hyödyllistä juuri tässä? Välittyykö viesti myös siinä tilassa, joka kuvalle on varattu? Jos kuva ei tuo hyödyllistä tietoa tai tunnelmaa, osio voi toimia paremmin pelkällä tekstillä.

Valitse yrityksellesi sopiva pääkuva

Hero-osio eli sivun alun suuri esittelyalue on monelle kävijälle ensimmäinen näkymä. Sen kuvan pitäisi tukea otsikkoa, ei kilpailla sen kanssa.

Remonttiyritys voisi näyttää valmiin huoneen tai ammattilaisen työssään. Fysioterapiavastaanotolle sopisi luonteva kuva asiakastapaamisesta tai harjoitteesta. Paikallinen kahvila voisi esitellä tilansa tai tunnistettavan annoksensa.

Jätä otsikolle ja painikkeille riittävästi rauhallista tilaa. Jos kuvan näyttävyys vie huomion niin, ettei kävijä ymmärrä, mitä yritys tarjoaa, valitse yksinkertaisempi kuva.

Arvioi kuvaa sivun todellisessa asettelussa. Yksinään erinomainen valokuva voi olla levoton juuri otsikon kohdalla. Toteuta otsikko ja painike sivun tekstinä sen sijaan, että tallentaisit ne osaksi kuvaa. Näin ne voivat mukautua asetteluun.

Esimerkki: kolme kuvavaihtoehtoa samalle etusivulle

Kuvitellaan remonttiyritys, jonka etusivun otsikko on ”Kylpyhuoneremontit pieniin koteihin”. Se valitsee kolmesta valokuvasta:

• Viimeistelty kuvapankkikuva suuresta luksuskylpyhuoneesta. Valaistus on kaunis, mutta huone ei edusta pieniä tiloja, joita yritys haluaa näyttää. Kuva voi luoda työstä väärän odotuksen.
• Kuva yrityksen remontoimasta kylpyhuoneesta, jossa rajaus on liian tiukka ja näkyy epäjärjestystä. Aihe sopii, mutta tilan hahmottaminen on vaikeaa. Kokeile toista rajausta tai saman kohteen toista valokuvaa.
• Selkeä kuva valmiista pienestä kylpyhuoneesta. Säilytysratkaisut, suihku ja käytettävissä oleva tila erottuvat hyvin. Jos otsikollekin jää tilaa, tämä vaihtoehto sopii kyseiselle sivulle parhaiten.

Jos suihku katoaa kolmannesta kuvasta, kun se rajataan puhelimen näytölle, tee erillinen mobiilirajaus tai siirrä teksti kuvan viereen. Valinnassa ratkaisevat yhdessä kuvan aihe, viesti ja lopullinen asettelu.

Näytä palvelu tai sen lopputulos

Palvelukuvista on eniten hyötyä, kun ne auttavat hahmottamaan työn. Putkiasentaja voisi näyttää valmiin asennuksen tai asentajan asiakkaan kotona. Valokuvaaja voisi esitellä aidon työnäytteen. Tällaiset kuvat kertovat enemmän kuin yleinen kuva ihmisestä kannettavan tietokoneen ääressä.

Valitse näkymä, joka vastaa asiakkaan todennäköiseen kysymykseen. Valmis huone näyttää lopputuloksen, lähikuva voi näyttää liitoksen tai viimeistelyn ja työskentelykuva selittää työvaihetta. Näillä kuvilla on eri tehtävät, joten valitse sen mukaan, mitä osio lupaa kertoa.

Lisää projektikuvaan lyhyt kuvateksti, joka kertoo, mitä on tehty ja mihin yksityiskohtaan kannattaa kiinnittää huomiota. ”Kiinteä säilytysratkaisu vinon katon alla” kertoo enemmän kuin ”Jälleen tyytyväinen asiakas”. Kuvaile vain asioita, jotka kohde todella osoittaa, ja esitä laatuun tai tuloksiin liittyvät väitteet täsmällisesti.

Käytä luontevia kuvia oikeasta tiimistä

Tiimikuva voi tehdä pienestä yrityksestä helpommin lähestyttävän, kun siinä näkyvät ihmiset, jotka asiakas oikeasti tapaa. Tuttu työympäristö, luonnolliset ilmeet ja rennot asennot tuntuvat yleensä uskottavammilta kuin vahvasti lavastettu ryhmäkuva.

Pidä henkilökuvien rajaus ja taustat samantapaisina. Käytä ajantasaisia kuvia ja varmista, että ne vastaavat palvelua, jota asiakas voi odottaa.

Nimi ja tehtävä kuvan vieressä auttavat yhdistämään kasvot ihmiseen, joka hoitaa yhteydenoton tai tapaamisen. Yksinkertainen, hyvin valaistu henkilökuva voi riittää; laajaa kuvausta ei tarvita. Kysy kuvassa olevilta lupa ennen julkaisemista ja vältä asiakkaiden tai yksityisten tietojen näkymistä taustalla vahingossa.

Valitse blogikuvat artikkelin aiheen mukaan

Blogikuvan pitäisi auttaa tunnistamaan aihe, ei vain täyttää tilaa. Maalivärien valinnasta kertovassa artikkelissa huone, jossa värivalinta erottuu selvästi, voi toimia paremmin kuin yleinen kuva sivellintä pitelevästä ihmisestä.

Yksinkertainen kaavio, aito esimerkki tai kuva omasta työstä voi olla kuvapankkikuvaa osuvampi. Valitse kuvatyyppi selitettävän asian mukaan: vertailu voi tarvita kaksi esimerkkiä rinnakkain, kun taas vaiheittainen ohje voi tarvita kuvakaappauksen juuri kyseisestä vaiheesta. Koristeellinen kansikuva voi esitellä aiheen, mutta se ei korvaa ohjeiden ymmärtämiseen tarvittavia esimerkkejä.

Tarkista rajaus tietokoneella ja puhelimessa

Leveä kuva voi näyttää puhelimessa hyvin erilaiselta. Selain saattaa rajata kuvan reunoja, jolloin reunassa oleva henkilö, tuote tai tärkeä yksityiskohta katoaa.

Esikatsele kuvaa siinä koossa, jossa se näkyy sivulla. Varmista, että pääkohde säilyy näkyvissä tietokoneella ja puhelimessa. Jos teksti on kuvan päällä, jätä sen taakse rauhallinen alue, jotta sanat erottuvat. Jos sopivaa kohtaa ei ole, sijoita teksti kuvan viereen.

1. Sijoita kuva oikeaan osioon. Tarkista se lopullisen otsikon, painikkeen ja ympäröivän tekstin kanssa, älä vain erillisenä valokuvana.
2. Tarkista sivu leveässä ja kapeassa näkymässä. Etsi pois rajautuneita kasvoja, puuttuvia tuotetietoja ja tekstiä, joka osuu kuvan levottomaan kohtaan.
3. Säädä rajausta tai kohteen sijaintia. Jos editorissa voi määrittää kuvan kohdistuspisteen, siirrä se tärkeään yksityiskohtaan ja esikatsele uudelleen.
4. Tarkista sivu puhelimella. Varmista, että kuvan merkitys ja olennaiset merkinnät erottuvat selvästi siinä koossa, jossa kuva näkyy sivulla.

Jos sama rajaus ei pidä kohdetta selkeänä molemmissa näyttökoissa, sivusto voi tarvita eri rajaukset eri näytöille. MDN:n responsiivisten kuvien ohje selittää tätä art direction -nimistä toteutustapaa sivun rakentajalle.

Käytä kuvapankkikuvia harkiten

Kuvapankki voi auttaa, jos sopivaa omaa kuvaa ei ole. Kysy ennen valintaa:

• Liittyykö kuva selvästi tähän yritykseen tai palveluun?
• Näyttääkö se luonnolliselta ja uskottavalta?
• Voisiko sama kuva olla lähes minkä tahansa kilpailijan sivulla?

Jos kuva tuntuu liian yleiseltä, etsi osuvampi vaihtoehto tai käytä aitoa kuvaa työstäsi, tuotteista, tiloista tai tiimistä. Omat kuvat voivat auttaa kävijää hahmottamaan, mitä odottaa.

Kuvapankkikuva voi havainnollistaa yleistä aihetta tai luoda tunnelmaa. Se sopii huonommin kohtaan, jonka on tarkoitus näyttää oma tiimisi, toimitilasi tai valmis työsi. Älä esitä sitä todisteena toteuttamastasi projektista. Osuva kuvapankkikuva voi silti olla parempi kuin oma kuva, joka on liian tumma tai sekava tai ei näytä tärkeää kohdetta selvästi.

Pidä sivuston kuvailme yhtenäisenä

Eri lähteistä tulevat kuvat voivat silti sopia luontevasti yhteen. Etsi yhteistä piirrettä, kuten luonnollista valoa, samantapaista värimaailmaa tai yhtenäistä valokuvaustyyliä.

Kaikkia kuvia ei tarvitse käsitellä samalla tavalla. Tavoittele yhtenäistä sivua, jossa jokainen kuva sopii omaan osioonsa.

Aloita kahdesta tai kolmesta periaatteesta: samantapaiset henkilökuvien rajaukset, sama kuvasuhde blogin kansikuvissa ja luonnollinen valaistus projektikuvissa. Katso kuvia yhdessä sivulla. Vaihda joukosta erottuva kuva ennen kuin lisäät voimakkaan suodattimen kaikkiin kuviin.

Tarkistuslista ennen julkaisemista

• Osaat kertoa, mitä kuva tuo osioon.
• Se esittää yrityksen, aiheen tai esimerkin totuudenmukaisesti.
• Pääkohde säilyy näkyvissä sivun todellisessa tietokone- ja mobiiliasettelussa.
• Teksti ja painikkeet ovat luettavia, ja olennainen tieto löytyy myös sivun tekstistä.
• Valaistus, rajaus tai värit sopivat ympäröiviin kuviin.
• Olet tarkistanut käyttöluvan ja mahdollisen vaatimuksen mainita kuvan lähde tai tekijä.

Valmistele valitsemasi kuvat verkkosivulle

Kun kuvat on valittu, tutustu oppaisiimme: sopivat kuvakoot verkkosivuille, koon muuttaminen ilman venymistä ja hyödylliset alt-tekstit ja tiedostonimet.

Mieti myös, miten kuvan välittämä tieto tavoittaa ihmisen, joka ei näe kuvaa. Tietoa välittävät kuvat tarvitsevat sisältöä kuvaavan tekstivastineen; pelkkien koristekuvien alt-teksti jätetään yleensä tyhjäksi. W3C:n kuvaohje kertoo, miten kuvan tarkoitus vaikuttaa valintaan.