Cum să folosești imagini în HTML — ghid optimizare

In this tutorial, you'll learn about Cum să folosești imagini în HTML. We cover key concepts, practical examples, and best practices.

Imaginile sunt esențiale pentru design web, dar pot încetini dramatic pagina dacă nu sunt optimizate — format greșit, dimensiune nepotrivită sau încărcare sincronă.

The Problem

Încărcarea imaginilor neoptimizate este principala cauză a paginilor lente. Dezvoltatorii folosesc o singură imagine pentru toate ecranele, ignoră formatele moderne și nu implementează lazy loading.

The Wrong Way

<img src="poza.jpg" width="1920" height="1080">

Probleme: Aceeași imagine mare e descărcată și pe mobil (risipă de bandă). Fără alt, imaginea e inaccesibilă. Fără lazy loading, imaginea blochează încărcarea paginii.

The Right Way

<img
  src="poza-800.jpg"
  srcset="poza-400.jpg 400w, poza-800.jpg 800w, poza-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Peisaj montan la răsărit"
  loading="lazy"
  width="800"
  height="600"
>

Step-by-Step Fix

1. Folosește imagini responsive cu srcset

<img
  src="imagine-800.jpg"
  srcset="imagine-400.jpg 400w, imagine-800.jpg 800w, imagine-1200.jpg 1200w"
  sizes="100vw"
  alt="Descriere"
>

Browserul alege cea mai potrivită imagine în funcție de ecran.

2. Folosește <picture> pentru formate moderne

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

3. Activează lazy loading

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

loading="lazy" încarcă imaginea doar când e aproape de viewport.

4. Specifică dimensiunile

<img src="imagine.jpg" width="800" height="600" alt="Descriere">

Fără dimensiuni, layout-ul sarbe în timpul încărcării (Cumulative Layout Shift).

Prevention Tips

• Convertește imaginile în WebP sau AVIF pentru dimensiuni mai mici
• Setează width și height explicit pentru a preveni layout shift
• Folosește loading="lazy" pentru imaginile de sub fold
• Prima imagine de deasupra fold-ului poate rămâne loading="eager"

Common Mistakes

1. Fără alt text — imaginile informative trebuie descrise; cele decorative au alt=""
2. Imagine unică pentru toate ecranele — mobilul descarcă imagini de desktop
3. Fără lazy loading — toate imaginile se încarcă simultan, indiferent dacă sunt vizibile
4. Dimensiuni lipsă — layout-ul saltă când imaginea se încarcă (CLS)
5. Format greșit — PNG pentru fotografii (enorm); WebP e de 3-5 ori mai mic

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.