img-elementtiYksi 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.
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.
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.
img-elementtiHTML-dokumenttiin liitetään kuva seuraavanlaisella
img-elementillä:
<img alt="tekstivaihtoehto" src="osoite">
missä
alt=""), jos kyseessä on pelkkä koristekuva;
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
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:
alt-määritteen arvo
kannattaa (eräiden selainten
virheellisen toiminnan vuoksi)
yleensä kirjoittaa yhdelle riville,
ellei ole toivottavaa, että se jakautuu näytölläkin
eri riveille.
Edellisessä esimerkissä se
on jaettu kahdelle riville esitysteknisistä syistä.
alt-määritteen arvon
myös ns.
kannattaa (tooltip-tekstinä
eli pienessä esiinpompahtavassa
ikkunassa silloin, kun kursori viedään hiirellä kuvan päälle.
Tämä on omituista ja joskus ärsyttävää, mutta sen ei pidä antaa
estää käyttämästä alt-määritettä varsinaiseen
tarkoitukseensa (jota em. selaimet myös tukevat).
Ongelmia voi osittain (IE:n uusimpien versioiden osalta)
vähentää sillä, että kirjoittaa
img-elementtiin lisäksi
title-elementin, jonka arvo on se, mitä
halutaan "tooltip-tekstiksi" (joka voi olla tyhjä, "").
align="middle" merkitsee kuvan sijoittamista
pystysuunnassa niin, että sen keskikohta on samalla tasolla kuin
tekstin keskikohta.
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:
align-määritettä):
<p><img alt="..." src="..."></p>
p-elementin
alkuun, tägin <p> perään, kirjoitetaan img-elementti, jossa on
määrite align="right".
align="left" käyttäen
sijoittaa kuvan vasemmalle ja tekstin sen oikealle puolelle. Tämä
on usein kyseenalaisempaa, koska silloin teksti helposti joutuu
selaimen ikkunan ulkopuolelle. On yleensä
pienempi paha, että käyttäjä joutuu
"skrollaamaan" sivua oikealle nähdäkseen kuvan kokonaan kuin että
hän joutuu tekemään niin nähdäkseen tekstin ja sen, että oikealla
ylipäänsä on tekstiä.
align-määritettä käytetään, on
hyvä kirjoittaa tägi <br clear="all"> siihen
tekstin kohtaan (tyypillisesti ennen kappaleen lopetustägiä
</p>), jonka jälkeinen teksti ei enää saa olla
kuvan rinnalla. On huomattava, että pelkkä uuden kappaleen aloitus
ei lopeta tekstin latomista kuvan rinnalle.
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.)
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):
.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ä...
binary. (Muutoin se voi yrittää siirtää kuvan
tekstin tapaan, jolloin kuvatiedoston rakenne särkyy.)
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>
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.
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>