Toimiminen Klikattavien Kuvien, Kuvatekstien ja Optimoinnin Kanssa

Klikattavat kuvat

Klikattavat kuvat ovat verkkosivun kuvia, joita voidaan klikata, yleensä siirtyäkseen toiselle verkkosivulle tai suorittaakseen muita toimintoja. Tämä lähestymistapa on yleinen erityisesti verkkokaupoissa. Käyttäjät ovat tottuneet klikkaamaan kuvaa saadakseen näkyviin tuotteen koko kuvauksen ja hinnan.

Jotta kuva olisi klikattava, voit sijoittaa <img>-tunnisteen <a>-tunnisteen sisään. Esimerkiksi:

• View the Code
• Open the Live Page

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

Kuvateksti

HTML:n figure- ja figcaption-elementtejä voidaan käyttää liittämään kuvateksti kuvaan verkkosivulla. Tässä esimerkki:

• figure: elementti sisältää sekä figcaption- että img-elementit;
• figcaption: määrittää kuvatekstin, joka näkyy käyttäjille;
• img: määrittää näytettävän kuvan.

Kuvien optimointi

Tämä on tärkeää verkkosivuilla, joilla suuret kuvatiedostot voivat hidastaa sivun latausaikoja ja tehdä sivustosta hitaan tuntuisen. Noudattamalla seuraavia vinkkejä voit parantaa sivuston suorituskykyä ja saavutettavuutta.

• Muuta kuvien koko sopivaksi. Muuta kuvat siihen kokoon, jossa ne näytetään verkkosivulla, sen sijaan että lataat suuria kuvia ja muutat niiden kokoa HTML- tai CSS-koodilla;
• Käytä sopivia tiedostomuotoja. Yleisesti JPEG-muotoa käytetään valokuville, PNG:tä grafiikoille ja kuville, joissa on läpinäkyvyyttä. Vältä suurempia BMP- tai TIFF-tiedostoja;
• Pakkaa kuvat. Verkossa on runsaasti työkaluja, joilla kuvia voi pakata laadun kärsimättä. Tee tämä ennen kuvien lataamista verkkosivulle.