Utilizați eticheta HTML IMG pentru imagini și obiecte
Eticheta HTML IMG reglementează introducerea de imagini și alte obiecte grafice statice într-o pagină Web. Această etichetă comună acceptă mai multe atribute obligatorii și opționale care adaugă bogăție abilității dvs. de a crea un site interesant, orientat spre imagine.
Un exemplu de etichetă HTML IMG complet formatată arată astfel:
Etichete IMG necesare
SRC. Singurul atribut de care aveți nevoie pentru a obține o imagine de afișat pe o pagină Web este atributul SRC. Acest atribut identifică numele și locația fișierului imagine care urmează să fie afișat.
ALT. Pentru a scrie valid XHTML și HTML4, este necesar și atributul ALT. Acest atribut este utilizat pentru a oferi browserelor nonvisuale cu text care descrie imaginea. Browserele afișează textul alternativ în moduri diferite. Unele sunt afișate ca pop-up atunci când puneți mouse-ul peste imagine, alții îl afișează în proprietăți atunci când faceți clic dreapta pe imagine, iar altele nu-l afișează deloc.
Utilizați textul alt pentru a oferi detalii suplimentare despre imagine care nu sunt relevante sau importante pentru textul paginii Web. Dar rețineți că în cititoarele de ecran și în alte browsere numai cu text, textul va fi citit în linie cu restul textului din pagină. Pentru a evita confuzia, utilizați alt text descriptiv care spune (de exemplu) "Despre Web Design și HTML" în loc de "logo".
În HTML5, atributul ALT nu este întotdeauna necesar, deoarece puteți utiliza o legendă pentru a adăuga mai multe descrieri. De asemenea, puteți folosi atributul ARIA-DESCRIBEDBY pentru a indica un ID care conține o descriere completă.
Alt text nu este necesar, de asemenea, dacă imaginea este pur decorativă, cum ar fi un grafic în partea de sus a unei pagini web sau pictograme. Dar dacă nu sunteți sigur, includeți alt text doar pentru caz.
Atribute IMG recomandate
Lățime și înălțime . Ar trebui să vă obișnuiți să utilizați întotdeauna atributele WIDTH și HEIGHT. Și trebuie să utilizați întotdeauna dimensiunea reală și să nu redimensionați imaginile cu browserul.
Aceste atribute accelerează redarea paginii deoarece browserul poate aloca spațiu în design pentru imagine și apoi continuă să descarce restul conținutului, în loc să aștepte descărcarea întregii imagini.
Alte atribute utile IMG
TITLE . Atributul este un atribut global care poate fi aplicat oricărui element HTML . În plus, atributul TITLE vă permite să adăugați informații suplimentare despre imagine.
Majoritatea browserelor acceptă atributul TITLE, dar o fac în moduri diferite. Unele afișează textul ca un pop-up în timp ce altele îl afișează în ecranele de informații când utilizatorul face clic dreapta pe imagine. Puteți folosi atributul TITLE pentru a scrie informații suplimentare despre imagine, dar nu conta pe aceste informații fie ascunse, fie vizibile. Ar trebui să utilizați cu siguranță acest lucru pentru a ascunde cuvinte cheie pentru motoarele de căutare. Această practică este acum penalizată de majoritatea motoarelor de căutare.
USEMAP și ISMAP . Aceste două atribute stabilesc hărțile imaginii de pe partea de client () și de pe server (ISMAP) în imaginile dvs.
LONGDESC . Atributul acceptă adresele URL la o descriere mai lungă a imaginii. Această caracteristică face ca imaginile dvs. să fie mai accesibile.
Garanții IMG depreciate și învechite
Mai multe atribute sunt acum depășite în HTML5 sau depreciate în HTML4. Pentru cel mai bun HTML, ar trebui să găsiți alte soluții în loc de a utiliza aceste atribute.
FRONTARE . Atributul definește lățimea în pixeli a oricărei margini din jurul imaginii. Acesta a fost depreciat în favoarea CSS în HTML4 și este depășit în HTML5.
ALIGN . Acest atribut vă permite să plasați o imagine în interiorul textului și să aveți fluxul de text în jurul acestuia. Puteți alinia o imagine la dreapta sau la stânga. A fost depreciată în favoarea proprietății CSS float în HTML4 și este depășită în HTML5.
HSPACE și VSPACE . HSPACE și atributele VSPACE adaugă spațiul alb orizontal (HSPACE) și vertical (VSPACE). Spațiul alb va fi adăugat în ambele părți ale graficului (de sus și de jos sau de la stânga și la dreapta), deci dacă aveți nevoie doar de spațiu pe o parte, ar trebui să utilizați CSS. Aceste atribute au fost depreciate în HTML4 în favoarea proprietății CSS de margine și sunt depășite în HTML5.
LOWSRC . Atributul LOWSRC oferă o imagine alternativă atunci când sursa de imagine este atât de mare încât se descarcă extrem de încet. De exemplu, este posibil să aveți o imagine care este de 500KB pe care doriți să o afișați pe pagina dvs. web, dar 500KB va dura mult timp pentru a descărca. Deci, creați o copie mult mai mică a imaginii, probabil în alb-negru sau doar extrem de optimizată, și puneți-o în atributul LOWSRC. Imaginea mai mică se va descărca și se va afișa mai întâi, iar atunci când se va afișa imaginea mai mare, va fi înlocuită sursa redusă.
Atributul LOWSRC a fost adăugat la Netscape Navigator 2.0 la eticheta IMG. A fost o parte din nivelul 1 DOM, dar a fost apoi eliminat de la nivelul DOM 2. Suportul pentru browser a fost sugestiv pentru acest atribut, deși multe site-uri afirmă că este acceptat de toate browserele moderne. Nu este depreciat în HTML4 sau învechit în HTML5 deoarece nu a fost niciodată o parte oficială a fiecărei specificații.
Evitați utilizarea acestui atribut și optimizați imaginile astfel încât să se încarce rapid. Viteza de încărcare a paginii este o parte esențială a unui design Web bun, iar imaginile mari încetinesc paginile în jos - chiar dacă utilizați atributul LOWSRC.