`Imagini Responsive Moderne: , și Atributele srcset & sizes` în HTML

Optimizarea imaginilor pentru Core Web Vitals: livrarea formatelor de generație nouă AVIF și WebP prin <picture>, art direction pentru ecrane mobile și atributul loading="lazy".

Sintaxă tag

<picture><source type="image/avif" srcset="hero.avif"><img src="hero.jpg" loading="lazy" ...></picture>

Imaginile constituie adesea peste 60-70% din greutatea totală a unei pagini web. Standardul HTML5 oferă două instrumente complementare pentru rezolvarea acestei provocări: atributele srcset și sizes (pentru scalarea automată în funcție de rezoluția ecranului) și elementul <picture> (pentru servirea formatelor moderne de ultimă generație precum AVIF și WebP cu fallback automat).

1. Servirea formatelor de generație nouă (AVIF → WebP → JPEG)

<picture>
    <!-- 1. Dacă browserul suportă AVIF (cel mai compact format, comprimare superioară) -->
    <source srcset="produs.avif" type="image/avif">
    
    <!-- 2. Dacă browserul suportă WebP (suportat în 98% din browsere) -->
    <source srcset="produs.webp" type="image/webp">
    
    <!-- 3. Imaginea de fallback obligatorie (JPEG clasic pentru browsere vechi) -->
    <img src="produs.jpg" alt="Laptop ultraportabil din aluminiu" width="800" height="500" loading="lazy" decoding="async">
</picture>

2. Art Direction: Imagini diferite pentru Desktop vs. Mobil

<picture>
    <!-- Pe ecrane mari (>= 768px): afișăm imaginea panoramică de tip banner orizontal -->
    <source media="(min-width: 768px)" srcset="banner-desktop.webp">
    
    <!-- Pe ecrane mici (mobil): afișăm o versiune decupată vertical (portret) -->
    <source media="(max-width: 767px)" srcset="banner-mobil-crop.webp">
    
    <img src="banner-default.jpg" alt="Campania de Black Friday 2026" width="1200" height="400">
</picture>

De ce specificarea lățimii și a înălțimii (width & height) este critică

Atributele width și height de pe tagul <img> nu forțează o dimensiune rigidă în pixeli dacă ai în CSS regula max-width: 100%; height: auto;. În schimb, ele îi permit browserului să calculeze instantaneu proporția de aspect (Aspect Ratio) a imaginii și să rezerve spațiul gol pe ecran înainte ca fișierul să fie descărcat din rețea, eliminând complet salturile vizuale de conținut (CLS = 0).