Sisällön alkuun.Datatekniikka ja viestintä - Web:

"Näkymätön kuva": yksipikselinen läpinäkyvä gif-kuva ja miten sillä voi tehdä temppuja Web-sivuilla

Kuva, joka koostuu vain yhdestä läpinäkyvästä kuvapisteestä (pikselistä), on normaalisti näkymätön. Siitä on joskus hyötyä joissakin tempuissa Web-sivuilla. Erityisesti sen avulla voi tehdä "piilolinkin", jota ei sivun graafisesta esityksestä huomaa mutta joka voi tekstitilassa toimia normaalina linkkinä. "Näkymättömällä kuvalla" voi myös saada "tyhjää sisältöä" taulukon soluun, ja tällä on merkitystä, koska sellaisella voi vaikuttaa eräiden selainten tapaan näyttää solu. Aivan toisenlainen käyttötarkoitus tiedon hankkiminen selaimelta palvelimelle kuvaviittauksella, ns. web bug.

Miksi piilolinkki?

Jos esimerkiksi Web-sivuston jokaisen sivun alussa on pitkä "navigointivalikko", on hankalaa liikkua sivustossa äänisynteesiin perustuvalla käyttötavalla. Puhesyntetisaattori alkaa aina lukea sivun sisältöä alusta alkaen. Tällöin käyttäjä joutuu siis aina kuulemaan samat, ehkä pitkätkin listat.

Sivun alussa saattaa olla muutakin aineistoa, jonka halutaan näkyvän heti alussa mutta joka häiritsee kuulo- tai tuntoaistiin perustuvassa selailussa. Tällainen voisi olla vaikkapa joka sivun alussa oleva tunnuslause.

Asiaa voi auttaa sillä, että ihan alussa on linkki, joka johtaa sivun varsinaisen sisällön alkuun. Ja jos sivuntekijästä tuntuu, että sellainen linkki häiritsee tavallisessa graafisessa selailussa, hän voi tehdä linkistä "piilolinkin".

Piilolinkki HTML-merkkauksen tasolla

Piilolinkki voi olla seuraavanlainen:
<a href="#alku"><img alt="Sisällön alkuun." src="transp.gif" width="1" height="1" border="0"></a>
Sellainen on esimerkiksi tämän sivun alussa, juuri ennen sanaa "Datatekniikka". Jos käytät graafista selainta, et luultavasti huomaa mitään. Jos taas käytät esimerkiksi Lynx-tekstiselainta, sivun alussa näkyy suunnilleen näin:

   Sisällön alkuun. Datatekniikka ja viestintä - Web:

Tässä tapauksessa piilolinkistä ei ole paljoakaan hyötyä, koska ohitettavia navigointilinkkejä on vähän. Mutta jos niitä on tusinan verran tai jopa kymmeniä kuten joskus, piilolinkki on käytännöllinen.

Piilolinkki ei aina pysy piilossa graafisen selaimen käyttäjältä. Ensinnäkin joskus kuva voi jäädä latautumatta. Silloin selain saattaa näyttää "rikkinäisen kuvan symbolin" tai sitten käyttää alt-tekstiä. Seuraavassa on tämän mahdolliseksi havainnollistamiseksi piilolinkkimme tahallisesti rikottuna lainausmerkkien välissä: "Sisällön alkuun.". Toiseksi jos käyttäjä siirtyy linkistä toiseen tab-näppäintä käyttäen, hän voi päätyä myös piilolinkin kohdalle. Hän ei ehkä huomaa tätä mistään muusta kuin siitä, että hän ei päässyt kohtaan, jossa näytti olevan seuraava linkki. Ongelma on suhteellisen pieni. Käyttäjähän pääsee toki eteenpäin painamalla tab-näppäintä uudestaan.

Millainen on "näkymätön kuva"?

Teknisesti kyse on yksinkertaisesta ja pienestä asiasta. Yksipikselinen läpinäkyvä gif-kuva, englanniksi transparent single-pixel GIF, on varsin pieni tiedosto, ja sellaisen voi hakea vaikkapa osoitteesta
http://www.cs.tut.fi/~jkorpela/images/transp.gif

Jos haluat käyttää sitä, sinun kannattaa kopioida se itsellesi omien Web-sivujesi alueelle jollakin sopivalla nimellä, vaikkapa transp.gif, ja viitata siihen eikä edellä olevaan osoitteeseen. Tällöin vältät sen riskin, että sinun sivusi eivät toimi kunnolla vain sen takia, että jokin palvelin jossakin muualla ei toimi tai siihen ei ole yhteyttä. Tyypillisellä graafisella selaimella (esimerkiksi Internet Explorer, Netscape tai Opera) voit hiirellä viedä kursorin edellä olevan linkin kohdalla ja napsauttaa hiiren oikeanpuoleista nappia ja sitten valita avautuvasta valikosta vaihtoehdon "Tallenna kohde nimellä..." tai "Save target As" tai jotain vastaavaa.

"Näkymätön kuva" antamassa tietoa niille, jotka eivät näe kuvia

Joissakin erikoistilanteissa voisi käyttää "näkymätöntä kuvaa" silloin, kun olisi tarpeetonta tai jopa häiritsevää esittää mitään niille, jotka näkevät sivun graafisen esityksen, mutta muille haluttaisiin kertoa jotain. Yksi mahdollisuus olisi tehdä näin silloin, kun sivusta on erillinen tekstiversio, johon halutaan viitata linkillä. Rakennehan olisi tällöin hyvin samantapainen kuin edellä käsitelty piilolinkki. Toisaalta käyttäjä saattaa eri syistä olla kiinnostunut tekstiversiosta vaikka näkisi kuvat, joten ihan tavallinen linkki on yleensä parempi.

"Näkymätön kuva" voisi olla sivulla myös sellaisenaan, ilman, että se on linkki minnekään. Käyttötarkoitus voisi olla vaikkapa sellainen, että alt-teksti kertoo jotain, joka on kuvat näkevälle ilmeistä mutta ei muutoin lainkaan ilmeistä. Esimerkki kuvitteelliselta sivulta:
<img alt="Tämän sivun sisältönä on pelkästään kahdeksan valokuvaa Eduskuntatatalosta ilman selityksiä." src="transp.gif" width="1" height="1">

"Näkymätön kuva" solun täytteenä

Useat selaimet käsittelevät täysin tyhjää taulukon solua (<td></td>) eri tavalla kuin normaalia solua. Ne saattavat jättää muutoin piirtämänsä reunaviivat pois taikka jättää taustavärin tai -kuvan pois.

Tavallisin menettely asian hoitamiseksi on kirjoittaa solun sisällöksi sitova välilyönti, no-break space, tällä tavoin: <td>&nbsp;</td>. Seuraava esimerkki sisältää taulukon, jossa on kaksi 50 pikselin levyistä solua, tyhjä solu ja mainitulla tavalla keinotekoisesti täytetty solu. Taulukolle on määritelty keltainen taustaväri ja kolmen pikselin levyinen reunus solujen ympärille. Solujen ulkoasu saattaa olla erilainen:

 

Tyypillisesti selaimet tällöin jättävät reunaviivan pois tyhjän solun ympäriltä; HTML 3.2 -määrittely jopa antoi ymmärtää, että niin niiden tuleekin toimia. Netscape-selaimet saattavat lisäksi jättää taustavärin huomiotta eli näyttävät kyseisen solun taustana sivun yleisen taustan.

Vaikka tällaiset esitysasuseikat pitäisi oikeastaan hoitaa toisin, tyylisäännöstöillä (CSS), menettely sinänsä toimii melko hyvin. Jos kuitenkin tyhjän solun halutaan olevan hyvin pieni leveys- tai pystysuunnassa, muodostuu rajoittavaksi tekijäksi se, että sitova välilyönti on ihan oikea merkki. Sillä on siis jokin leveys ja korkeus, joten solua ei saa mielivaltaisen pieneksi. Seuraavassa on yritetty saada edellä olevan taulukon rivi neljän pikselin korkuiseksi mutta siinä todennäköisesti epäonnistutaan:

 

Pienentäminen kuitenkin onnistuu, kun sitovan välilyönnin asemesta käytetään "näkymätöntä kuvaa", koska se vie tilaa vain yhden pikselin. Merkkaus on tällöin muotoa
<td><img alt="" src="transp.gif" width="1" height="1"></td>
ja ulkoasu seuraavanlainen:

Lisätietoja: Empty cells in HTML tables.

Eräiden havaintojen mukaan selaimet eivät aina osaa käsitellä yhden pikselin kuvaa oikein, ellei img-tägissä ole määritteitä width="1" height="1", vaikka ne ovat periaatteessa tarpeettomat. (Tieto kuvan ulottuvuuksista on itse kuvassa.) Lisäksi huomattakoon, että taulukon cellpadding-määritteen arvo vaikuttaa solun näkyvään kokoon. Koska kyseisen määritteen oletusarvo on tyypillisesti pieni kokonaisluku, voi olla tarpeen asettaa cellpadding="0", jos halutaan solu vain yhden tai muutaman pikselin korkuiseksi tai levyiseksi.

Web bug - tiedonhankinnan väline

Aivan toisenlainen kuin edellä kuvatut käyttötarkoitukset on yksipikselisen läpinäkyvän kuvan käyttö sitä varten, että Web-palvelin saa tietoa selaimelta, esimerkiksi siitä, että käyttäjä käy jollakin sivulla. Ideana on, että sivulle pannaan mainitunlainen img-elementti ja että selain lähettää palvelimelle pyynnön saada kyseinen kuva näytettäväksi ja palvelin tallentaa tiedon tästä pyynnöstä.

Yleensähän img-elementin src-määrite viittaa käytännössä kuvatiedostoon, mutta se saattaa viitata myös palvelimessa toimivaan ohjelmaan (skriptiin), joka tallentaa tiedon viittauksesta ja sen alkuperästä ja vain sivumennen lähettää selaimelle myös kuvan. Tarkoitukseen voisi käyttää mitä tahansa kuvaa, mutta yksipikselinen läpinäkyvä kuva hoitaa asian vaikuttamatta mitään sivun ulkoasuun.

Lisätietoja on esimerkiksi Webopedia-artikkelissa Web beacon.

Menettely saattaa muodostaa uhan käyttäjän yksityisyydelle, koska se voi mahdollistaa selailun huomaamattoman seuraamisen. Käytännössä asian suurin merkitys lienee siinä, että mainostajat yms. voivat seurata sivujen suosiota.