Ce face <img>
Tagul <img> este un element vid (nu se închide) care afișează o imagine în pagină. Atributul src indică calea către fișierul imagine (PNG, JPG, WebP, SVG, AVIF).
Atributul alt este obligatoriu din punct de vedere al accesibilității: el oferă o descriere textuală a imaginii pentru persoanele nevăzătoare și este afișat dacă imaginea nu se poate încărca. În plus, motoarele de căutare folosesc alt pentru indexarea în Google Images.
În HTML5 modern, adăugarea atributului loading="lazy" amână încărcarea imaginilor de mai jos din pagină până când utilizatorul derulează până la ele, accelerând semnificativ viteza site-ului.
Atribute
| Atribut | Descriere |
|---|---|
src |
Adresa URL sau calea către fișierul de imagine. |
alt |
Descrierea textuală alternativă a imaginii (esențială pentru SEO și nevăzători). |
width |
Lățimea nativă a imaginii în pixeli (ajută browserul să rezerve spațiul înainte de încărcare). |
height |
Înălțimea nativă a imaginii în pixeli. |
loading |
„lazy” (amână descărcarea până aproape de vizibilitate) sau „eager” (descarcă imediat). |
Exemple
Exemplul 1: Imagine optimizată cu lățime, înălțime și încărcare leneșă (lazy loading)
Specificarea width și height previne saltul deranjant de conținut (Cumulative Layout Shift – CLS).
<img src="/imagini/laptop-programare.webp"
alt="Un laptop deschis cu cod HTML afișat pe ecran"
width="800"
height="450"
loading="lazy">Ce afișează browserul
Imaginea este afișată centrată la proporțiile cerute, rezervând spațiul de 800x450 pixeli dinainte.Greșeli frecvente
- Omiterea atributului alt sau lăsarea lui alt=”imagine”; alt trebuie să descrie ce conține imaginea în mod util.
- Omiterea dimensiunilor width și height în HTML, ceea ce determină sărituri de pagină în timpul încărcării imaginilor.
Comenzi înrudite
<picture>: Container flexibil pentru imagini responsive: oferă formate moderne (AVIF, WebP) și variante adaptate la mărimea ecranului.<figure> și <figcaption>: Grupează o imagine, o diagramă sau un bloc de cod împreună cu legenda sa explicativă (figcaption).<a>: Creează un hyperlink către o altă pagină web, un fișier, o adresă de email, un număr de telefon sau o ancoră din pagină.