Immagini responsive: la proposta del W3C é il tag <picture>

Lo scorso 28 Agosto il W3C ha pubblicato una proposta (attualmente in stato di draft) per l'introduzione e la standardizzazione di un nuovo tag: <picture>.

Nelle intenzioni del Responsive Images Community Group questo nuovo elemento consentirà  di includere un'immagine il cui source effettivo sarà  determinato dalla rispondenza ad una o più mediaquery.

Sarà  possibile quindi, in un prossimo futuro, definire un'immagine responsive in questo modo

<picture>
      <source media="(min-width: 1024px)" src="high-res.jpg">
      <source media="(min-width: 600px)" src="medium-res.jpg">
      <source src="small-res.jpg">

      <img src="accessible-small-res.jpg" alt="...">
      <p>Testo accessible</p>
</picture>

L'introduzione dell'elemento <picture> ci permetterà  di avere un controllo migliore sul layout delle pagine, dando l'opportunità  di definire un set di immagini (gli elementi <source>) della dimensione più adatta al dispositivo in uso. I browser più datati, non in grado di interpretare correttamente il nuovo tag, vedranno semplicemente l'immagine annidata (a bassa risoluzione, se si sviluppa seguendo l'approccio «mobile first») ed un eventuale contenuto accessibile.

Complessivamente cià renderà  più semplice la gestione del responsive design per le immagini nei dispositivi mobile (gestione attualmente ottenibile mediante alcune librerie JavaScript) consentendo al device di scaricare le sole immagini effettivamente adatte alla propria risoluzione/pixel density, risparmiando di conseguenza sia tempo che consumo di banda.

Attualmente nessun browser supporta ancora questo nuovo elemento ma, nel caso voleste già  provarlo, esiste una libreria per jQuery adatta allo scopo: jQuery Picture.