Palvelut

Kuvat: miten lisäät kuvia ja ALT-tekstin tärkeys

Uusi aalto.fi-verkkoviestintäympäristö on suunniteltu mobiili edellä, sillä kaikkia sivustolle tuotuja kuvia käytetään myös kannettavan, tabletin ja muiden mobiililaitteiden näytöllä.

Kaikki kuvat ladataan mahdollisimman isokokoisina ja korkearesoluutioisina. Koska uusi julkaisujärjestelmä on suunniteltu toimimaan erilaisten komponenttien kautta, ladattuja kuvia voi esittää monissa eri muodoissa. Julkaisujärjestelmään ladatun yksittäisen kuvatiedoston maksimikoko on 10 Mb ja minimi 2 - 3 Mb.

Aalto.fi-sivustolla käytetään vain Aalto-yliopiston kuvapankin kuvia, joihin yliopistolla on kuvaajien kanssa tehdyn sopimuksen mukaan lupa käyttää verkkosivuillaan. Yliopisto ei luovuta kuvia kolmansille osapuolille.

Pääkuvan lataaminen

Jokaisella sisältötyypillä (HUB, artikkeli, uutinen, jne.) on yksi pääkuva (main image), joka näytetään mm. nostojen pääkuvana eri sisältösivuilla. Pääkuvan voi määritellä joko oletuskokoiseksi (default) tai rajatuksi (medium no-crop) tai piilottaa kokonaan, jolloin kuva ei näy varsinaisella artikkelisivulla mutta näkyy, kun artikkeli nostetaan toiselle sivulle liftupien avulla.

Voit lisätä pääkuvan "basic information" -kenttien jälkeen. Klikkaa "MAIN IMAGE", "Select image" ja lataa uusi kuva "Upload"-välilehdeltä. Voit etsiä tiedoston "Select files" -kohdasta tai käyttää "drag & drop" -toimintoa raahaamalla valitsemasi kuva harmaalle alueelle kohtaan "Drop files here to upload them".

example: adding the main image for chosen content type
example: upload a new picture

Kieli (language)

Kuvan lataamisen jälkeen anna kuvalle perustiedot, kuten ensisijainen editointikieli. Jos kuva sisältää tekstiä, valitse kieleksi kuvan teksteissä käytetty kieli. Muista tässä tapauksessa täyttää myös muut kentät samalla kielellä.

Kuvan nimi* (name)

Anna kuvalle informatiivinen ja kuvaileva nimi ja kerro, kuka kuvan otti, esim. Research Day 2017 -tapahtuma / kuvaaja Aalto-yliopisto, Matti Meikäläinen.

  • Huom. Kuvien nimeämisessä, kuten ei muutenkaan sivuilla, saa käyttää lyhenteitä korkeakoulujen nimistä.

Kuva* (image)

Näet kohdassa kuvan, jonka juuri latasit.

Vaihtoehtoinen teksti* (alternative text / alt text)

Ohjetta päivitetty 15.2.2019

Tämä kenttä on yksi tärkeimmistä, sillä kentän tiedot liittyvät sivuston saavutettavuuteen ja esteettömyyteen. Kentän tekstiä käyttävät ja hyödyntävät mm. näytön lukijat ja hakukoneet. Teksti näytetään myös, mikäli kuva ei jostain syystä lataudu.

Noudata kentän tiedoissa samaa logiikkaa kuin kuvien nimeämisessä eli kirjoita selkeä ja kuvaileva teksti. Mieti tilannetta, jossa käyttäjä ei näy kuvaa kuvaa vaan kuulee kirjoittamasi tekstin: saako hän käsityksen kuvan sisällöstä ja tiedon kuvan ottajasta? 

Hyvä esimerkki:
Aalto-yliopiston opiskelijat Research Day 2017 -tapahtumassa / kuvaaja Aalto-yliopisto, Matti Meikäläinen

  • yksityiskohtainen kuvaus. Teksti kertoo, mitä kuvassa tapahtuu ja kuka otti kuvan

Huono esimerkki:
Aalto-yliopisto / Matti Meikäläinen

  • liian yleinen teksti. Ei kerro kuvan sisällöstä eikä siitä, onko Matti Meikäläinen kuvassa vai ottanut kuvan.

Kuvateksti (caption)

Kuvateksti ei ole pakollinen, mutta otathan aina huomioon tekijänoikeudet. Voit käyttää esimerkiksi samaa muotoilua, kuin yllä esitetyn vaihtoehtoisen tekstin kohdalla.

Tallenna (save)

Kun olet täyttänyt kentät, klikkaa lopuksi "Save".

Tiivistelmä: kuvien vaihtoehtoiset tekstit, ALT-tekstit

Kuvien vaihtoehtoiset tekstit ovat oleellisia saavutettavuudelle. Tutustu, mitä se tarkoittaa aalto.fi-sivustolla.

Lisätietoja: saavutettavasti.fi
Useita lankoja on vedetty vinottain portaikon yli. Langoista yksi pää pääty yhteen kohtaan kaiteessa, toisessa päässä pyöreän peilin ympärille. Kuva: Aalto-yliopisto / Mikko Raskinen
example: uploaded pictures have many different croppings

Voit vaihtaa kuvan fokusta (pääkohtaa ja rajausta) klikkaamalla "Edit" (kuvan alla edit-tilassa). Siirrä plusmerkkiä ja kuvan fokuspiste muuttuu. Kuvan alta löydät esikatselutilan ("Preview"). Sen kautta näet valitsemallasi fokuspisteellä käytössä olevan erilaiset samanaikaiset kuvarajaukset.

example: changing the focus point of the picture

Muut kuvat

Pääkuvan lisäksi voit ladata kuvia sivuille käyttämällä seuraavia komponentteja:

  • text: Quote (kun lisäät lainauksen kuvan kera)
  • image: Image with text (kun lisäät tekstiä kuvan kera)
  • image: Single image (kun lisäät vain kuvan, koossa: M, L tai XL)
  • media: Gallery (kun lisäät monta kuvaa samaan kohtaan kuvatekstien kera)
  • media: Slider (kun esittelet lyhyitä nostotekstejä kuvien kera)

Opi, miltä nämä komponentit näyttävät!

Kaikki komponentit, jotka on mainittu yllä, voidaan piilottaa kieliversioista tarvittaessa. Piilottaaksesi komponentin, ota ruksi pois komponentin edessä olevasta kohdasta "Show this component in this language".

Paluu aalto.fi-ohjeisiin

Tätä palvelua tarjoaa:

Viestintäpalvelut

Löysitkö tästä tarvitsemasi tiedon? Jos et, ota meihin yhteyttä.
  • Julkaistu:
  • Päivitetty:
Jaa
URL kopioitu