Siirry sisältöön

Kuvat

Kuvakoot ja -suhteet

  • WordPress muodostaa automaattisesti kaikista ladatuista kuvista tarvittavat kuvakoot eri käyttöpaikkoihin (artikkelikuva, herokuva, nosto jne.). Kuvia ei tarvitse pienentää tai rajata etukäteen.
  • Eri lohkot ja elementit käyttävät erilaisia kuvasuhteita – tarkista aina sopivuus. Kuvasuhteet voi tarkistaa tämän sivun alaosasta, Tarkat kuvasuhteet -haitarista.
  • Suositeltavaa on käyttää vaakakuvia, jotka toimivat useimmissa paikoissa parhaiten.
  • Kuvien tärkein sisältö kannattaa sijoittaa kuvan keskelle, sillä leikkautuminen vaihtelee laite- ja näyttökoon mukaan.

Kuvan koko

  • Suositus: vähintään 3000 px leveä kuva. Tämä siitä syystä, että kuvaa voidaan käyttää kaikissa kuvakoissa ja kuvanlaatu pysyisi tasaisena kaikilla näytöillä. Mikäli järjestelmään syötetään pienempi kuva, se ei pysty luomaan siitä pakattuja muotoja, jolloin sivulla näytetään alkuperäinen kuva. Tämä tekee sivusta hitaan ja Google arvioi sivun huonoksi.
    • Poikkeuksena tähän on yhteystietokuva, joka on pystykuva ja minimissään 844 px leveä. Yhteystietokuvan kuvasuhde on 3:4.
  • Tiedostojen maksimikoko on 15 Mt.
  • Suositeltu resoluutio: 72 dpi, joka toimii hyvin verkossa.
  • Kuvan olennainen asia olisi hyvä olla kuvan keskellä. Tällöin se ei skaalautuessaan leikkaannu pois kuvasta eri kokoisilla näytöillä. Esim. ihmisen silmät/kasvot olisi tärkeä sijoittaa kuvan keskikohtaan.
Tarkat kuvasuhteet

Järjestelmä luo itse alkuperäisestä kuvasta eri kuvakokoja mitä käytetään eri lohkoissa. 

Mikäli poikkeuksellisesti silti jostain syystä haluat tehdä niin täsmällistä työtä, että itse vaikutat siihen miten kuva rajautuu eri kuvakohdissa kannattaa syöttää järjestelmään jo valmiiksi oikeilla kuvasuhteilla oleva kuva. Kuvasuhteet kannattaa myös kertoa valokuvaajalle mikäli ostatte kuvia.

Yleisin käyttämämme kuvasuhde on 16:9

  • Kuvasuhde ei vie pystysuunnassa liiaksi tilaa, ja sitä voidaan käyttää esimerkiksi palstan levyisenä.
  • Kuvasuhde on hieman tavallisimpia valokuvan kuvasuhteita matalampi. Normaali vaakakuva rajautuu vähäisesti ylhäältä ja alhaalta.

Muut kiinteät kuvasuhteet

  • Sivustolla saatetaan käyttää myös muita kiinteitä kuvasuhteita, kuten neliö (1:1).
  • Kuva rajautuu automattisesti, mikäli alkuperäisen kuvan kuvasuhde on eri.
  • Alkuperäinen kuva voi tehdä jo etukäteen tähän kuvasuhteeseen. Esimerkiksi henkilökuvat (3:4).

Täysleveä kuva

  • Kuva on leveydeltään aina reunasta reunaan, näytön koosta riippumatta. Korkeus ei kuitenkaan vaihdu samassa suhteessa, vaan pysyy aina samana tai lähes samana.
  • Kuva rajautuu työpöytänäytöillä paljon ylhäältä ja alhaalta.
  • Edellyttää suurikokoista (min. 3000 pikselin levyistä) kuvaa.

Sisällön mukaan rajautuva kuva

  • Kuva voi rajautua esimerkiksi viereisen tekstipalstan korkeuden mukaan.
  • Kuvasuhde muuttuu myös näytön koon mukaan.
  • Kuvalle on voitu asettaa esimerkiksi minimikorkeus.

Yhteystiedot

  • Yhteystieto on pystykuva eli 3:4. Niitä mahtuu peruspalstalle kaksi, joten yksittäisen yhteystiedon leveys on noin 400 px. Mutta suosituksena on pistää puolet isompia kuvia, jotta toimii myös teräväpiirtonäytöillä, joten yhteystiedon kuvaksi suosittelisimme minimissään 800 px leveyttä.
  • Vanhassa Lukkarissa on ollut suositus käyttää kokoa 200 x 200px tai 200 x 266px. Nämä kuvat ovat liian pienet uudelle Lukkarille.

Yleisohje kuvakokoihin pdf-muodossa(siirryt toiselle sivustolle, avautuu uuteen ikkunaan) (sisältää erikokoiset esimerkkikuvat)

Kuvasuhteet eri lohkoissa

Kuvasuhde 16:9

  • Tapahtumat
  • Tavallinen kuva
  • Täysleveä kuva
  • Artikkelinoste
  • Tapahtumakooste
  • Sisältönostokortit / alasivulistaus
  • Blogi
  • Tilan kuva
  • Tilalistaus

Kuvasuhde 4:3

  • Kuva ja teksti
  • Kuvakaruselli
  • Kuva ja lista

Kuvasuhde 1:1

  • Kuva, teksti ja linkki
  • Polku tai aikajana
  • Kuvagallerian pikkukuvat (avautuvat isompina klikkaamalla)

Muut kuvasuhteet

  • Alasivun hero 3:4 ja 4:3. Kollaasi missä pysty- ja vaakakuvia.
  • Nostekaruselli 3:4 ja 4:3. Kollaasi missä pysty- ja vaakakuvia.
  • Uutislistauksen kuvat. Yksi iso kuva suhteessa 1:1 ja muut kuvat 16:9.
  • Yhteystietonosto 3:4 (pystykuva)

Tutustu esimerkkeihin kuvasuhteineen siitä miltä syötetty kuva näyttää eri lohkoissa. Esimerkit löytyvät vanhasta Lukkari-ohjeesta(siirryt toiselle sivustolle, avautuu uuteen ikkunaan).

Kuvien käsittely ja näkyminen

  • Alkuperäistä kuvaa ei koskaan näytetä julkisella sivulla – näkyvissä on vain kyseisen lohkon tai elementin käyttämä kuvakoko.
  • Alasivun herokuvat: käytettävissä on sekä pysty- että vaakaversioita.

Kuvien hallinta mediakirjastossa

  • Kun kuva ladataan mediakirjastoon, WordPress muodostaa automaattisesti kaikki tarvittavat kuvakoot.
  • Kuvien osoitteet säilyvät, vaikka kuva siirretään kansiosta toiseen – polut eivät rikkoudu.
  • Kuvien ja liitetiedostojen hallinta tapahtuu samassa mediakirjastossa.
  • Käyttäjällä täytyy olla oikeudet kaikkiin niihin kansioihin, joista hän haluaa käyttää kuvia.
  • Yhteiskäyttöiset kuvat (kaikkien seurakuntien käyttöön) tulee tallentaa sovittuun kansioon. Tämä käytäntö tarkennetaan vielä erikseen.
  • Kuvaan liittyvät tekstikentät:
    • Vaihtoehtoinen teksti = ns. alt-teksti (näytetään ruudunlukijoille).
    • Kuvateksti = näytetään sivulla kuvatekstinä.
    • Kuvaus = ei näy julkisesti, voi käyttää omiin muistiinpanoihin (esim. kuvaajan tiedot).

Kuvaresursseja

Kirkon viestinnässä on kerätty ja kuratoitu erilaisia kuvakokoelmia, joita voi käyttää kuvituskuvina seurakunnan verkkosivuilla. On hyvä kuitenkin ensisijaisesti nostaa verkkosivuille esille omaa, paikallista kuvamateriaalia, mutta alla mainittuja kuvaresursseja saa myös käyttää vapaasti.

Canvasta löytyy myös erilaisia pohjia, joiden avulla voi tehdä Lukkariin sopivia kuvia.

Kuvia materiaalipankissa
Kuratoituja kuvakokoelmia
Canva-pohjia

Huom! Tee itsellesi aina oma kopio Canva-pohjasta ennen kuin alat työstämään sitä.

Selkokuvia materiaalipankissa