Slike ali fotografije v HTML vključimo z oznako <img>. To je element brez vsebine, kar pomeni, da nima zaključnega dela oznake. Element <img> je vrstični element, kar pomeni, da se slika v dokumentu obnaša kot en velik znak.
<img src="URL" width="50" height="50" alt="Opis slike" title="Pojavni namig">
Če želimo večjo sliko prikazati samostojno, jo moramo zapisati v odstavku. Element <img> ima nekaj pomembnih lastnosti:
- Oznaka
<img>mora obvezno vsebovati tudi atributsrc, ki je okrajšava za vir (ang. source). Brskalniku torej pove, kje se slika nahaja. Če se slika nahaja v isti mapi kot spletna stran, je za vrednost lastnosti dovolj napisati samo ime datoteke, v nasprotnem pa moramo napisati še ustrezno pot do slike. - Z atributoma
width(širina) inheight(višina) določimo velikost pravokotnega področja, namenjenega prikazu slike. Če velikosti ne predpišemo, bo slika prikazana v njeni originalni velikosti. Če podamo samo širino ali samo višino, bo slika tako široka oziroma visoka, kot smo zahtevali, pri čemer bo razmerje med njeno širino in višino ohranjeno (slika ne bo popačena). Če pa podamo širino in višino, bo prikazana slika točno tako velika, kot smo zahtevali (pri tem se lahko slika tudi popači). Priporočljivo je, da vedno podamo obe dimenziji slike. Samo tako bo brskalnik lahko že med nalaganjem strani rezerviral dovolj velik prostor, kjer bo kasneje prikazal sliko. - Z atributom
altna kratko opišemo, kaj se nahaja na sliki. Opis slike se prikaže, če pregledovalnik slike ne more prikazati (prikaže se namesto slike). Po standardu je navedba te lastnosti obvezna. Vsekakor je zelo dobro uporabitialtz opisom za vsako sliko, ki se nahaja na kakšni spletni strani, da izboljšamo prikaz in ohranimo koristnost dokumenta, predvsem za ljudi, ki imajo le tekstovne brskalnike (npr. slepi imajo naprave, ki preberejo vsebinoalt). - Atribut
titleizpiše majhen okvir z opisom slike, ko se z miško zapeljemo nad sliko. Atributtitleni obvezen, vendar je koristen za izboljšanje uporabniške izkušnje.
Na spletnih straneh uporabljamo slike treh formatov, ki slike stisnejo:
- JPEG
- GIF
- PNG
Format JPEG je največkrat uporabljen v spletu. Velikost slike relativno dobro zmanjša ob ne pretirani izgubi kakovosti, podpira pa tudi dovolj široko paleto barv, da so prehodi in rahli odtenki barv nepopačeni. Glavna težava pa je vsakokratno stiskanje datoteke. Večkrat ko odpremo in nato shranimo JPG sliko se kvalitete le-te zmanjša.
Format GIF podpira transparentnost in animacijo. Glavna težava tega formata pa je omejena barvna paleta in sicer do 256 barvnih odtenkov. To pa je za fotografije odločno premalo. Slike zaradi tega izgledajo zrnato oz kockasto. Je pa zelo uporaben pri grafikah, ki nimajo veliko barv oz barvnih prehodov, saj je zaradi manjšega števila barvnih odtenkov sama velikost slike lahko nekajkrat manjša od JPG ali PNG formata.
Glavne prednosti formata PNG so možnost večkratnega shranjevanja brez izgub na kvaliteti in pa alfa transparentnost. To pomeni, da razne efekte, kot so recimo sence, najlažje izvedemo ravno s PNG formatom. Tretja dobra lastnost pa je uporaba sRGB barvne palete, kar ga naredi zelo uporabnega za uporabo pri grafikah in fotografijah preko interneta (od vektorskih do bitnih). Slabša stran je relativno velika datoteka.
Paziti moramo na velikost slik, ki jih objavljamo na spletnih straneh. Izogibamo se uporabi visoko ločjivostnih slik, saj želimo, da se slika čim hitreje prenese k uporabniku.
Primer slike v HTML:
<img src="slike/sonce.jpg" width="267" height="200" alt="Sonce med oblaki." title="Sonce">