Drupal: Aalto.fi-sivusto

Vinkkejä kuvien käyttöön aalto.fi-sivustolla

Kuvat ovat oleellinen osa sisällön luomista aalto.fi:ssä. Tässä blogissa katsomme tarkemmin millaisia kuvia voit sisällössäsi käyttää, miten kuvia voi muokata, jotta ne näyttävät hyvältä kaikilla laitteilla ja mitä taas tulee välttää kuvaa valitessa.

Kuvat ovat erinomainen tapa parantaa sivusi ulkonäköä ja saada lukija kiinnostumaan sen sisällöstä. Kuvien käyttö aalto.fi:ssä on suositeltavaa, mutta ennen kuvien lataamista kannattaa lukea tältä sivulta löytyvät ohjeet ja vinkit.

Ota huomioon nämä yleiset ohjeet kuvia ladatessasi:

  • Suurin sallittu tiedostokoko on 10 mb, mutta pidä kuva niin pienenä kuin mahdollista ilman, että se vaikuttaa kuvan resoluutioon negatiivisesti. Yleisesti ottaen kuvan kooksi riittää 1 mb.
  • Kuvan leveyden tulee olla enintään 2560 pikseliä. 1280 pikseliä riittää hyvin kuville, joita ei käytetä koko näytöllä, kuten hubien pääkuvat tai ns. hero-kuva. Voi tarkistaa kuvasi pikselit klikkaamalla hiiren oikeaa kuvan kohdalla ja tarkastelemalla sen ominaisuuksia/asetuksia, tai käyttämällä jotakin kuvankäsittelyohjelmaa kuten Photoshopia.
  • Valokuvat tulee tallentaa jpg-muodossa värien parantamiseksi, kun taas grafiikan ja kuvituskuvien tulee olla png-muodossa tallennustilan säästämiseksi.

Aalto.fi-sivuston kuva- ja mediakomponentit

Kuva- ja mediakomponentteja voi näyttää usealla eri tavalla aalto.fi-sivustolla. Lisätietoja media slider-, galleria- ja videokomponenteista sekä kuvista.

Lue lisää
Drupal abstract image for Comms use only, blue

Kuva tekstillä eli "Image with text" -komponentti

Lue alta lisää kuvan sijoituksesta sekä adaptiivisesta ja oletusasetuksesta image with text -komponenttia käytettäessä.

Lue lisää
Three students sitting next to a wooden table, and studying. Two of them have laptops in front of them. Photo: Unto Rautio
Example of single image

Kuvan mukauttaminen eri formaatteihin ja fokuspisteen käyttäminen

Sivustolle ladatut kuvat tallentuvat Drupaliin alkuperäisessä formaatissaan ja tiedostokoossaan. Kun kuvaa käytetään jossain komponentissa, muuttaa Drupal sen formaattia siten, että kuva istuu käytettyyn komponenttiin. Myös kuvan kuvasuhde ja resoluutio vaihtelevat riippuen sivua katselevan käyttäjän laitteesta ja siirtonopeudesta. Jotta kuva sopisi eri näytöille, muuttuu sen kuvasuhde. Resoluutio taas muuttuu siksi, että sivun lataaminen nopeutuisi. Tästä syystä on tärkeää tarkistaa miltä kuvasi näyttää eri formaateissa ja kuvasuhteissa ennen sen käyttämistä.

Muista myös kerrata miten kuvan fokuspistettä muutetaan Drupalissa varmistaaksesi, että kuvastasi ei rajaudu mitään olennaista riippumatta siitä, miten sitä aalto.fi:ssä käytetään.

Lue lisää

Tekstin käyttö kuvissa

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. Mikäli näistä huolimatta haluat käyttää tekstiä kuvassasi, muista aina tarkistaa miltä kuvasi näyttää eri formaateissa (kuten kuvattu yllä), ja noudata näitä yleisiä ohjeita:

Drupal Example of text in image with focal point
  • Tekstin tulee olla lyhyt ja selkeä, jotta se näkyy eri komponenteissa.
  • Tekstin tulee olla ruudunlukuohjelmistojen saavutettavissa, eli kuvassa olevan tekstin täytyy löytyä myös sivusi leipätekstistä.
  • Jotta teksti näkyisi eri formaateissa ja rajauksissa, siirrä fokuspiste keskelle tekstiäsi. Varmista, että tekstin ympärillä on tilaa; näin varmistat, että teksti ei rajaudu.

Alla kaksi hyvää esimerkkiä siitä, miten tekstiä voi käyttää kuvassa.

Drupal: Aalto.fi-sivusto

Täältä löydät tietoa aalto.fi:stä, ohjeita ja neuvoja sisällön tuottamiseen ja visualisoimiseen ja vinkkejä sisältöjesi löydettävyyden parantamiseksi.

Lue lisää aalto.fi-sivustosta
Art piece from exhibition Crystal Flowers in Halls of Mirrors in 2013, yellow threads stretched and "floating" between two points in an angle. Photo by Aalto University / Mikko Raskinen
  • Julkaistu:
  • Päivitetty:
Jaa
URL kopioitu