Kuvakoot, -suhteet ja kuvan tallentaminen

Hel.fi-sivusto on suunniteltu niin, että se mukautuu eri kokoisten laitteiden näytöille (mobiili, tabletti). Suositusten mukaiset kuvasuhteet toimivat sivuilla parhaiten. 

Tällä sivulla

Mies avannossa. Kuva: Maija Astikainen
Mies avannossa. Kuva: Maija Astikainen

Kuvakoot​

Hel.fi rajaa ja skaalaa kuvia niin, että ne toimivat ihanteellisesti eri paikoissa ja erilaisilla näytöillä. Eli kun lataat kuvan, siitä luodaan erikokoisia versioita, jotta samaa kuvaa voidaan tarvittaessa käyttää joustavasti eri tarkoituksiin.

Ennen kuvien lisäämistä ota huomioon nämä yleiset ohjeet:​

  • Yleensä kuvan kooksi riittää alle 2 Mt.  Tarvittaessa kuva voi olla isompikin, mutta emme suosittele yli 10 Mt:n kokoa.
  • Turvallinen leveys kuville on vähintään 1920 pikseliä. 
  • Valokuvat tulee tallentaa jpg-muodossa, koska tiedostokoot ovat pienempiä kuin png-kuvissa.
  • Ainoastaan grafiikka laitetaan png-muodossa.

Kuvasuhteet

Kuvasuhteella tarkoitetaan kuvan leveyden suhdetta kuvan korkeuteen riippumatta siitä, miten suuri kuva tosiasiassa on. Suhde ilmaistaan yleensä kahdella numerolla, joiden välissä on kaksoispiste, esimerkiksi 3:2.

Hel.fi sivustolla käytetään neljää eri kuvasuhdetta, joista tavallisin on 3:2-vaakakuvasuhde.

Hel.fi:ssä käytetään pääasiallisesti vaakakuvia. Vaakakuvat ovat helpommin selailtavia mobiilissa, koska ne eivät vie niin paljon tilaa. Lisäksi sivusto näyttää yhdenmukaisemmalta, kun kuvat ovat vaakakuvia.

Tämä vaakuvasuhde on eniten käytössä oleva kuvasuhde. Sitä käytetään sivustolla eri paikoissa, mukaan lukien:

  • Yksittäinen kuva ja kuvagalleria
  • Sisältökortit
  • Kuvallinen nosto 
  • Osa kansikuvakomponenteista
  • Uutisluettelot (pöytäkonenäkymässä)

Tämä kuvasuhdetta käytetään suurten ja rajattomien kuvien esittämiseen, minkä avulla voit luoda visuaalisesti vaikuttavia sivuja. Näissä kuvissa on hyvä huomioida se, että kuvasuhde muuttuu työpöytänäkymässä riippuen mitä muuta sisältöä kuvan yhteydessä olevassa tekstikentässä on. Komponentti, jossa kuvat esitetään 2.3:1-suhteessa:

  • Kuvallinen nosto: taustakuvallinen vaihtoehto

Neliökuvasuhde leikkaa kuvan neliön muotoiseksi. Tätä kuvasuhdetta käytetään sivustolla eri kohdissa, mukaan lukien:

  • Linkkilista -komponentti (kuvallinen versio)
  • Hakutulosten luettelo (mobiilinäkymässä)
  • Yhteystietokortti

Voit esittää kuvia hel.fi-sivustolla niiden alkuperäisessä kuvasuhteessa (ilman leikkauksia) valitsemalla tämän toiminnon kuvan vierestä. ​Tätä suositellaan vain silloin, kun kuva on esitettävä kokonaisuudessaan, esimerkiksi infografiikka tai logo eli tätä ei käytetä normaalien kuvien kanssa. Yleisesti ottaen tekstin käyttö kuvissa ei ole suositeltavaa, koska teksti ei tällöin ole ruudunlukuohjelmien saavutettavissa, se skaalautuu huonosti pienillä näytöillä, eikä tekstiä ole helppo kääntää sivuston eri kieliversioihin. ​Voit valita alkuperäisen kuvasuhteen vain yksittäistä kuvaa lisätessä, eli esimerkiksi kansikuvakomponentissa sitä ei voi valita. 

Kuvan tallentaminen

Kuva tallennetaan joko lisäämällä se suoraan mediakirjastoon tai kuvakomponentista painikkeesta Lisää mediatiedosto. Jos lisäät kuvan suoraan mediakirjastoon valitse Drupal-käyttöliittymän yläpalkista "sisältö" ja sen alta "media". 

Kuvaa tallennettaessa kuvalle laitetaan tiedoston nimi,  vaihtoehtoinen teksti (alt-teksti) ja kuvaajan nimi. Muista tallentaa kuva niin, että tiedoston nimestä selviää kuvan sisältö. Kuvaajan kohdalle lisätään vain kuvaajan nimi ja kuvan alle tulee automaattisesti kuvaajan eteen "Kuva:". 

Kuvan alt-teksteihin lisätään myös käännösversiot. Alt-teksti käännetään samalla tavalla kuin sivutkin eli kuvaa tallennettaessa yläreunasta "Käännä". 

Samat tiedot näkyvät kaikissa saman instanssin paikoissa, joissa kyseistä kuvaa käytetään. Eli jos haluat luoda esimerkiksi eri alt-tekstit eri sivuilla oleville kuville, tulee kuva tallentaa uudelleen eri nimellä.

Fokuspisteen muuttaminen

Voit vaihtaa kuvan fokusta (pääkohtaa ja rajausta) samalla kun lataat kuvan mediakirjastoon. Kuvan fokuspisteen muuttaminen vaikuttaa siihen, millä tavoin kuva rajautuu eri komponenteissa, joissa sitä käytetään. Fokuspiste on aina kuvan keskellä, joten jos siirrät sitä vasemmalle, rajautuu kuva oikealta puolelta. Kun fokuspiste on kuvan keskellä, rajautuu se vastaavasti sekä oikealta että vasemmalta puolelta. Mieti siis tarkkaan, minkä osan kuvasta haluat näyttää siltä varalta, että se rajautuu jossain kuvakomponentissa. Tämä on erityisen tärkeää kasvokuvissa.

Voit muuttaa kuvan fokuspistettä liikuttamalla kuvan päällä näkyvää pientä plusmerkkiä.
Voit muuttaa kuvan fokuspistettä liikuttamalla kuvan päällä näkyvää pientä plusmerkkiä.

Vaihtoehtoiset tekstit eli alt-tekstit

Saavutettavuuden varmistamiseksi, kuvalle on tärkeää kirjoittaa alt-teksti. Ruudunlukuohjelmat ja hakukoneet käyttävät alt-tekstiä. Alt-teksti myös korvaa kuvan silloin, jos kuva ei lataudu oikein. Vaihtoehtoisen tekstin tarkoituksena ei ole toistaa kuvan nimeä tai kuvatekstiä. Tarkoitus ei ole kuvailla koko kuvasisältöä vaan välittää se tieto, mitä kuva välittää. Alt-teksti päätetään pisteeseen. 

Alt-tekstin ei tule vastata kysymykseen ”mitä kuvassa on?” vaan ”mitä kuvasta pitäisi ymmärtää?”

Jos käytät kuvaa, jonka informaatio ei ole relevanttia ihmisille, jotka eivät näe, alt-tekstiä ei tarvita. Alt-tekstin sijaan Drupaliin tulee lisätä kuvaustekstin kohdalle kaksi lainausmerkkiä (""). Kun alt-tekstin tilalla on kaksi lainausmerkkiä, ruudunlukuohjelma ei kerro käyttäjälle, että sivulla ylipäätään on kuva. Nyrkkisääntönä voi pitää seuraavaa testiä: Jos kuva poistetaan sivulta, menettääkö näkevä verkkosivun käyttäjä sivun sisällöstä jotakin tai vaikuttaako se sivun ymmärtämiseen? Jos vastaus on kyllä, on kuva informatiivinen ja vaatii  aukikirjoitetun tekstivastineen. Jos olet epävarma, kirjoita alt-teksti. Alt-tekstin kirjoittaminen ei ole koskaan väärin. 

Tutustu Helsingin saavutettavuusmallin pikaohjeeseen tekstivastineista eli alt-teksteistä

Lue lisää ja katso esimerkkejä alt-teksteistä Helsingin saavutettavuusmalli-ohjeesta (pdf).

Muista nämä:

  • Jos kuva sisältää tekstiä, täytyy se kirjoittaa myös tekstimuodossa verkkosivuille. Ruudunlukuohjelma ei lue kuvan sisältämää tekstiä. 
  • Tällä hetkellä kuvalla voi olla Drupalissa vain yksi alt-teksti per kuvan kieliversio. Eli kun muokkaat kuvan alt-tekstiä muokkautuu se samalla kaikilta sivuilta, joilla se on käytössä samassa Drupal-instanssissa (esim. Päätöksenteko ja hallinto). Jos haluat luoda kontekstiriippuvaisia alt-tekstejä samalle kuvalle (tämä on saavutettavuuden kannalta suositeltavaa), sinun täytyy tallentaa kuva toistamiseen mediakirjastoon ja luoda sille eri alt-teksti. Jos kuvat sijaitsevat eri instansseissa, sama ongelma ei tule vastaan.
  • Muista kääntää myös alt-teksti. Alt-teksti käännetään samalla tavalla kuin sivutkin eli kuvaa tallennettaessa yläreunasta "Käännä". 
  • Vinkki: kuvien alt-tekstit näkee sivun oikeassa alakulmassa olevasta kysymysmerkki-kilkkeestä (samasta kuin sivun otsikkohierarkian).

Kuvien oikeudet

Muistilista kuvausoikeuksista:

  • Hel.fi-sivustolla käytetään vain kaupungin kuvapankin kuvia, joita kaupungilla on kuvaajien kanssa tehdyn sopimuksen mukaan lupa käyttää verkkosivuillaan. Tutustu kaupungin kuvapankkeihin.
  • Huolehdithan tarkkaan, että käyttämiesi kuvien kuvausoikeudet sallivat kuvan käytön siinä kontekstissa jossa aiot niitä käyttää. Esim. mikäli valokuvassa on tunnistettavissa henkilöitä, on kaikilta tunnistettavilta henkilöiltä kysyttävä lupa kuvan käyttöön.
  • Huolehdithan myös sen, että kuva poistetaan hel.fi sivustolta, kun oikeus sen käyttöön päättyy.
  • Muista aina lisätä kuvaajan nimi kuvan lisätessäsi.
  • Ethän muokkaa kuvia kuvankäsittelyohjelmilla.