Kuvat tekevät net­ti­si­vus­ta koukuttavan, mutta miten välttää mo­saiik­ki­mös­sö, pönötys ja idylliset perheet

Mitä netissä on?

Kissavideoita, meemejä, vlogeja – ja tekstiä.

Tekstiä on niin paljon, että sitä pursuaa ovista ja selainikkunoista, eikä ihme jos kaikkea ei jaksa lukea. Ruudun lukeminen on rasittavaa jo itsessään ja tutkimusten mukaan älypuhelimet ovat lyhentäneet keskittymiskykyä kultakalan muistia heikommaksi. Niin mistähän pitikään kirjoittaa… Ai niin – kuvista!

Saatatkin jo arvata, mihin pelastusrenkaaseen internetkäyttäjä usein tarttuu surffatessaan tekstimeressä: Googlen kuvahakuun. Luontaisesti kiinnostumme kaikesta kauniista, joten visuaalinen ilme kiinnostavilla nettisivuilla on tärkeä ominaisuus. Pelkät kauniit palkit ja hyvä fontti eivät riitä – laadukkaat kuvat paketoivat kokonaisuuden ja nappaavat katsojan huomion. Kivoja kuvia on paljon mukavampi katsella kuin tapetin kuivumista!        

Kuvien tehtävä internetissä on paljon tärkeämpi kuin tuhannen sanan kerronta. Niiden on vangittava käyttäjän mielenkiinto ilman, että ne kuitenkaan ovat kaiken keskipiste. Kuvatulvassa laatu on ehdoton valttikortti. Mutta mitä kaikkea laadukkaalta kuvalta vaaditaan? Kauneuteen on monta mittaria: pelkän visuaalisen pinnan lisäksi huomio täytyy kiinnittää muun muassa kokoon, laatuun ja  asetteluun.

Kaksinkertaisena kaunihimpi

Kun puhumme retinakuvasta, tarkoitamme kuvaa, joka on tuplasti isompi kuin kuvan varsinainen koko. Retina tai tarkemmin Retina display on Applen lanseeraama termi, jolla tarkoitetaan teräväpiirtonäyttöjä eli näyttöjä, joissa on tuplasti enemmän pikseleitä tuumaa kohden (dpi) tavallisiin näyttöihin verrattuna. Apple lanseerasi retinanäytön alunperin iPhone 4 -puhelimen yhteydessä, mutta käytäntö on sittemmin yleistynyt ensin Applen omissa laitteissa ja on nykyisin lähestulkoon standardi ainakin älypuhelimissa ja tablet-tietokoneissa myös muilla valmistajilla kuin Applella. Käytännössä retina puhelimessa tarkoittaa siis sitä, että 320 pikselin kokoinen näyttö sisältää tuplasti pikseleitä – eli onkin 640 pikselin kokoinen.

Mitä retinanäyttö tarkoittaa kuvien kannalta?

Jotta nettisivut olisivat käyttäjäystävällisiä niin piskuisilla älypuhelimilla kuin valtavilla näytöillä, sivustojen tulee olla erittäin muuntautumiskykyisiä eli responsiivisia. Graafiset elementit, kuten teksti, palkit, napit ja valikot, joista sivuston rakenne koostuu, osaavat kasvaa ja pienentyä tarpeen mukaan. Kuvien kanssa tilanne on hiukan erilainen.

Mosaiikkimössöstä eroon

Näytetty kuva-alue saattaa muuttua riippuen kuvapaikasta, kun sivuilta leikellään kuvaa pienemmäksi tai korkeutta näytetään enemmän, mutta taustalla kuvatiedosto pysyy samana – sama kuva näytetään sivustolla useassa eri muodossa. Tämä siis tarkoittaa, että kuvan tulee kestää kuvapaikan muuttumista. Koska jpg-kuva on itsessään kovin staattinen elementti, tulee kuvilla kikkailla hiukan ennen kuin ne lisätään sivustolle. Keino luoda kuvasta kameleontti on tehdä siitä tarpeeksi iso. Isoa kuvaa voidaan venytellä ja vanutella suhteellisen rauhassa ilman, että kuvasta tulee mosaiikkimössöä. Jos kuvat eivät ole tarpeeksi isoja, on riski, että kuva muuttuu pikselimössöksi.

Mosaiikkimössön välttely on erittäin tärkeää, kun kuvassa on jotain käyttäjän kannalta oleellista, kuten tuote tai teksti, joka halutaan aina näyttää selkeänä. Jotta potentiaalinen ostaja saa selkeän käsityksen tuotteen ulkomuodosta, on tärkeää, että tuotteen kuva on tarkka kaikilla näytöillä. Jos liian pieni kuva on venytetty kuvapaikkaan sopivaksi, heikkenee kuvan laatu, eikä asiakas saa selvää käsitystä tuotteen ulkomuodosta. Epäselvä kuva jää huomaamatta, eikä tuotekaan välttämättä jää mieleen.

Retinakuvasuositus koskee myös kuvia, joissa on tekstiä. Kuvassa kiinteänä oleva teksti muuttuu nopeasti lukukelvottomaksi, jos kuva ei ole tarpeeksi suuri. Tällöin viesti ei totisesti välity käyttäjälle.

Retinaakin pitää osata käyttää harkiten. Isojen pääkuvien kohdalla ovat retinakuvat ehkä turhaa hössötystä. Kun kuvan leveys paukkuu yli 2000 pikselin, joka siis retinakokoisena on jo yli 4000 pikseliä, on tarpeeksi isoja kuvia turhan haastavaa löytää. Tällöin jättimäisen kuvan kilokoko paukkuu yli Googlen sallimien rajojen hyvin äkkiä. Jos kuva on selvästi vain taustalle tarkoitettu fiilistelyelementti, on hyvä pohtia haittaako, jos AD:n retinanäyttöisellä jättimacilla kuva ei ole teräväpiirtoa? Kaikkia kun ei voida aina miellyttää – varsinkaan meitä visuaalisia ihmisiä.

Pönötys pannaan

Unohdetaanpa tältä erää tekninen jargoni ja keskitytään pääasiaan eli kuvan sisältöön. Mitä kuvissa pitäisi sitten olla, jotta ne vangitsevat käyttäjän huomion? Naamoja!

Noh, ei tietenkään kaikissa tapauksissa, mutta on huomattu, että kuvat, joissa on kasvoja, kiinnostavat ihmisiä eniten. Me ihmiset olemme sen verran simppeli eläinlaji, että huomiomme hakeutuu kaikenlaiseen itsemme kaltaiseen eli kasvoihin, jos sellaisia on tarjolla vaikka taustalla olevassa pääkuvassa. Jos yltyy hurjaan hifistelyyn, voi kuvassa olevan henkilön katseen suunnalla ohjata myös kävijää kiinnittämään huomiota katseen suunnassa olevaan elementtiin esimerkiksi nappiin tai otsikkoon. Ihmiskasvojen liiallista käyttöä kuvituksessa kannattaa kuitenkin välttää, jottei huomio pääasiasta eli sivuston sisällöstä karkaa.

Kuvissa kannattaa myös välttää niin sanottua pönötystä. Omakohtaisen kokemukseni (ja muilta visuaalisilta ystäviltäni keräämieni empiiristen tutkimustulosten) mukaan pönötyskuvat ovat ärsyttäviä. Pönötyskuvissa malli on näennäisesti aseteltu poseeraamaan epämukavasti. Haarukka on ollut puolimatkalla suuhun jo viimeisen puolen tunnin ajan ja käsi tärisee. Toisilleen ennestään tuntemattomat ihmiset esittävät idyllistä perhettä. Ihmiset on asetettu poseeraamaan hassun hauskoihin asentoihin ja nolostus paistaa selkeästi väkinäisen hymyn läpi. Huh…

Hyvät vinkit kuvien kalasteluun

Miten sitten kuvapankkisuosta on mahdollista löytää yhtään hyvää kuvaa ikinä koskaan APUA?! Ei hätää! Kuvapankkien taso on noussut huomattavasti, ja pienen kahlailun jälkeen luonteviakin kuvia löytyy paljon. Pienillä tekijöillä kuvat paranevat huomattavasti. Mallit eivät katso suoraan kameraan vaan tekevät jotain, joka tuntuu tilanteessa luontevalta. Kuvapinnassa on paljon eroja tarkkuusalueissa. Tilanteet tuntuvat aidoilta ja kuvatut ovat unohtaneet kameran olemassaolon. Näitä kuvia on myös helpompi käyttää taustalla, kun fokuspointti ei ole niin itsestään selvä. Ne välittävät enemmänkin tunnetta, kuin tietoa. Tulee hyvä fiilis.

Jos huomio halutaan viedä vielä vahvemmin sisältöön ja jättää pääkuvat vain taustalle kaunistamaan sivua, voi olla, että esimerkiksi kauniit maisemat ajavat asian parhaiten. Tällöin responsiivinen sivusto ei pääse aiheuttamaan päänvaivaa – ei ole vaaraa, että jollain selainkoolla pää katkeaa.

Jos pähkäilet kuvien kanssa – olet istunut jo tuntitolkulla pläräämässä kuvia ja kaikki tuntuu väärältä, huoli pois – jos siis jo olet asiakkaamme! Me täällä huolenpidossa autamme mielellämme sopivien kuvien hankkimisessa kaikenlaisille kuvapaikoille. Puen päälleni virtuaaliset kalastusvermeet ja sukellan kuvapankin kuvakoskeen – aina sieltä lopulta tärppää!