Kuvien lisääminen WWW-sivulle

Kuvien lisäämisellä voimme havainnollistaa tai elävöittää WWW-sivua. Kuvien lisäämisessä on kuitenkin oltava varovainen, koska niiden liikakäytöllä saadaan helposti luotua esteitä esimerkiksi modeemikäyttäjille. Kuvien lisäämisessä kannattaakin muistaa seuraavia asioita:

• Vältää turhaa kuvien käyttöä. Koristelukäytössä kuvia kannattaa käyttää todella harkiten, koska ne tekevät sivuista usein raskaita. Sopivasti käytettynä koristekuvat tekevät kuitenkin sivuista "miellyttävämpiä". Jos kuvien yhteiskoko sivulla ylittää 50 KB, niin kuvia kannattaa vähentää. Tällöin sivujen latausaika on jo kohtuullisen pitkä modeemikäyttäjille.
• Kuviin ainoastaan olennainen asia. Kuvista kannattaa rajata ainoastaan sisällölle olennainen asia. Esimerkiksi tämän artikkelin kuvista on poistettu turhat selaimen osoite- ja työkalurivit, joilla ei asian kannalta ole mitään merkitystä.
• Kuvat pienennetään ja rajataan kuvankäsittelyohjelmassa. Kuville voidaan määrittää CSS:ssä tarkat koko parametrit, joiden kokoisena kuvat näytetään. Tämän avulla ei saa kuitenkaan pienentää kuvan kokoa, koska parametrien avulla pienennetyn kuvan latautuminen vie yhtä kauan kuin suurenkin kuvan. Tämän vuoksi pienentäminen ja rajaaminen on tehtävä kuvankäsittelyohjelmassa.
• Älä liitä kuviin tekstiä. Yleensä tekstiä sisältävien kuvien käyttö on turhaa, koska usein samat "tehosteet" saadaan tehtyä CSS-tyylien avulla. Tekstikuvia näkee usein käytettävä erilaisten navigointien yhteydessä. Näistä useimmat olisi korvattavissa sopivilla CSS:ssä määriteltävillä rajoilla ja taustakuvilla.
• Käytä oikeaa kuvaformaattia. Oikean formaatin eli tiedostomuodon valinnalla voidaan olennaisesti keventää kuvien kokoa. Kuvien formaatteja kannattaa käyttää:
  • PNG- ja GIF-formaatteja erilaisten kaavioiden esittämisessä.
  • JPG-formaattia valokuvien esittämisessä.
  • Muita formaatteja, kuten esimerkiksi BMP, ei kannata käyttää, koska selaimet eivät tue niitä. Internet Explorer saattaa harhaan johtavasti näyttää BMP-muotoisia kuvia, mutta mikään muu selain ei näytä.
• Käytä kuvissa vaihtoehtotekstiä. Kuviin täytyy määritellä alt-teksti, jonka avulla kuvan sisältö välitetään kuvia tukemattomien selainten käyttäjille. Myös hitaan yhteyden vuoksi käyttäjä on voinut poistaa kuvat näkyviltä. Koristekuvissa voi käyttää tyhjää alt-tekstiä.
• Käytä suurista kuvista thumbnail-kuvia. Jos kuva on sisällölle olennainen, mutta pienessä koossa kuvan sisältö ei näy kunnolla, niin tällöin kannattaa käyttää pientä thumbnail-kuvaa linkkinä suurempaan kuvaan. Tällöin on myös hyvä merkitä suuremman kuvan koko linkin yhteyteen.

Kuvat liitetään HTML-dokumenttiin img-elementin avulla. img-elementtiä kutsutaan korvattavaksi elementiksi, koska kuva ladataan elementin sijaintipaikalle WWW-sivulle. Kuvien lisäämisessä tarvitaan img-elementille muutama attribuutti, joiden avulla kerrotaan kuvasta tarpeellisia tietoja.

• src-attribuutti kertoo paikan, jossa kuva sijaitsee hakemistorakenteessa.
• alt-attribuutti kertoo kuvalle vaihtoehtoisen tekstin, joka näytetään, jos kuvaa ei ole saatavilla tai kuvaa ei pystytä näyttämään. Kuvan vaihtoehtoiseen tekstiin kannattaa oikeasti panostaa, jos kuvan tietosisältö ei esimerkiksi käy ilmi tekstistä.
• longdesc-attribuutilla voidaan määritellä kuvalle pidempi ja tarkempi kuvaus. Attribuutin arvoksi ei laiteta kuvausta vaan WWW-osoite, josta kuvaus löytyy.
• title-attribuutti kertoo kuvalle näytettävän tarkemman sanallisen otsikon. Joissakin selaimissa otsikon saa näkyville viemällä hiirikursorin kuvan päälle.

Esimerkiksi on otettu tämän artikkelin ensimmäinen kuva. Kuvan ja kuvateksti sijoittamista varten on käytetty div-elementtiä, jolle on annettu CSS-tyyleillä haluttuja ominaisuuksia (liu'utus oikeaan laitaan). Tämän jälkeen löytyy img-elementti, johon on määritelty tarvittavat attribuutit. img-elementistä kannattaa huomata, että sillä ei ole lopetuselementtiä ollenkaan. Elementti lopetetaan sijoittamalla aloituselementin loppuun kauttaviiva (/) ennen suurempi kuin -merkkiä.

<div class="pictright">
 <img src="kuva1.png"
   alt="Navigoinnin lisääminen dokumenttiin div-elementin avulla." />
  <p class="caption"><strong>Kuva 1</strong>.
	  Erillisen navigoinnin määrittäminen.</p>
</div>