Toimiminen Klikattavien Kuvien, Kuvatekstien ja Optimoinnin Kanssa
Klikattavat kuvat
Klikattavat kuvat ovat verkkosivulla olevia kuvia, joita voidaan klikata, yleensä siirtymistä varten toiselle verkkosivulle tai muiden toimintojen suorittamiseksi. Tätä lähestymistapaa tarvitaan usein verkkokaupoissa. Käyttäjät ovat tottuneet klikkaamaan kuvaa ja saamaan kortin, jossa on tuotteen täydellinen kuvaus ja hinta.
Jotta kuvasta saadaan klikattava, voit sijoittaa <img>-tunnisteen <a>-tunnisteen sisälle. Esimerkiksi:
Tässä esimerkissä <a>-tunniste määrittää linkitettävän URL-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 URL-osoitteeseen.
Kuvateksti
Voit käyttää HTML:n figure- ja figcaption-elementtejä liittääksesi kuvatekstin kuvaan verkkosivulla. Tässä on esimerkki:
index.html
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 ohjeita 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. Yleensä 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.
Voit käyttää seuraavia lähteitä kuvien pakkaamiseen: Rasterigrafiikan optimointi, Vektorigrafiikan optimointi. Mikä on niiden välinen ero? - Pohdi tätä seuraavassa luvussa.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show me an example of how to make an image clickable?
How do I add a caption to an image using HTML?
What are some best practices for optimizing images on my website?
Mahtavaa!
Completion arvosana parantunut arvoon 2.38Toimiminen Klikattavien Kuvien, Kuvatekstien ja Optimoinnin Kanssa
Pyyhkäise näyttääksesi valikon
Klikattavat kuvat
Klikattavat kuvat ovat verkkosivulla olevia kuvia, joita voidaan klikata, yleensä siirtymistä varten toiselle verkkosivulle tai muiden toimintojen suorittamiseksi. Tätä lähestymistapaa tarvitaan usein verkkokaupoissa. Käyttäjät ovat tottuneet klikkaamaan kuvaa ja saamaan kortin, jossa on tuotteen täydellinen kuvaus ja hinta.
Jotta kuvasta saadaan klikattava, voit sijoittaa <img>-tunnisteen <a>-tunnisteen sisälle. Esimerkiksi:
Tässä esimerkissä <a>-tunniste määrittää linkitettävän URL-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 URL-osoitteeseen.
Kuvateksti
Voit käyttää HTML:n figure- ja figcaption-elementtejä liittääksesi kuvatekstin kuvaan verkkosivulla. Tässä on esimerkki:
index.html
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 ohjeita 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. Yleensä 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.
Voit käyttää seuraavia lähteitä kuvien pakkaamiseen: Rasterigrafiikan optimointi, Vektorigrafiikan optimointi. Mikä on niiden välinen ero? - Pohdi tätä seuraavassa luvussa.
Kiitos palautteestasi!
