kuvat ja www

 
sisältö
 

 

 

 

Enemmistö Internetin käyttäjistä on yhteydessä palvelimeen hitaiden modeemien välityksellä, minkä vuoksi kuvien tiedostokoko tulisi pitää mahdollisimman pienenä. Mitä enemmän ja mitä suurikokoisempia kuvia sivut sisältävät, sitä hitaammin ne latautuvat. Etusivun suurikokoiset kuvat saattavat karkoittaa lukijat jo alkuvaiheessa. WWW-sivuja suunniteltaessa on pakko omaksua kompromissiasenne erityisesti kuvien suhteen.

Suurin osa sivuista olisi kuvineen ja teksteineen suositeltavaa pitää tiedostokooltaan 30-50 kilotavuisina. Kuvien tiedostokokoa voi pienentää mm. vähentämällä värimäärää, pienentämällä kuvien fyysistä kokoa ja valitsemalla sopivin tallennusmuoto ja pakkaussuhde.

Usein suurista ja hitaasti latautuvista kuvista kannattaa ensin esittää pienempi ns. postimerkkikuva, jota klikkaamalla lukija voi halutessan nähdä suuremman version. Tämä toteutetaan tekemällä pienestä kuvasta linkki suurempaan kuvaan: esim. <a href="isokuva.jpg"> <img src="thumbnail.jpg"> </a>. Linkki vastaa siis normaalia tekstin linkkausta, mutta klikattavan tekstin paikalle tulee nyt thumbnail-kuva.

Kuvakomentoon kannattaa aina lisätä kuvan korkeus- ja leveysattribuutit (esim. <img src="kuva.gif width="100" height="150">). Itse kuvan latautumisnopeuteen menettelyllä ei ole vaikutusta, mutta kun selain tietää etukäteen kuvan tarvitseman tilan, se pystyy näyttämään sivun tekstisisällön nopeammin.

Varsinkin suuret kuvat on järkevää tallentaa interlace muodossa (gif-kuvat) tai progressive-muodossa (jpeg-kuvat), vaikka tiedostokoko vähän kasvaisikin. Tällaiset kuvat latautuvat vähitellen - vastaanottaja saa aluksi näytölleen heikompitasoisen kuvan, joka sitten vähitellen tarkentuu. Itse kuvan latautuminen ei ole yhtään sen nopeampaa, mutta vastaanottaja saa nopeammin käsityksen kuvasta.

Selaimenn välimuistista on apua silloin, kun samaa kuvaa käytetään sivulla useita kertoja. Kuva nimittäin ladataan ainoastaan yhden kerran ja sen jälkeen se löytyy selaimen välimuistista. Width- ja height-attribuuttien avulla samasta kuvasta voi myös käyttää eri kokoisia versioita.

Jos jokin sivu sisältää suhteellisen paljon tekstiä ja lukija todennäköisesti siirtyy seuraavalle sivulle ensimmäisen sivun luettuaan, voi seuraavan sivun kuvia laittaa valmiiksi latautumaan näkymättöminä yhden pikselin kuvina edellisen sivun loppuun. Kun lukija siirtyy seuraavalle sivulle, kuvat löytyvät selaimen välimuistista eikä latautumista tarvitse odottaa. Ensimmäisellä sivulla kuvat eivät vaikuta sivun alkuosan latautumiseen millään tavalla, koska ne sijaitsevat tiedoston lopussa. Jos lukija siirtyy seuraavalle sivulle ennen kuin kuvat ovat ehtineet latautua, tapahtuu latautuminen normaaliin tapaan.

Esimerkissä on piilotettu kaksi kuvaa ensimmäiselle sivulle.
1. sivu:
<html>
<head>
<title>
</title>
</head>
<body>
<p>tekstiosuus
<p><a href="sivu2.htm">seuraavalle sivulle</a>
<p>
<img src="kuva1.gif width="1" height="1">
<img src="kuva2.gif width="1" height="1">
</body>
</html>

2. sivu:
...
<img src="kuva1.gif width="250" height="200">
<img src="kuva2.gif width="220" height="200">
...

 


 

 

 

 
linkkejä lähteet videokuva gif-animaatiot klikattavat kuvat kuvan lisääminen mistä kuvia? taustakuva kuvien koko kuvaformaatit bittikartta- ja vektorikuvat kuvituksen suunnittelu tekijänoikeudet etusivu