[IMAGE]

Kuvien käyttö
Kirjan sivut
24 - 36 ja 64 - 68
Kuvien lisäämisessä WWW-sivuille kannattaa huomioida muutama asia:
  • Kuvien tallennustyyppi tulee olla joko gif tai jpg. Tai ei ole aivan pakko, mutta muiden kuvaformaattien kanssa on ongelmia selaimien kyvyssä käsitellä niitä. Esimerkiksi BMP-muotoiset kuvat näkyvät Explorerissa, mutta eivät Netscapessa.
  • Jos haluat mahdollisimman monen näkevän kuvasi, niin käytä gif-kuvia.
  • GIF
    • Maksimissaan 256 väriä. Vaikka on pakattu kuvamuoto ei hävitä kuvapisteitä.
    • Käytettävä paletti on muokattavissa ja värien määrää voidaan muutella
    • gif89a-tallennusmuotoisista kuvista voidaan tausta tehdä läpinäkyväksi
  • JPEG
    • Taustakuvina ja suuret linkkien takana olevat kuvat.
    • Kannattaa käyttää värivalokuvissa.
    • Hävittää kuvapisteitä ja samalla vähentää kontrastia.
    • Ei voida muuttaa taustaa läpinäkyväksi.
  • Yksittäisten kuvien koko max 20 kilotavua (ohjeellinen arvo sivujen latautumisen nopeuttamiseksi).
  • Vähennä värien määrää mahdollisuuksien mukaan.
  • Jos mahdollista, käytä samoja kuvia usealla sivulla, tällöin sivujen  latautuminen on nopeampaa.

Kuvien hankinta:
Kuvien hankkimiseksi on useampi tapa. Alla pari keinoa.
1. Omassa harjoittelussasi voit käyttää esimerkiksi www-sivuilta löytyviä kuvia. www-sivulla olevan kuvan saat tallennettua napauttamalla kuvan päällä hiiren oikealla korvalla. Avautuvasta pikavalikosta valitset tallenna kuva nimellä... saat auki normaalin tallennusikkunan, jossa valitset aseman ja kansion, mihin kuva tallennetaan. www-sivuilla olevien kuvien suhteen on ehdottoman tärkeää huomata se, että tekijänoikeudet ovat edelleen kuvan tekijällä, vaikka sen "imuroiminen" onkin helppoa.
2.
Ilmaiskuvien käyttö. Internetissä  on useita www-sivuja, joilla on vapaasti imuroitavia kuvia. Samoin kaupoista voit ostaa CD-levyllä olevia clipart-kuvia. Näiden suhteen varmista, että kuvat ovat todella ilmaisia (avainsanoja ovat mm. free, royalty free). 
3. Kuvien skannaaminen ja kuvanmuokkaus kuvankäsittelyohjelmassa.

IMG - elementti

Kuva tuodaan sivulle IMG-elementillä. Elementillä ei ole lopetusta. Yksinkertaisimmillaan IMG-elementtiin määritellään vain SRC-attribuutti, joka ilmaisee kuvan lähteen, siis sijaintipaikan, josta kuva haetaan sivulle. Jos kuva on tallennettu samaan kansioon htm-tiedoston kanssa, riittää kuvalle vain tiedostonimi. Katso myös linkit ja hakemistot. Huomaa, että vaikka kuva näkyy sivulla, niin se ei ole "kiinni" sivussa. Kun siirrät sivuja toiseen paikkaan, joko palvelimelle tai toiselle koneelle, siirrä myös kuvat. Muuten selaimessa näkyy punainen rasti (IE) tai harmaa neliö (Netscape), joka osoittaa, että tässä pitäisi olla kuva, mutta sitä ei jostakin syystä löydy. Alla on malli tilanteesta.

Vieressä on kuva, jota selain ei löydä, siksi punainen rasti/harmaa neliö.

<IMG SRC=”kuva.gif”> 
Elementti voi kuvan nimen jälkeen sisältää myös muita attribuutteja: 
ALT=”......”
Teksti, joka näkyy jos kuva ei lataudu 
ALIGN=”.......”
Kuvan ja tekstin suhteen komennot eli kuinka kuvan vieressä oleva teksti sijoittuu:
* top: kuvan yläreuna on tekstin yläreunan tasalla 
* middle
: Kuvan keskikohta on tekstin perusviivan kohdalla 
* bottom
: Kuvan alareuna on tekstin perusviivan kohdalla 
* left
: Kuva on sivun vasemmassa reunassa ja teksti juoksee kuvan vierellä 
* right
: Kuva on sivun oikeassa reunassa, teksti juoksee kuvan vierellä

BORDER: Kuvan reunat pikseleinä 
WIDTH
: kuvan leveys pikseleinä
HEIGHT
: Kuvan korkeus pikseleinä

HSPACE ja VSPACE -attribuuteilla saat kuvalle tyhjää tilaa jälkeen annetun pikseliarvon verran.

Esimerkki 
<IMG SRC=”logo.gif” ALT=”logo" ALIGN=LEFT border="3" hspace="30" vspace="30">

logoKuvan tekstivaihtoehto on logo, kuva keskitetty vasempaan laitaan, reunuksen paksuus 3 pikseliä, tyhjää tilaa vasemmalla, oikealla, ylä- ja alapuolella 30 pikseliä, kuvan korkeus 78 pikseliä ja leveys 77 pikseliä. Koska kuvalla on 30 pikselin tyhjä tila reunoilla, alkaa teksti kuvan yläreunasta, joka tässä tapauksessa on selaimen mukaan yläreunaan lisätyn 30 pikseliä ylempänä kuin näytöllä näkyvä kuva. 
Lisää esimerkkejä kuvien käytöstä
Kooste:
Elementti Attribuutit / selitykset
<IMG>  Kuvan sijoitus sivulle. Ei lopetuselementtiä.
src - kuvan lähde eli tiedoston nimi
alt - vaihtoehtoinen teksti
align = left, right, top, middle, bottom - kuvan ja vieressä olevan tekstin suhde toisiinsa.
hspace/vspace - tyhjä tila kuvan ympärillä
border - kuvan reunan paksuus
width - kuvan leveys
height - kuvan korkeus
lowsrc - lataamisen aikana näkyvä "heikompi" kuva