Kuvien käyttö kotisivuilla

Kuvien, videon ja muun visuaalisen materiaalin käyttö ovat hyvin toimivien kotisivujen keskiössä. Oli kyseessä sitten yrityksen verkkosivut tai vaikkapa verkkokauppa, graafinen materiaali parantaa sivuston käyttökokemusta. Jopa hakukonenäkyvyys voi parantua niiden myötä. Yhdessä tekstin kanssa kuvat ovat tärkein elementti verkkosivuilla.

Kuva kertoo enemmän kuin tuhat sanaa. Video vielä enemmän.

Visuaalisuus koukuttaa kävijän

Järkevä kuvien käyttö tukee ympäröivää tekstiä ja keventää sitä erottelemalla isot tekstimassat toisistaan. Oikea asettelu korostaa tekstin ydinsanomaa ja tekee pintapuolisesta silmäilystä helpompaa ja nopeampaa. Kuvat antavat lukijan silmille luonnollisia taukoja isojen tekstimassojen keskellä. Käyttökokemus muuttuu viihdyttävämmäksi ja lukija viipyy pidempään tekstisi parissa.

Kuvilla on myös muita tehtäviä. Ensinnäkin niiden avulla herätetään käyttäjän huomio. Jos kyseessä on tuotteen tai palvelun myyminen, kuvan tulee herätellä mielenkiinnon lisäksi myös haluja. Oikean kuvituksen valinta ei kuitenkaan aina ole helppoa. Parhaimmillaan se tukee verkkosivujen visuaalista linjaa ja tarjoaa lisäinformaatiota.

Lazy Loading

Lazy loading (viivästetty lataaminen) on tekniikka, joka nopeuttaa sivun lataamista ja parantaa näin myös käyttökokemusta. Käytännössä kyse on siis siitä, että kuvat ladataan vain selaimen näkyvälle osalle. Esimerkiksi sivun latauksen yhteydessä kuvat ladataan vain sivun yläosan näkyvälle alueelle, mutta näkymättömiin jääviä kuvia ei. Näkymättömiin jäävät kuvat ladataan tarpeen mukaan vain, jos kävijä skrollaa sivua alaspäin.

Paremman suorituskyvyn lisäksi myös kaistaa säästyy, kun tarpeettomien resurssien lataaminen jää pois.

Kuvat ja responsiivisuus

Responsiivisten kuvat eri kokoisille laitteille
Oikea kuvakoko säästää kaistaa ja lyhentää latausaikoja.

Mobiililaitteiden myötä internetin selailuun käytettävän laitekirjon koko on kasvanut valtavaksi. Kuvien kannalta tarkasteltuna fyysisten mittojen lisäksi on erityisen tärkeää pitää mielessä myös tiedostokoko. Vaikka teknisessä mielessä on täysin mahdollista skaalata iso kuva pienemmäksi ja toisin päin, ei tällä ole tietenkään vaikutusta tiedostokokoon. Turhan isojen kuvien käyttö ei pelkästään tuhlaa kaistanleveyttä, mutta pidentää myös latausaikoja. Erityisesti mobiilikäyttäjien kärsivällisyys on koetuksella, mutta myös Google voi heikentää sijoitustasi pitkien latausaikojen takia. Tässä siis muutama asia muistilistalle:

  • Tekniset tiedot: 72dpi, RGB, Formaatti .png tai .jpeg
  • Käytä jpeg-formaattia valokuville ja png-formaattia logoille ja grafiikoille
  • Luo kuvasta eri koot päätelaitteille (älypuhelin, tabletti, tietokone). WordPress luo mediakirjastoon ladatuista kuvista automaattisesti useita eri kokoja.
  • Pakkaa kuvat ennen käyttöä, mutta pidä huoli, että kuvan yksityiskohdat ja informatiivisuus eivät kärsi liikaa. Apuna voit käyttää esim. TinyPNG:tä.

Lisää liikennettä kuvien avulla

Epäsuorasti kuvien avulla voi havitella myös lisäliikennettä kotisivuille. Googlen kuvahaku on nykyään yhtä luonnollinen tapa selailla tarjontaa kuin perinteinen tekstihakukin. Kukapa meistä ei olisi kuvahaun kautta päätynyt jonkin verkkokaupan sivuille tilaamaan ko. tuotetta. Tässä muutama vinkki kuvien hakukoneoptimointiin.

Kuvien nimeäminen

Kuvatiedostojen nimeämiseen kannattaa kiinnittää huomiota. Nimeämisessä kannattaa käyttää artikkelin kannalta olennaisia hakusanoja. Hyvä tiedostonimi identifioi kuvan sisällön. Sanat erotellaan toisistaan väliviivalla esim. ”punainen-auto-pihalla.jpg”.

Alt-teksti

Alt-teksti on tekstipohjainen vaihtoehto kuvalle, kun selain ei syystä tai toisesta pysty näyttämään itse kuvaa. Tällaisessa tilanteessa alt-tekstin sisältö näkyy kuvalle varatun tilan vasemmassa yläkulmassa. Tekstillä on myös SEO-ulottuvuus. Hakukoneet käyttävät sitä meta-tietona yrittäessään ymmärtää paremmin kuvan sisältöä.

Rikkinäinen kuva alt-tekstillä
Toimimattomien kuvien tilalla näkyy alt-teksti.

Kuvateksti

Kuvateksti näkyy kuvan alapuolella. Ks. yläpuolella oleva havainnekuva rikkinäisestä linkistä. Sen tarkoitus on kertoa, mitä kuvassa näkyy tai tapahtuu. Alt-tekstin lisäksi myös kuvateksti on tärkeä hakukoneiden kautta tapahtuvan indeksoinnin kannalta, mutta myös käyttäjät lukevat ne suuremmalla todennäköisyydellä, vaikka eivät itse varsinaista tekstiä lukisikaan.

Tekijänoikeudet

Kuvien käytöstä ei tietenkään voi puhua mainitsematta tekijänoikeuksia. Kun käytät kuvia kotisivuillasi, varmista aina, että sinulla on niiden käyttöön tarvittavat oikeudet. Tämä koskee erityisesti vierailta sivuilta ladattua materiaalia, mutta myös kuvapalvelujen kautta ostettuja kuvia. Kuvien käyttöön on olemassa usein monenlaisia lisenssejä, joten pidä huoli, että käyttöoikeus on riittävän kattava. Näin vältyt ikäviltä jälkiseuraamuksilta.

Kuvat tukevat viestiä

Kuvat ja ikonit tukevat viestiä.

Yllä näet kaksi erilaista tapaa esittää verkkokaupan toimintavaiheet käyttäjälle. Kumpi on mielestäsi selkeämpi? Molemmat tavat sisältävät saman informaation, mutta alempi on helpompi ja nopeampi ymmärtää. Kuvitus helpottaa sivuston silmäilyä. Kuvat keventävät sivun rakennetta ja auttavat käyttäjää löytämään haluamansa.

EXIF-tieto

EXIF-data on kokoelma erilaisia kuvaan liittyviä tietoja, jotka on tallennettu itse kuvaan. Nämä tiedot voi olla tallentanut kuvaan esimerkiksi kamera, jolla ko. kuva on otettu. EXIF-data voi sisältää mm. seuraavia tietoja:

  • GPS paikkatieto
  • omistaja
  • päivämäärä ja aika
  • kameran/puhelimen malli ja kuva-asetukset,
  • ICC väriprofiili
  • esikatselukuvia (kameraa varten)
  • jne.

Kaikki edellä mainittu data paitsi kasvattaa tiedoston lopullista kokoa myös paljastaa mahdollisesti tietoa, jota et halua jakaa eteenpäin. Kyse ei välttämättä ole tietenkään ongelmasta, mutta asia on hyvä tiedostaa.

Monet kuvankäsittelyohjelmat mahdollistavat EXIF-datan käsittelyn ja poistamisen, mutta WordPressille on olemassa laajennuksia, joiden avulla tiedon poistamisen voi automatisoida. Yksi tällainen vaihtoehto on ShortPixel.

Yhteenveto

Kuvat ovat verkkosivuilla ensimmäinen huomiota herättävä asia. Ne palvelevat montaa eri asiaa: designia, ymmärtämistä, myyntiä ja houkuttelevat parhaimmillaan jopa liikennemääriä. Siksi olisikin suorastaan vääryys ajatella visuaalisia elementtejä pelkkinä koristeina. Ymmärrä siis kuvien tärkeys ja anna niille vähintäänkin yhtä paljon arvoa kuin kirjoitetulle sisällölle.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *