Tietoa kuvien käytöstä sivuilla

Verkkosivuilla esitettävät kuvat tallennetaan aina erillisiksi tiedostoiksi ja niihin viitataan XHTML-dokumentissa img-elementin avulla. Yleisohje kuvien liittämiseksi sivuille:

  1. Tallenna haluamasi kuva samaan hakemistoon verkkosivun kanssa. Jos kuvia on paljon, luo kuville oma hakemisto (ks. alla oleva koodiesimerkki).
  2. Lisää img-elementti halumaasi kohtaan sivua ja kerro elementille haettavan kuvan tiedostonimi src-attribuutin avulla: kuva sijoittuu siihen kohtaan sivua, johon olet lisännyt img-elementin. Määritä kuvalle myös alt-attribuutilla vaihtoehtoinen nimi:
<img src="koirakuvia/hauva.jpg" alt="Kuva Koiramuksestani!" />

Kopioidessasi kuvan esimerkiksi internetistä muista varmistaa se, että sinulla on kuvan tekijänoikeuden haltijan lupa julkaista kuva omilla sivuillasi.

Yleistietoa kuvien käytöstä internetissä

Useimmiten sivuilla käytetään JPEG-, GIF- tai PNG-tiedostomuotoisia kuvia. JPEG sopii erinomaisesti valokuville, kun taas GIF- ja PNG-tiedostomuodoilla on omat erityiset käyttötarkoituksensa (lisätietoa  em. tiedostomuodoista).

Halutessasi voit hyödyntää kuvia myös tyylitiedostoissa: tyyli- eli CSS-tiedostojen avulla voit määrittää vaikkapa taustakuvia mille tahansa elementille.

Toisinaan ihmiset liittävät verkkosivuilleen suoraan esimerkiksi digikameralla otettuja kuvia. Nämä kuvat ovat usein hyvin suuria, ja tämän vuoksi kuvia tulisi pienentää ennen julkaisemista. Moni kuitenkin toimii väärin yrittäessään määrittää kuvakoon pienemmäksi sivun XHTML-koodissa.

Esimerkki väärästä toimintatavasta: Raimolla on digikuva, joka on kooltaan 3200×2100 kuvapistettä. Raimo haluaa pienentää kuvaa verkkosivulla, joten hän määrittää kuva-elementille pienemmän koon width- ja height-attribuuttien avulla.

<img src="luiro.jpg" width="600" height="200" alt="" />

Esimerkki oikeasta toimintatavasta: Raimo avaa digikuvan kuvankäsittelyohjelmassa ja hän pienentää kuvan koon haluamakseen. Tämän jälkeen Raimo linkittää pienennetyn kuvan sivulle yrittämättä “kepulikonstein” pienentää kuvaa XHTML-koodista käsin. Lopputuloksena on nopeasti latautuva ja siistiltä näyttävä verkkosivu.

Kun sinulla on tarve pienentää julkaistavaa kuvaa, älä siis “pienennä” kuvaa pakottamalla kuva selaimen näytöllä pienemmäksi, vaan käytä kuvankäsittelyohjelmaa!