Načrtovanje in razvoj spletnih aplikacij

Slike v HTML

Slike ali fotografije v HTML vključimo z oznako img. To je element brez vsebine, torej moramo paziti, da ga primerno zaključimo. 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" />

Če želimo večjo sliko prikazati samostojno, jo moramo zapisati v odstavku. Element img ima nekaj pomembnih lastnosti:

  • Oznaka img mora obvezno vsebovati tudi atribut src, 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 lastnostma width (širina) in height (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 lastnostjo alt na 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 uporabiti alt z 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 vsebino alt).

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."/>

Sonce med oblaki.