Verkkosivuston ylläpitäjän opas: Verkkosivuston kuvapaikat

Verkkopalvelun kuvien merkitykseen ja tämän myötä niiden suunnitteluun ja tuotantoon havahdutaan monissa projekteissa liian myöhään. Ajantasainen, brändiä ilmentävä kuvamaailma tukee yhtenäistä markkinointiviestintää ja helpottaa verkkopalvelun sisällönsyöttöä.

Tämä artikkeli käsittelee muun muassa:

1. yleisiä ohjeistuksia liittyen verkkopalvelun kuvituskuviin ja niiden rooliin
2. eri sisältöelementtien kuvapaikkojen määrityksiä
3. kuvakokojen ja -formaattien teknisempiä reunaehtoja sekä suosituksia.

Huom: tarkat määritykset kuvien hyödyntämisestä, niiden tavoitteista sekä kuvapaikkojen koista ovat aina projektitiimin kesken päätettävissä.

Mitä ovat verkko­palvelun kuvitus­kuvat?

Kuvituskuvat ovat olennainen osa verkkopalvelun visuaalista sisältöä: ne vahvistavat brändimielikuvaa, tukevat tarinankerrontaa ja luovat visuaalista tasapainoa tekstisisällön rinnalle.

Kuvituskuvia hyödynnetään usein etenkin sivuston juoksevassa päivityksessä, kuten blogeissa ja uutisissa, sekä sosiaalisessa mediassa. Myös verkkopalvelun etusivulla sekä laskeutumissivuilla kuvituskuvat toimivat usein tärkeänä viestinnällisenä elementtinä.

Yhden­mukainen, brändille tunnus­omainen ja riittävän laaja kuva­pankki helpottaa visuaalisen identi­teetin hallintaa ja verkko­sivuston sisällön­syöttöä.

Mitä huomioida kuvituskuvien suunnittelussa ja tuotannossa?

Tärkeimmät ohjeet, jotka kerromme aina asiakkaillemme:

1. kuvituskuvan sisällön tulee kestää skaalautumisesta aiheutuvaa rajautumista
2. eri sisältöelementtien kuva-alueiden kuvasuhteet on huomioitava
3. kuvan resoluution tulee olla riittävän suuri.

Tarkennetaanpa näitä aiheita seuraavaksi.

Mikä on sopiva resoluutio kuvalle?

Suosittelemme aina asettamaan verkkopalvelun sisältöelementille – oli se sitten koko näytön korkeuden ja leveyden vievä kuva-alue tai pienempi, esimerkiksi useamman rinnakkaisen kuvan sisältävä lohko – riittävän suurikokoisen vaakakuvan, joka on minimissään 1920 pikseliä leveä (kuitenkin maksimissaan 2560 px leveä).

Miksi näin suuri? Verkkopalvelun kehittäjän vastuulla on määrittää, että WordPress asettaa yksittäiselle sisältöelementille sopivan koon tästä alkuperäisestä tuodusta kuvasta.

Ei tekstiä kuvassa

Emme suosittele asettamaan verkkosivustolle kuvia, jotka sisältävät tekstiä. Rajautumisen ja tekstin leikkaantumisen riskin lisäksi teksti kuvassa on usein epätarkkaa, luoden viimeistelemättömän vaikutelman.

Tekstiä sisältävän kuvan käyttäminen verkkosivustolla on myös AA saavutettavuustason haaste, sillä se ei ole luettavissa erilaisilla näytönlukuohjelmilla, se vaatii aina riittävän kontrastin, eikä tekstisisältö kuvassa yleensä skaalaudu täyttäen kokoon liittyviä saavutettavuusmäärityksiä.

Kuvituskuvien onkin yleisesti tärkeä toimia tavalla, jossa kuvan rajautuminen ei aiheuta kuvan viestin heikkenemistä.

Tarkennetaan tätä seuraavaksi esimerkkien avulla.

Esimerkki 1: Hero-elementti

Etusivun hero on usein näyttävin kuvapaikka verkkopalvelussa. Sen kuvasuhde vaihtelee suunnittelusta riippuen, mutta suurempien näyttöpäätteiden täyden näytön herossa käytetään usein 16:9-kuvasuhdetta – suositusresoluutio on tällöin min. 1920 × 1080 pikseliä.

Ja mobiili?

Suunnittelemamme verkkopalvelut ovat aina responsiivisia, eli toimivat jokaisella ruudulla aina mobiililaitteesta tablettiin, läppäriin ja suurempiin näyttöihin. Sisällöllisesti hero-elementtiin asetettava kuvituskuva onkin tärkeää olla ”geneerinen” sisällöltään, jotta se kestää skaalautumista (eli rajautumista) eri näyttökokojen välillä.

Kapeammilla näyttöleveyksillä (esim. mobiililaitteella) hero-elementin kuva-alue voi olla myös suunniteltu eri kuvasuhteeseen – tämä edellyttää erillisen kuvan asettamista sisällönhallinnassa. Käytännössä tämä tarkoittaa usein kapeammilla näyttöleveyksillä pystyformaatin kuvaa ja suuremmilla laitteilla paremmin toimivaa vaakakuvaa.

Mikäli erillisiä kuvia ei aseteta, käyttää WordPress tällöin yhtä ja samaa kuvaa kaikilla näytön leveyksillä. Tässä riskinä on kuvan sisällön merkittävämpi rajautuminen kapeamman kuva-alueen ulkopuolelle.

Esimerkki 2: 50/50 -elementti

Projektitiimi vastaa aina eri sisältöelementeille määritettävistä kuva-alueista ja niiden ominaisuuksista.

50/50 (kuva+tekstisisältö) -elementin kuva-alue voidaan määrittää eri tavoin:

• Vapaa kuvasuhde: Kuva asettuu sen omassa kuvasuhteessa kuvasisällölle määrätylle alueelle. Kuvan korkeus usein määrittää tällöin koko elementin korkeuden.
• Täysin kiinteä kuvasuhde: Asetettu kuva keskittyy määritettyyn (esim. 1:1) kuva-alueeseen. Riskinä kuvan sisällön rajautuminen laidoista, mikäli sitä ei ole sisällöntuottajan toimesta ensin rajattu kyseiseen kuvasuhteeseen.
• Korkeuteen tai leveyteen sidottu kuva-alue: Kuva-alueelle voidaan määrittää maksimikorkeus tai -leveys, jolloin kuva asettuu omassa kuvasuhteessaan kyseiselle alueelle.

Verkkopalvelun projektitiimin on tärkeä kommunikoida eri kuvapaikkojen määritykset asiakkaan sisällöntuottajalle. Kehittäjän vastuulla on varmistaa määritysten löytyminen myös WordPressin sisällönhallinnasta elementin yhteydessä.

Henkilöstökuvat

Monilla sivustoilla esitetään myös kuvia henkilöstöstä. Henkilöstökuvien lohkoissa kuva-alueet usein määritetään kiinteästi pysty- tai neliöformaattiin – asiakkaan tarpeisiin, kuten olemassa oleviin materiaaleihin pohjautuen. Yleisesti henkilökuvissa oleellista on visuaalinen yhtäläisyys ja henkilön asettuminen kuva-alueen keskelle.

Henkilöstökuvia suunniteltaessa on tärkeää huomioida myös muut käyttöyhteydet, kuten blogikirjoittajanostot ja yhteydenottolohkot. Projektitiimin, asiakkaan ja mahdollisen kuvaajan tai graafikon on ymmärrettävä kuvien käyttötarkoitukset ja tekniset reunaehdot verkkopalvelussa.

Käyttöliittymän ikonit tukevat visuaalista ilmettä

Ikonit ovat globaalisti vakiintuneita, yleisesti ymmärrettyjä kuvakkeita, jotka tukevat painikkeen, ohjauksen, noston tai muun toiminnon tarkoitusta. Verkkopalvelun uudistuksessa suunnittelija usein määrittää ikonit, jotka tukevat käyttöliittymän visuaalista ilmettä, sekä kokemusta viimeistellystä ja toimivasta verkkopalvelusta.

Yleisimpiä verkkopalveluissa käytettäviä ikoneita ovat esimerkiksi hakutoiminnon suurennuslasi, verkkokaupan ostoskori tai -kärryt, suodatusten ikonikuvakkeet, sekä yhteydenoton sähköposti- ja puhelinikonit. Mahdollisuuksia on monia, ja ikonikuvakkeiden tyyleillä voi merkittävästi tukea brändi-ilmettä.

Entä kuvan tiedosto­muodon ja -koon merkitys?

Kuva­tiedostojen koko vaikuttaa sivuston lataus­nopeuteen, lataus­nopeus puolestaan käyttö­kokemukseen ja haku­kone­löydettävyyteen. Kuvat tulisi nimetä oikein, jotta hakukone suosii. Entä miten valitaan sopiva kuva­tiedoston formaatti siten, että kuvan laatu säilyy parhaana mahdollisena?

Kuvatiedoston koon määritys WordPressin ja kehittäjän vastuulla

Kuten ylempänä jo mainittu, WordPress optimoi kuvatiedostot automaattisesti eri kokoihin perustuen verkkopalvelun tarpeeseen. Kehittäjämme siis määrittää ”alkuperäisestä” ladatusta kuvatiedostosta sopivan koon kullekin sisältöelementille, tehostaen sivuston latausnopeutta ja käyttäjäkokemusta.

Usein nämä optimoidut kuvakoot toimivat erinomaisesti, mutta eri kuvaformaatit huomioimalla voi vielä varmistaa parhaan mahdollisen onnistumisen verkkopalvelun kuvien kanssa.

Tiedostomuodolla on kuitenkin merkitystä

Yleinen nyrkkisääntö: JPEG -tiedostomuotoa käytetään valokuvissa ja PNG -tiedostomuotoa tarkkareunaisissa grafiikoissa ja muissa läpinäkyvän taustan vaativissa kuvituksissa.

Toteuttamamme WordPress-sivustot tukevat aina tiedostoformaatteja JPEG, PNG, GIF, sekä laajennusten kautta SVG- ja WebP-formaatteja.

Hyödynnämme usein projekteissamme myös erillisiä, Word­Pressin oletus­toimintoja laajentavia kuvien opti­mointi­työ­kaluja.

Alla koottuna esittelyt yleisimmistä verkkoympäristön tiedostoformaateista ja niiden käyttötarkoituksista.

JPEG (tai JPG):

• Yleisimmin käytetty, ”häviöllinen” (lossy), tiedostomuoto
• Häviöllisen pakkauksen ansiosta kaikista kevyin tiedostomuoto, joskin menettää informaatiota pakatessa (kuvan laatu heikkenee, usein kuitenkin silmälle huomaamattomasti)
• Tukee erinomaisesti etenkin värikkäitä valokuvia (toistaa miljoonia värejä)
• Soveltuu parhaiten verkkosivuston valokuviin, stock-kuviin, taustakuviin sekä blogikuvituksiin.

Lue lisää JPEG-tiedostomuodosta

PNG

• ”Häviötön” (lossless) tiedostomuoto
• Häviötön pakkaus tarkoittaa suurempia tiedostokokoja, mikä puolestaan voi kasvattaa sivuston latausnopeutta
• Mahdollistaa syvätyt kuvat läpinäkyvyyden tukemisen ansiosta
• Soveltuu parhaiten tasaisten ja alunperin vektorigrafiikkana luotujen grafiikoiden, tarkkareunaisten ja kontrastisten kuvakaappausten, logojen sekä ikonien tiedostomuodoksi.

Lue lisää PNG-tiedostomuodosta

WebP

• Uudempi, verkkoympäristöön kehitetty Googlen lanseeraama tiedostomuoto
• Optimoitu formaatti, joka usein muodostetaan WordPressin laajennuksella mediakirjastoon ladatusta JPEG tai PNG kuvasta
• Pakkaa kuvan pienemmäksi kuin JPEG ja PNG, kuitenkin säilyttäen kuvan laadun paremmin
• Tukee animaatiota ja läpinäkyvyyttä
• WordPressin laajennus varmistaa tämän optimoidun formaatin käytön niissä selaimissa, missä sitä tuetaan (suurimmassa osassa tänä päivänä)

Lue lisää WebP-tiedostomuodosta

SVG

• Tukee kaksiulotteisia vektorigrafiikkakuvia
• Toisin kuin pikseleistä muodostuvat kuvaformaatit (JPEG, PNG, WebP), muodostuu SVG matemaattisista yhtälöistä, jotka mahdollistavat loputtomasti skaalautuvat muodot, kaaret ja suorat
• Mahdollistaa koodiperusteisten animointien luomisen
• Sopii käytettäväksi ikoneihin, logoihin sekä kaksiulotteisiin kuvioihin ja kaavioihin
• Toteutuksissamme yleisimmin käytetty logojen formaatti

Lue lisää SVG-tiedostomuodosta

Hyödynnämme siis usein projekteissamme myös erillisiä, WordPressin oletustoimintoja laajentavia kuvien optimointityökaluja ja sisällönjakoverkostoja kuvien tehokkaaseen käsittelyyn ja tarjoamiseen loppukäyttäjille.

Nämä työkalut hoitavat kuvien tiedosto­kokojen pakkaamisen tehokkaasti ja tekevät usein automaattisesti konversiot esimerkiksi JPEG-muodosta WebP-muotoon. CDN-verkostojen kautta kuvien lataamis­nopeus tehostuu entisestään. Kaikki tämä vaikuttaa suotuisasti niin sivuston käyttö­kokemukseen kuin haku­kone­optimointiinkin. 

Kuvatiedostojen nimeäminen ja hakukonelöydettävyys

Haluamme ottaa verkko­sivustoista kaiken hyödyn irti, eikös?

Huolellisilla nimeämis­käytänteillä verkko­sivuston kuvat löytyvät Googlen kuva­haku­tuloksista ja toimivat orgaanisena reittinä sivustolle. Niillä voidaan myös tehostaa sivuston lataus­nopeutta sekä parantaa saavutettavuutta – hyödyt ovat siis moninaiset.

Neljä oleellista huomiota kuvatiedostojen nimeämiseen:

1. Nimeä kuvatiedosto kuvan sisältöä kuvailevasti: ”Kissa-ajaa-autoa.jpg”. Huomioi kuitenkin maltillinen merkkimäärä
2. Erottele sanat väliviivoilla: ”Kissa-ajaa-autoa.jpg”
3. Hyödynnä vaihtoehtoisia tekstejä (alt text): Kuvan sisältöä kuvailevat ”alt tekstit” ovat saavutettavuutta ja hakukoneoptimointia edistävä käytäntö. Älä kuitenkaan täytä näitä vaihtoehtoisia tekstejä pelkillä avainsanoilla. Lue lisää alt teksteistä.
4. Hyödynnä avainsanoja (maltillisesti): Avainsanat mahdollistavat paremman sivuston optimoinnin. Huomioi maltillinen, vain oleellisten avainsanojen käyttö, jotta Google ei tulkitse kuvaa spam-sisällöksi. Lue lisää avainsanojen käytöstä yleisesti.

Yhteenvetona

Kuvamaailma tukee ja rakentaa mielikuvaa brändistä – kuva kun kertoo enemmän kuin tuhat sanaa. Kuvituskuvat rytmittävät sisältöä ja toimivat huomion herättäjänä, sitouttaen käyttäjää ja parantaen käyttökokemusta.

Kannustammekin asiakkaitamme tuottamaan laadukkaita ja brändin visuaalista identiteettiä tukevia kuvia verkkosivustolla käytettäviksi. Hyvin toteutettu kuvapankki helpottaa sisällöntuotantoa ja tehostaa markkinointiviestintää.

Verkkopalveluun ladatun kuvan on tärkeää olla riittävän suuri ja toimia sisällöltään tavalla, joka kestää mahdollisen rajautumisen.

Kysyttävää tai kehitettävää verkkosivustonne kuvapaikoissa? Asiakkaamme, ota yhteyttä Huolenpitoon.

Eikö verkkopalvelunne ilmennä brändiä parhaalla mahdollisella tavalla? Tehdään asiaan muutos! Ota yhteyttä myyntiimme.

Ella Killinen

Digital Designer

Piditkö artikkelistamme?