Nell’HTML 5.1 c’è una varietà di elementi nuovi: la maggior parte di questi è già supportata da tutti i correnti browser. Al centro della novità c’è un’altra volta l’adattamento dei contenuti multimediali nel web design responsivo. Finora era problematica la rappresentazione di più immagini con una risoluzione variabile. A questo scopo, il contenitore <picture> avrebbe dovuto diventare standard già nell’HTML5, ma per motivi di tempo la standardizzazione non è stata portata a termine. Tuttavia gli sviluppatori web fanno uso dell’elemento comunque, malgrado non sia stato inserito nello standard ufficiale dell’HTML5 e nel frattempo tutti i browser in uso riescono a interpretare l’elemento <picture>: del resto, la standardizzazione tramite il nuovo HTML lo ha reso ufficiale.
Per quanto riguarda l’elemento <picture>, si tratta di un contenitore: tramite diversi elementi sorgente è possibile inserire file immagine. Tramite ciò vengono caricate solamente le immagini sorgente adatte alla dimensione dello schermo e della risoluzione: questa soluzione fa risparmiare tempo di trasmissione e va a vantaggio dell’allestimento Mobile di un sito web. Proteggendo la banda larga, per i display con un’elevata risoluzione possono essere messi a disposizione dei contenuti alternativi. Eppure per fare ciò è necessario l’attributo <srcset>, anch’esso introdotto con l’HTML 5.1: questo infatti mette le immagini e le differenti dimensioni in relazione tra loro. Il sito web W3Schools.com mostra nel seguente esempio come l’inserimento può apparire alla fine:
<picture>
<source media="(min-width: 650px)" srcset="https://www.ionos.it/digitalguideimg_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="https://www.ionos.it/digitalguideimg_white_flower.jpg">
<img src="https://www.ionos.it/digitalguideimg_orange_flowers.jpg" alt="Flowers" style="width:auto">
</picture>
L’elemento <picture> e <srcset> vanno in un certo senso di pari passo. Anche se le versioni dei browser più recenti in uso al momento supportano già entrambi gli attributi, per quanto riguarda i browser più vecchi esiste l’elemento “fallback”, il quale assicura che la grafica venga visualizzata sempre correttamente. Infine, all’interno degli elementi sorgente vengono definite le richieste alle caratteristiche degli schermi come larghezza e densità di pixel.