Upotreba HTML IMG oznake za slike i objekte
HTML IMG oznaka regulira umetanje slika i drugih statičnih grafičkih objekata unutar web stranice. Ova zajednička oznaka podržava nekoliko obveznih i neobvezatnih atributa koji povećavaju bogatstvo vašoj sposobnosti za dizajniranje zanimljive web stranice usmjerene na sliku.
Primjer potpuno formirane HTML IMG oznake izgleda ovako:
Obavezna IMG oznaka atributa
SRC. Jedini atribut koji vam je potreban za dobivanje slike za prikazivanje na web stranici je atribut SRC. Ovaj atribut identificira naziv i mjesto slikovne datoteke koja će se prikazati.
ALT. Da bi napisali valjane XHTML i HTML4, također je potreban ALT atribut. Taj se atribut koristi za pružanje neovisnih preglednika s tekstom koji opisuje sliku. Preglednici prikazuju alternativni tekst na različite načine. Neki ga prikazuju kao skočni prozor kada stavite miša preko slike, drugi ga prikazuju u svojstvima kada desnom tipkom miša kliknete na sliku, a neki ga uopće ne prikazuju.
Koristite alt tekst kako biste dali dodatne pojedinosti o slici koja nije relevantna ili važna za tekst web stranice. No, imajte na umu da će se u čitačima zaslona i ostalim preglednicima koji sadrže tek, tekst čitati u nastavku s ostatkom teksta na stranici. Kako biste izbjegli zabunu, upotrijebite opisni alt tekst koji kaže (na primjer), "O web-dizajnu i HTML-u" umjesto samo "logotipa".
U HTML5 atributu ALT nije uvijek obavezan jer možete koristiti opis kako biste dodali još opisa. Također možete koristiti atribut ARIA-DESCRIBEDBY za označavanje ID-a koji sadrži puni opis.
Alt tekst također nije potreban ako je slika čisto dekorativna, kao što je grafika pri vrhu web stranice ili ikona. Ali ako niste sigurni, uključite alt tekst samo u slučaju.
Preporučeni IMG atributi
WIDTH i HEIGHT . Trebali biste ući u naviku uvijek koristiti atribute WIDTH i HEIGHT. I uvijek biste trebali upotrebljavati stvarnu veličinu i ne mijenjati veličinu svojih slika s preglednikom.
Ti atributi ubrzavaju prikaz stranice, jer preglednik može dodijeliti prostor u dizajnu slike, a zatim nastaviti preuzimati ostatak sadržaja, a ne čekajući cijelu sliku za preuzimanje.
Ostali korisni IMG atributi
TITLE . Atribut je globalni atribut koji se može primijeniti na bilo koji HTML element . Štoviše, atribut TITLE omogućuje dodavanje dodatnih informacija o slici.
Većina preglednika podržava atribut TITLE, ali to čine na različite načine. Neki prikazuju tekst kao skočni prozor, a drugi ga prikazuju na zaslonima s informacijama kada korisnik klikne desno klikom na sliku. Možete upotrijebiti atribut TITLE za pisanje dodatnih informacija o slici, ali ne računajte da su te informacije skrivene ili vidljive. To definitivno ne biste trebali koristiti za skrivanje ključnih riječi za tražilice. Ova praksa sada kažnjava većina tražilica.
USEMAP i ISMAP . Ta dva atributa postavljaju slike na stranicama klijenta () i poslužitelja (ISMAP) na vaše slike.
LONGDESC . Atribut podržava URL-ove za dulji opis slike. Ova značajka čini vaše slike dostupnijim.
Deprecirani i zastarjeli IMG atributi
Nekoliko atributa sada je zastario u HTML5 ili zastarjelo u HTML4. Za najbolji HTML, trebali biste pronaći druga rješenja umjesto korištenja ovih atributa.
GRANICA . Atribut definira širinu u pikselima bilo koje granice oko slike. Obustavljena je u korist CSS-a u HTML4 i zastarjela je u HTML5.
ALIGN . Ovaj atribut omogućuje vam da postavite sliku unutar teksta i da se tekući tekst oko nje. Možete poravnati sliku s desne ili lijeve strane. Obustavljen je u korist plutajućeg CSS svojstva u HTML4 i zastario je u HTML5.
HSPACE i VSPACE . HSPACE i atributi VSPACE dodaju horizontalni prostor (HSPACE) i vertikalno (VSPACE). Bijeli će se prostor dodati na obje strane grafikona (gornji i donji ili lijevi i desni) pa ako trebate samo prostor s jedne strane, trebali biste upotrijebiti CSS. Ove atribute su zastarjele u HTML4 u korist marginalnog CSS svojstva i zastarjele su u HTML5.
LOWSRC . Atribut LOWSRC pružaju alternativnu sliku kada je vaš izvor slike toliko velik da se preuzimanja vrlo sporo. Na primjer, možda imate sliku koja je 500 KB koju želite prikazati na svojoj web stranici, ali 500 KB bi trebalo puno vremena za preuzimanje. Tako stvorite mnogo manju kopiju slike, možda u crno-bijeloj ili samo iznimno optimiziranoj, i stavite to u atribut LOWSRC. Manja slika će najprije skinuti i prikazati, a kada se pojavi veća slika, zamijenit će se niskorazinski.
Atribut LOWSRC dodan je u Netscape Navigator 2.0 na IMG oznaku. Bio je dio razine DOM-a 1, ali je uklonjen s razine DOM-a 2. Potpora pregledniku bila je skicirana za ovaj atribut, iako mnoge web lokacije tvrde da su podržani od strane svih modernih preglednika. Nije obustavljen u HTML4 ili zastario u HTML5 jer nije bio službeni dio niti jedne specifikacije.
Izbjegavajte upotrebu ovog atributa i umjesto toga optimizirate svoje slike tako da se brzo učitavaju. Brzina učitavanja stranice kritički je dio dobrog web dizajna, a velike slike polako spuštaju stranice - čak i ako koristite LOWSRC atribut.