Klikattavat kuvat

Klikattavat kuvat ovat verkkosivulla olevia kuvia, joita voidaan klikata, yleensä siirtyäkseen toiselle verkkosivulle tai suorittaakseen muita toimintoja. Yleensä tarvitset tätä lähestymistapaa, kun käsittelet verkkokauppoja. Käyttäjät tottuvat klikkaamaan kuvaa ja saamaan kortin, jossa on täydellinen tuotteen kuvaus ja hinta.

Jotta kuva olisi klikattava, voit kääriä <img>-tagin <a>-tagin sisään. Esimerkiksi:

Tässä esimerkissä <a>-tagi määrittää URL-osoitteen, johon linkitetään href-attribuutissa, ja <img/>-tagi määrittää näytettävän kuvan. Kun käyttäjä klikkaa kuvaa, selain siirtyy href-attribuutissa määritettyyn URL-osoitteeseen.

Kuvateksti

Voit käyttää HTML:n figure ja figcaption elementtejä liittääksesi kuvatekstin kuvaan verkkosivulla. Tässä on esimerkki:

• figure: elementti sisältää sekä figcaption että img elementit;

• figcaption: määrittää kuvatekstin, joka on näkyvissä käyttäjille;

• img: määrittää näytettävän kuvan.

Kuvien optimointi

Tämä on tärkeää verkkosivuilla, joissa suuret kuvatiedostot voivat hidastaa sivun latausaikoja ja tehdä verkkosivustosta hitaan tuntuisen. Seuraamalla seuraavia vinkkejä voit parantaa verkkosivuston yleistä suorituskykyä ja saavutettavuutta.

• Muuta kuvien kokoa sopivaksi. Muuta kuvien kokoa siihen kokoon, jossa ne näytetään verkkosivulla, sen sijaan että lataat suuria kuvia ja muutat niiden kokoa HTML:n tai CSS:n avulla;

• Käytä sopivia tiedostomuotoja. Yleensä JPEG:iä käytetään valokuville, PNG:tä grafiikoille ja kuville, joissa on läpinäkyvyyttä. Vältä suurempia BMP- tai TIFF-tiedostoja;

• Pakkaa kuvat. On olemassa valtava määrä verkkotyökaluja, jotka voivat pakata kuvia laadusta tinkimättä. Tee se ennen kuvien lataamista verkkosivustolle.

Huomautus

Voit käyttää seuraavia lähteitä kuvien pakkaamiseen: Rasterigrafiikan optimointi, Vektorigrafiikan optimointi. Mikä on niiden ero? - Pohdi tätä seuraavassa luvussa.