Thumbnail - esikatselukuvat

Kuvat linkkinä

Jos sivulla on monta suurta kuvatiedostoa, ei niitä ole suositeltavaa laittaa automaattisesti näytettäväksi, sillä sivuston lataaminen kestää tällöin kauemmin. (Vaikka nettiyhteydet ovat nopeutuneet mukavasti, tulee aina silloin tällöin tilanne että joudut selaamaan tavallista hitaammalla yhteydellä) Asia voidaan hoitaa laittamalla suurista kuvista vain pienet esikatselukuvat ensin näytille. Esikatselukuvaa napauttamalla ladataan parempilaatuinen suurikokoinen tiedosto. 

Tämä voidaan koodata tekemällä kuvista kaksi versiota, alkuperäinen ja pieni. Html-koodissa tehdään pienestä esikatselukuvasta linkki, joka johtaa alkuperäiseen kuvatiedostoon.

Esimerkki:
<a href="Ison_kuvatiedoston_nimi.jpg">
<img src="pieni_esikatselukuva.jpg" alt="Lataa kuva">
</a>

Tehtävä 11

Muokkaa edellisestä taulukkotehtävää niin, että kuvista on kolmannessa sarakkeessa esikatseluversiot joita napauttamalla ladataan isokokoisempi versio kuvatiedostosta.