Cum adaugi imagini într-o pagină web (Curs HTML începători, partea 3)

Imaginile sunt elemente esențiale în designul web modern, îmbunătățind semnificativ experiența utilizatorului și eficacitatea comunicării. Acest ghid aprofundat explorează tehnicile de incorporare a imaginilor în paginile HTML, acoperind aspecte de la sintaxa de bază până la optimizarea avansată.

Elementul <img>: Fundamente și utilizare avansată

Tagul <img> este instrumentul principal pentru inserarea imaginilor în HTML. Este un element auto-închizător, ceea ce înseamnă că nu necesită un tag de închidere.

Sintaxa de bază:

<img src="cale/catre/imagine.jpg" alt="Descriere a imaginii" />

Atribute esențiale și avansate:

1. src (obligatoriu):

• Specifică sursa imaginii.
• Exemple:
  html <img src="/imagini/logo.png" /> <!-- Cale relativă --> <img src="https://exemplu.com/imagini/banner.jpg" /> <!-- URL absolut -->

1. alt (foarte recomandat):

• Oferă o descriere textuală alternativă.
• Exemple:
  html <img src="pisica.jpg" alt="O pisică tărcată dormind pe canapea" /> <img src="grafic.png" alt="Grafic reprezentând creșterea vânzărilor în 2023" />

1. width și height:

• Definesc dimensiunile imaginii.
• Bună practică: Specificați întotdeauna pentru a preveni modificările de aspect în timpul încărcării.
• Exemplu:
  html <img src="produs.jpg" alt="Produs nou" width="300" height="200" />

1. loading (atribut modern):

• Controlează comportamentul de încărcare al imaginii.
• Valori: eager (implicit), lazy (încărcare amânată).
• Exemplu:
  html <img src="imagine-mare.jpg" alt="Peisaj" loading="lazy" />

1. srcset și sizes (pentru imagini responsive):

• Permit specificarea mai multor surse de imagine pentru diferite rezoluții.
• Exemplu:
  html <img src="imagine-mica.jpg" srcset="imagine-mica.jpg 300w, imagine-medie.jpg 600w, imagine-mare.jpg 1200w" sizes="(max-width: 320px) 280px, (max-width: 640px) 580px, 1200px" alt="Imagine responsivă" />

Importanța și utilizarea corectă a atributului alt

Atributul alt este crucial pentru:

1. Accesibilitate: Asistă utilizatorii cu deficiențe vizuale.
2. SEO: Îmbunătățește înțelegerea conținutului de către motoarele de căutare.
3. Utilizare generală: Oferă context când imaginea nu se încarcă.

Bune practici pentru alt:

• Descrieți conținutul și funcția imaginii, nu doar ce reprezintă.
• Pentru imagini decorative, folosiți un alt gol: alt="".
• Evitați repetarea informațiilor din text adiacent.

Formate de imagine pentru web: Alegerea optimă

1. JPEG (Joint Photographic Experts Group)

• Caracteristici: Compresie cu pierderi, paletă de culori largă.
• Utilizări: Fotografii, imagini complexe.
• Exemplu de utilizare:

  <img src="fotografie-natura.jpg" alt="Peisaj montan la apus" />

2. PNG (Portable Network Graphics)

• Caracteristici: Compresie fără pierderi, suport pentru transparență.
• Utilizări: Logo-uri, grafice, imagini cu text.
• Exemplu de utilizare:

  <img src="logo-companie.png" alt="Logo-ul companiei XYZ" />

3. GIF (Graphics Interchange Format)

• Caracteristici: Suport pentru animații simple, maxim 256 culori.
• Utilizări: Animații simple, iconițe.
• Exemplu de utilizare:

  <img src="icon-animat.gif" alt="Icon animat reprezentând încărcarea" />

4. SVG (Scalable Vector Graphics)

• Caracteristici: Format vectorial, scalabil infinit.
• Utilizări: Logo-uri, iconițe, ilustrații simple.
• Exemplu de utilizare:

  <img src="diagram

a-flux.svg" alt="Diagramă de flux a procesului de vânzare" />

5. WebP (Web Picture Format)

• Caracteristici: Format modern cu compresie superioară.
• Utilizări: Alternative la JPEG și PNG pentru browsere moderne.
• Exemplu de utilizare cu fallback:

  <picture>
    <source srcset="imagine.webp" type="image/webp">
    <img src="imagine.jpg" alt="Descriere imagine" />
  </picture>

Tehnici avansate și optimizare

Imagini responsive

Utilizați srcset și sizes pentru a oferi imagini optimizate pentru diferite dispozitive:

<img src="imagine-default.jpg"
     srcset="imagine-small.jpg 300w,
             imagine-medium.jpg 600w,
             imagine-large.jpg 1200w"
     sizes="(max-width: 320px) 280px,
            (max-width: 640px) 580px,
            1200px"
     alt="Imagine responsivă" />

Lazy loading

Încărcați imaginile doar când sunt necesare pentru a îmbunătăți performanța:

<img src="imagine.jpg" alt="Descriere" loading="lazy" />

Optimizarea imaginilor

1. Comprimați imaginile fără a pierde calitatea vizibilă.
2. Alegeți formatul potrivit pentru fiecare tip de imagine.
3. Utilizați servicii de CDN (Content Delivery Network) pentru imagini frecvent accesate.

Depanare și greșeli comune

1. Imaginea nu se afișează: Verificați calea src și asigurați-vă că fișierul există.
2. Imagine distorsionată: Asigurați-vă că raportul de aspect este corect în atributele width și height.
3. Performanță slabă: Optimizați dimensiunea fișierelor și utilizați lazy loading.
4. Probleme de accesibilitate: Asigurați-vă că toate imaginile au atribute alt descriptive.

Concluzii și cele mai bune practici

1. Utilizați întotdeauna atributul alt pentru accesibilitate și SEO.
2. Optimizați imaginile pentru web pentru a îmbunătăți timpul de încărcare.
3. Implementați tehnici responsive pentru o experiență optimă pe toate dispozitivele.
4. Alegeți formatul de imagine potrivit în funcție de conținut și cerințele de calitate.
5. Testați imaginile pe diverse dispozitive și browsere pentru a asigura compatibilitatea.

Prin aplicarea acestor principii și tehnici, veți putea crea pagini web atractive, accesibile și optimizate, îmbunătățind semnificativ experiența utilizatorilor și performanța site-ului.