img-tagi

Tag img luo kuvan. Kuvan polku määritetään attribuutissa src. Ei vaadi päättetagiä.

Attribuutit

Attribuutti	Kuvaus
src	Määrittää kuvan polun. Pakollinen attribuutti.
alt	Vaihtoehtoinen teksti, joka näytetään kuvan sijaan, jos sitä ei löydy (esimerkiksi polku on määritetty väärin). Pakollinen attribuutti. Sen puuttuessa validaattori (ohjelma, joka tarkistaa HTML:n tai CSS:n oikeellisuuden) antaa virheen.
width	Kuvan leveys, pikseleinä (tässä tapauksessa mittayksikköä ei ilmoiteta) tai prosentteina kuvan vanhemmasta elementistä.
height	Kuvan korkeus, pikseleinä (tässä tapauksessa mittayksikköä ei ilmoiteta) tai prosentteina kuvan vanhemmasta elementistä.

Vivahteet

Jos kuvalle ei ole asetettu leveyttä eikä korkeutta - kuva näytetään todellisessa koossaan. Jos korkeus on asetettu - kuvan korkeus tulee annetuksi, ja leveys sopeutuu siten, että sen mittasuhteet eivät vääristy.

Jos vain leveys on asetettu - vastaavasti, kuvan korkeus sopeutuu niin, että mittasuhteet säilyvät.

Jos sekä leveys että korkeus on asetettu - kuvan mittasuhteet voivat vääristyä (tai eivät välttämättä, riippuen sattumasta). Jos leveys tai korkeus (tai molemmat) ovat suurempia kuin todellinen koko - kuva suurenee, mutta menettää laadussaan.

On suositeltavaa asettaa kuvien leveys ja korkeus attribuuteissa (eikä CSS:n kautta) - tällöin selain lataa kuvat nopeammin - sillä ei tarvitse laskea kunkin kuvan kokoa sen vastaanottamisen jälkeen.

Ei ole suositeltavaa pienentää kuvien todellisia kokoa tarpeettomasti. Esimerkiksi, kuvan todellinen koko on 1000 kertaa 1000 pikseliä, mutta asetat sille leveyden 100px. Tällöin kuva näyttää näytöllä 100 pikseliä leveältä, mutta sen koko on vielä tuhat ja vastaavasti sen lataaminen kestää paljon kauemmin.

Esimerkki

Lisätään verkkosivulle kuva, emmekä aseta attribuutteja height ja width. Kuvan koko on sen todellinen koko:

:

Esimerkki

Kokeillaan asettaa kuvan leveys käyttämällä attribuuttia width, korkeuden tulisi tällöin sopeutua niin, että kuvan mittasuhteet säilyvät:

:

Esimerkki

Asetetaan nyt kuvan korkeus käyttämällä attribuuttia height, leveys sopeutuu tällöin niin, että kuvan mittasuhteet säilyvät:

:

Esimerkki

Asetetaan samanaikaisesti kuvan sekä korkeus, että leveys. Kuvan mittasuhteet tulee tällöin vääristyneiksi (ei välttämättä, mutta tässä tapauksessa korkeus ja leveys on valittu niin, että mittasuhteet vääristyvät):

:

Esimerkki

Asetetaan väärä polku kuvaan (yksinkertaisuuden vuoksi jätetään se tyhjäksi). Kuvan sijasta näemme attribuutin alt sisällön (vaikuttaa siltä, että se on normaalia tekstiä - mutta yritä kopioida sitä - et onnistu, se vetäytyy kuin kuva):

:

Katso myös