dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
HTML Toate tagurile HTML

Imagini Responsive Moderne: <picture>, <source> și Atributele srcset & sizes în HTML

Linkuri și multimedia HTML5 / WHATWG Q&A / Distribuie cod

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).

Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Imagini Responsive Moderne: <picture>, <source> și Atributele srcset & sizes

Ai o nelămurire despre utilizarea comenzii Imagini Responsive Moderne: <picture>, <source> și Atributele srcset & sizes sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.