Il Tag <picture> HTML

Definizione e utilizzo

Il tag <picture> offre ai web developer maggiore flessibilità nella specifica delle risorse delle immagini. L’uso più comune dell’elemento <picture> è per la direzione artistica in design responsivi. Invece di avere un’unica immagine che viene ridimensionata in base alla larghezza della viewport, è possibile progettare più immagini per riempire meglio la viewport del browser. L’elemento <picture> contiene due tag: uno o più tag <source> e un tag <img>.Il browser cercherà il primo tag <source> in cui la media query corrisponde alla larghezza della viewport corrente, e quindi visualizzerà l’immagine corretta (specificata nell’attributo srcset). Il tag <img> è richiesto come ultimo figlio dell’elemento <picture>, come opzione di fallback nel caso in cui nessuno dei tag <source> corrisponda.

<picture>
  <source media="(min-width:650px)" srcset="img_01.jpg" />
  <source media="(min-width:465px)" srcset="img_02.jpg" />
  <img src="img_03.jpg" alt="Fiori" style="width:auto;" />
</picture>