dexblog.ro
HTML Toate tagurile HTML

în HTML

Linkuri și multimedia HTML5

Container flexibil pentru imagini responsive: oferă formate moderne (AVIF, WebP) și variante adaptate la mărimea ecranului.

Sintaxă tag 
<picture>
  <source srcset="poza.avif" type="image/avif">
  <source srcset="poza.webp" type="image/webp">
  <img src="poza.jpg" alt="Descriere">
</picture>

Ce face <picture>

Tagul <picture> conține unul sau mai multe taguri <source> urmate de un tag de rezervă <img>.

Browserul alege prima sursă pe care o suportă și care corespunde regulilor de ecran (media queries). Astfel poți servi formate de generație nouă precum AVIF sau WebP browserelor moderne, păstrând JPEG pentru cele mai vechi, sau imagini decupate diferit pentru telefon și desktop.

Exemple

Exemplul 1: Servirea celor mai rapide formate cu cădere pe JPEG

Dacă browserul suportă AVIF îl descarcă pe acela; dacă nu, încearcă WebP, apoi JPEG.

<picture>
  <source srcset="/imagini/banner.avif" type="image/avif">
  <source srcset="/imagini/banner.webp" type="image/webp">
  <img src="/imagini/banner.jpg" alt="Banner promoțional dexblog" width="1200" height="600">
</picture>

Ce afișează browserul

Imaginea optimizată este afișată în cel mai eficient format suportat de browserul curent.

Greșeli frecvente

  • Omiterea tagului final din interiorul tagului ; fără , nu afișează absolut nimic.

Comenzi înrudite

  • <img>: Inserează o imagine în pagină; element vid cu atribute obligatorii src (calea) și alt (textul alternativ).
  • <figure> și <figcaption>: Grupează o imagine, o diagramă sau un bloc de cod împreună cu legenda sa explicativă (figcaption).