Web-julkaisemisen opas, luku 1 Jambalaya: Miten teen Web-sivun:

Kuvia putkeen

Sisällys

Yksi kuva sanoo enemmän kuin tuhat sanaa, sanotaan (miten se muuten sanotaan kuvalla?). Tosin ehkä ihan eri asian kuin oli tarkoitus. Joka tapauksessa yksi kuva helposti vie enemmän datansiirtokapasiteettia kuin tuhat sanaa. Mutta kuvilla on käyttönsä. Esimerkiksi eläinlajin esittely ilman kuvaa eläimestä olisi aika puutteellinen.

Miten kuvia saa sivulle

Kun haluat kuvittaa dokumenttiasi, tarvitset ensin kuvia digitaalisessa, tietokoneella luettavassa muodossa, jossakin yleisesti tuetussa kuvaformaatissa. Tavallisimmat kuvaformaatit ovat Gif ja Jpeg, joista jälkimmäistä käytetään nimenomaan valokuville. Uudemmalla PNG:llä on useita etuja, mutta selainten PNG-tuki on vielä puutteellinen. Tietoja kuvaformaateista löytyy seuraavien sivujen kautta; Grafiikkaformaatit ja niiden käsittely ja W3C material on graphics formats.

Kuvaformaateista sinänsä sinun ei tarvitse tietää paljoakaan, kunhan osaat käyttää jotain ohjelmaa, jolla saadaan kuvia johonkin kuvaformaattiin. Tavallisimpia vaihtoehtoja kuvien tuottamiseen:

Toisen tekemää kuvaa ei saa ilman lupaa käyttää omalla Web-sivulla, kuten ei toisen kirjoittamaa tekstiäkään. Ks. tarkemmin selostusta Miks mä muka en sais skännätä tätä veppisivulleni eli mitä jokaisen tietokoneen käyttäjän pitäisi tietää tekijänoikeudesta.

Vaihtoehdot: linkitys ja upotus

Kuvaan voi viitata linkillä, esim.
<a href="baby.jpg">kuva minusta pienenä</a>
jolloin viittaavalla sivulla näkyy normaali tekstilinkki kuten kuva minusta pienenä ja sitä seurattaessa kuva tulee näkyviin. Tämä tarjoaa monipuolisia vaihtoehtoja, koska käyttäjä voi esimerkiksi avata kuvan samaan tai uuteen selainikkunaan, tulostaa sen erikseen, tallentaa sen omaan koneeseensa myöhemmin katseltavaksi jne. Myös selaimella, joka ei tue kuvia, on mahdollista seurata tällaista linkkiä ja ottaa kuva talteen tiedostoon (esim. siirrettäväksi toiseen ohjelmaan tai koneeseen, jossa sitä voi katsoa).

Toinen vaihtoehto on "upottaa" kuva dokumenttiin seuraavassa kohdassa kuvattavalla img-elementillä, jolloin se näkyy kiinteänä osana sivua, kun sivua katsotaan graafisella selaimella, joka on konfiguroitu lataamaan ja näyttämään kuvat automaattisesti (tai kyseinen kuva on erikseen ladattu).

Kumpaa tapaa sitten kannattaa käyttää? Yleisesti: mitä isompi kuva, sitä vakavammin kannattaa harkita linkittämistä upotuksen asemesta. Sama koskee tilannetta, jossa kuva on suhteellisen erillinen "oheiskuva". Olennaista on antaa käyttäjälle mahdollisuus valita, mitä hän katsoo ja mihin hän aikaansa käyttää; kuvien latautumiseen kuluva aika on usein hyvin konkreettisesti rahaa esim. yhteyden aikaveloituksen takia.

On myös mahdollista yhdistää mainitut tavat. Ensinnäkin voit upottaa sivulle pienikokoisen version kuvasta, joka on linkki kuvan isompaan versioon. Jäljempänä selostetaan tarkemmin, että kuvakin voi olla linkki (toiseen kuvaan, HTML-dokumenttiin tai johonkin muuhun). Toisaalta jos haluat, että kuvan voi ladata ja sitä voi katsella erillisenä mutta niin, että siihen liittyy lyhyt kuvateksti, voit tehdä linkin, joka viittaa HTML-dokumenttiin, joka sisältää upotetun kuvan ja siihen liittyvän tekstin. Linkki voi siis viitata joko kuvaan sellaisenaan tai HTML-dokumenttiin, jonka osana on kuva.

Kuva sivun osana HTML:n kannalta: img-elementti

HTML-dokumenttiin liitetään kuva seuraavanlaisella img-elementillä:

<img alt="tekstivaihtoehto" src="osoite">

missä

Esimerkki, jossa käytetään pakollisten määritteiden lisäksi align-määritettä, jolla ulkoasu saadaan paremmaksi:

<p><strong>Tehtävä 42</strong>. Laske
<img src="integral.gif" align="middle" alt=
"lausekkeen exp(x**2) integraali, kun x menee
0:sta äärettömään."></p>

Tässä alt-määrite huolehtii siitä, että annettu tehtävä on täysin ymmärrettävissä kuvattomassakin esityksessä. Sinun käyttämälläsi selaimella rakenne näkyy nyt näin:

Tehtävä 42. Laske lausekkeen exp(x**2) integraali, kun x menee
0:sta äärettömään.

Jossakin toisessa tilanteessa esitysmuoto voisi olla seuraavanlainen:
Tehtävä 42. Laske lausekkeen exp(x**2) integraali, kun x menee 0:sta äärettömään.

Yleisesti alt-määrite on erittäin olennainen sen kannalta, että sivu toimii myös tilanteessa, jossa selain ei esitä kuvia tai käyttäjä muusta syystä ei niitä näe. Tämän määritteen arvo ilmoittaa ikään kuin "sijaisen" kuvalle, siis tekstin, joka tuuraa kuvaa tämän poissa ollessa. Sen siis ei pitäisi nimetä tai kuvailla kuvaa vaan tehdä sen hommat niin hyvin, kuin teksti vain voi. Lisätietoja: Jouni Heikniemen Kunnollinen alt-teksti kuville ja Jukka K. Korpelan Guidelines on alt texts in img elements.

On ehkä hyvä ajatella, että img-elementti on kahtalainen, duaalinen. Se on "olio", jolla on kaksi mahdollista ilmenemismuotoa: tekstimuotoinen ja kuvamuotoinen. Tekstimuotoisen vaihtoehdon ilmoittaa alt-määrite, kuvamuotoiseen taas viittaa src-määrite.

Huomautuksia:

img-elementtiin voidaan ja on yleensä suotavaa kirjoittaa myös width- ja height-määrite, jotka ilmoittavat kuvan leveyden ja korkeuden kuvapisteinä eli pikseleinä (pixels). Tämän merkitys on siinä, että selain voi varata tilan kuvalle jo ennen kuin se on saanut itse kuvadatan. Tällöin käyttäjä saa sivun näkyviinsä nopeammin. Mutta jos et tiedä, miten saat kuvan ulottuvuudet pikseleinä selville, jätä nämä määritteet pois. Jos nimittäin annat väärät tiedot, selain skaalaa kuvan niiden mukaiseksi, mikä voi merkitä melkoista kuvan vääristymistä. Kyseiset määritteet kannattaa jättää pois myös silloin, kun kuva on pieni suhteessa alt-tekstiin, koska eräät suositut selaimet eivät silloin osaa näyttää kyseistä tekstiä kunnolla.

Tällaisen elementin voi sijoittaa omaksi kappaleekseen (p-elementin sisään) mutta myös tekstikappaleen yhteyteen. Kuvan ja tekstin keskinäisiin suhteisiin sijoittelussa voidaan vaikuttaa img-elementtiin liitettävällä align-määritteellä. Ks. Dianne Gormanin havainnollista dokumenttia Aligning Images and Text. Tässä vain aivan perusteita:

Kuva linkkinä

Finland Linkin yleisen rakenteen kuvauksessa mainittiin, että linkkitekstin tilalla voi olla myös kuva. Tällainen linkki ei sinänsä poikkea normaalista linkistä muutoin. Esimerkki:
<a href="finland.html" title="General information about Finland"><img src="suomi.gif" alt="Finland"></a>
Esimerkkitapauksessa linkki viittaa englanninkieliselle sivulle, jolla hiukan yleistietoa Suomesta. Kun kuva on linkkinä, on erityisen tärkeää, että alt-teksti kirjoitetaan niin, että se hoitaa mahdollisimman hyvin sen tehtävän, jonka kuva hoitaisi, jos näkyisi. Tässä tapauksessa sana "Finland", joka näkyy linkkinä, kertonee suunnilleen, mistä on kyse. Jos olisi kirjoitettu selostus kuvasta, millä kielellä hyvänsä, esim. "Finnish flag", se johtaisi pahasti harhaan.

Useimmat selaimet näyttävät linkkinä olevan kuvan ympärillä reunuksen. Tämä hyödyllinen piirre auttaa katsojaa näkemään, mitkä kuvat ovat linkkejä ja mitkä eivät, ja lisäksi reunuksen väri kertoo (linkkitekstien värien tapaan), onko linkin kohde sellainen, jossa käyttäjä on (hiljattain) käynyt. Joskus, kuten esimerkkitapauksessa, voi reunus tuntua epäesteettiseltä, asiaankuulumattomalta. Teknisesti reunuksen voi estää lisäämällä img-elementtiin määritteen border="0" (joskin kehittynyt selain saattaa silti näyttää reunuksen). Reunuksen estäminen on mielekästä lähinnä silloin, kun muilla keinoin tehdään käyttäjälle selväksi, mitkä kuvat ovat linkkejä.

Yleensä on syytä välttää kuvien käyttöä linkkeinä. Yksi syy tähän on edellä kuvattu dilemma: reunus tarvittaisiin, mutta se voi näyttää sopimattomalta. Linkkejä voidaan kyllä kuvittaa, mutta sen voi tehdä niin, että jutussa on normaali tekstilinkki ja sen yhteydessä kuvituksena kuva. Kuvan ei tällöin tarvitse olla linkki, tai siitä voidaan tehdä linkki, joka ei näytä linkiltä (border="0"), siltä varalta, että sivulla kävijä on oppinut napsauttelemaan kaikkia kuvia! Ks. esimerkkiä kohdassa Suunnitelma - miksi? Siinä reunus olisi aika häiritsevä, koska itse kuva ei ole suorakaiteen muotoinen. Tai teknisesti on, mutta ns. läpinäkyvyystekniikalla (transparency) se saadaan näyttämään muunmuotoiselta.

Kohdassa Karttalinkit (imagemaps) kerrotaan, miten kuvasta voi tehdä eräässä mielessä sellaisen linkin, että kuvan eri kohtien napsauttamisella on erilainen vaikutus. (Normaalissa kuvalinkissä on toki samantekevää, mihin kohtaan kuvaa käyttäjä napsauttaa.)

Valokuvan laittaminen Web-sivulle

Tarvitset skannerin siihen liittyvine ohjelmineen ja käyttöohjeineen. Skanneri (engl. scanner) on laite, joka siirtää kuvan digitaaliseen, tietokoneella käsiteltävissä olevaan muotoon, skannaa kuvan.

Helpoimmin onnistuu paperikuvan skannaaminen. Diakuvan tai negatiivin skannaus vaatii lisälaitteita ja lisäohjeita.

Valokuvan laittaminen Web-sivulle paperikuvasta lähtien käy näin (tyypillisellä skannerilla):

  1. Tarkista, että skanneriin on kytketty virta (yleensä siinä palaa esim. pieni vihreä valo tämän merkiksi).
  2. Nosta skannerin kansi ja pane kuva valotuslasille kuvapuoli alaspäin.
  3. Aloita kuvan skannaus käynnistämällä sopiva ohjelma tietokoneessa, johon skanneri on kytketty. Kunkin skannerin mukana tulee yleensä oma ohjelmansa.
  4. Noudata skannausohjelman käyttöohjeita ja vastaa sen mahdollisesti esittämiin kysymyksiin. Se saattaa esimerkiksi odottaa, että valitset sen skannaamasta alueesta (kuva taustoineen) sen osan, jonka todella haluat (yleensä vain itse kuvan).
  5. Tallenna, edelleen ohjelman käyttöohjeita tarvittaessa lukien, kuva tiedostoon. Yleensä ohjelma tarjoaa useita erilaisia vaihtoehtoja tallennusmuodoksi eli formaatiksi. Valokuville sopivin on yleensä JPEG-muoto. Tiedosto saa tällöin tavallisesti tyyppimerkinnän .jpg, joka liittyy tiedostolle antamasi nimen perään. (Jos skannausohjelma ei tue JPEG-muotoa, tallenna kuva jossain muussa formaatissa ja muunna muoto myöhemmin, ks. seuraavasta kohdasta.) Näin saatu kuva on yleensä liian hyvä. Tämä tarkoittaa sitä, että siinä on enemmän esitystarkkuutta ja kokoa kuin nykyisin ja lähitulevaisuudessa kannattaa käyttää Webissä. Niinpä...
  6. Käynnistä sopiva kuvankäsittelyohjelma eli ohjelma, jolla voi muokata digitaalisessa muodossa olevia kuvia. Voit nyt eri tavoin muokata kuvaa tavoilla, mutta ensisijaisesti tarvitset keinon pienentää kuvaa siten, että alkuperäiset mittasuhteet säilyvät. Selvitä ohjelman käyttöohjeista, miten tämä tapahtuu.
  7. Pienennä kuva kohtuullisen kokoiseksi ja tallenna se valintasi mukaan joko eri nimellä tai samalla nimellä kuin alkuperäinen kuvatiedosto sen mukaan, haluatko säilyttää (ja ehkä panna Webiinkin) myös alkuperäisen, isomman ja tarkemman kuvan. Kohtuullinen koko riippuu tilanteesta. Voit kokeilla erilaisia kokoja ja katsoa, miltä ne näyttävät ruudulla. Nyrkkisäännöksi voisi antaa, että 400 pikselin leveyden ylittäminen vaatii hyvin painavat perusteet. (Ohjelman käyttöohjeista ilmenee, miten saat selville kuvan koon pikseleinä eli kuvapisteinä ja miten saat kuvan muunnettua haluttuun pikseleinä ilmaistuun kokoon.)
  8. Siirrä tai kopioi kuvatiedosto(t) samaan hakemistoon, missä HTML-dokumenttisi ovat. Jos käytät tähän FTP-ohjelmaa, on syytä antaa FTP-ohjelman sisällä ennen itse siirtoa käsky binary. (Muutoin se voi yrittää siirtää kuvan tekstin tapaan, jolloin kuvatiedoston rakenne särkyy.)
  9. Kirjoita HTML-dokumenttiisi edellä kuvatun lainen img-elementti siihen kohtaan, mihin haluat kuvan. Esimerkki:
    <p><img alt=
    "Olen vaaleatukkainen, rillipäinen nuori mies."
    src="foto.jpg" width="200" height="350"></p>

Lisää kuvista

Jos sinulla on paljon kuvia ja haluat tehdä niistä oikein kuvagallerian, niin yleensä ei kannata panna suurta määrää kuvia yhteen dokumenttiin, koska sivun latautuminen olisi kovin hidasta etenkin modemilinjalla.

Yksi yleisesti käytetty menettely on ns. thumbnail-tekniikka: Sopivaa kuvankäsittelyohjelmaa käyttäen tehdään kustakin kuvasta pienennetty versio, tavallisesti keskenään samankokoisiksi. Sitten kirjoitetaan hakemistosivu, jolla on ne pienennetyt versiot, "thumbnailit", jotka ovat linkkejä täyskokoisiin kuviin. Tällöin hakemistosivulta näkee havainnollisesti, millaisia kuvia on tarjolla. Hyvä esimerkki on EKLYn Lintukuvia-sivu.

Yksinkertaisempi vaihtoehto on tehdä tekstimuotoinen hakemistosivu, jolla on vain kuvien nimet, jotka ovat linkkejä kuviin. Ks. esim. hakemistoa Koirien värejä - Canine colors, jossa linkit viittaavat sivuihin, joilla on kullakin yksi kuva ja sen selitysteksti.

Muutenkin kannattaa muistaa, että kuviin voi viitata myös linkeillä, niitä ei ole pakko "upottaa" osaksi sivua. Jos sinulla on paljon juttuusi sopivaa kuvitusta, sijoita vain kaikkein olennaisin ja paras osaksi itse juttua. Muihin kuviin voit viitata linkeillä niin paljon kuin haluat. Näin ne, jotka haluavat nähdä nopeasti olennaisimman, eivät joudu turhaan odottelemaan kuvien latautumista.

Kuvien käytön erilaisia tarkoituksia ja niihin liittyviä näkökohtia käsittelee kirjoitukseni Kuvien käytöstä viestinnässä yleensä ja Webissä erityisesti.

Kuvien käsittelyn tekniikkaa (erityisesti Photoshop 5 -ohjelmassa käytettynä) käsittelee laajasti Internetixin kurssi Skannaus ja kuvankäsittely.

Tampereen TKK:n Hypermedian perusteet -kurssin aineistoon sisältyy laajahkona osuutena Kuva ja eri kuvaformaatit.

Kysymykseen "mistä löydän yleistietoja ja tarkkoja kuvauksia eri grafiikkaformaateista (GIF, PNG, PostScript ym.) sekä ohjelmista, joilla niitä voi lukea, esittää, tuottaa ja muuntaa toisikseen?" yrittää vastata juttu Grafiikkaformaatit ja niiden käsittely.

Kuvia kuten muitakin teoksia koskee se periaate, että tekijä on ilmoitettava. Jos siis esimerkiksi käytät toisen ottamaa valokuvaa Web-sivullasi, sinun on paitsi saatava hänen lupansa myös ilmoitettava hänet kuvan ottajaksi.

Esimerkki kuvituksesta: ruusukuoriainen

Jambalayaa käsittelevään esimerkkidokumenttiimme voitaisiin toki liittää kuvitusta. Valokuva valmiista ruuasta tai vaikka ruuan valmistamisestakin havainnollistaisi asioita. Seuraavassa on kuitenkin toisenlainen esimerkki, jossa kuvalla on vielä olennaisempi merkitys.

Olemme tehneet pienen Web-dokumentin, joka kuvaa erästä koppakuoriaislajia, ruusukuoriaista. On luonnollista liittää sellaiseen kuva eläimestä, etenkin, kun kyse on melko tuntemattomasta lajista. Kuva on tehty Paint-ohjelmalla ja muunnettu sitten Photoshop-ohjelmalla Bitmap-muodosta Gif-muotoon. Kuvan esitys Windows Bitmap -muodossa vie dataa ja siten levytilaa ja siirtoaikaan erittäin paljon enemmän kuin esim. Gif-muoto.

Kuva on liitetty dokumenttiin seuraavanlaisella HTML-rakenteella:

<p><img align="right" src="kopp.gif"
width="237" height="286" title="Ruusukuoriaisen kuva"
alt=
"Ruusukuoriainen muistuttaa ..."
>
Ruusukuoriaisia (engl. <i lang="en">Rose beetle</i>)
...

Tämä merkitsee, että selain sijoittaa kuvan selaimen ikkunan oikeaan laitaan, ja sen vasemmalle puolelle tulee tekstiä sen verran, kun ikkunan leveys sallii.

Dokumentin lopussa ilmoitetaan kuvan tekijä seuraavasti, viitaten hänen Web-sivuunsa, kun sellainen sattuu olemaan olemassa:

<p>Kuva: <a href="http://www.hut.fi/u/lsarakon/">
Liisa Sarakontu</a>.</p>