Come rendere un’immagine Responsive ovvero usare il tag Picture HTML 5

Il problema

Quando usiamo un template/tema/css responsive il problema delle immagini si propone sempre. Le immagini infatti, a seconda delle risoluzioni con cui viene vista una determinata pagina del sito, si “modellano” per seguire i contenuti ma non sempre il risultato è stato ottimo, soprattutto se abbiamo a che fare con schermi retina.

Adattare-le-immagini-ai-display-retina

La soluzione adattata comunemente è quella di realizzare foto in formato doppio e poi, nel tag <img> usare lo style width=”50%” height=”50%” per dar loro una risoluzione migliore.

Questo però costringe ad avere immagini più pesanti e che quindi rallentano il caricamento della pagina ed abbassano la qualità della pagina per Big G .

La soluzione

La soluzione a tutto questo ce la fornisce direttamente HTML 5 che, grazie al tag <picture> , permette di caricare immagini diverse ( e quindi ottimizzate ) a seconda della risoluzione.

Ecco un esempio di questo tag:

 

<picture>
<source srcset=”small.jpg”>
<source media=”(min-width: 480px)” srcset=”medium.jpg”>
<source media=”(min-width: 1024px)” srcset=”large.jpg”>
<img src=”fallback.jpg”>
</picture>

Oppure

<picture>
<source srcset=”smaller_landscape.jpg” media=”(max-width: 40em) and (orientation: landscape)”>
<source srcset=”smaller_portrait.jpg” media=”(max-width: 40em) and (orientation: portrait)”>
<source srcset=”default_landscape.jpg” media=”(min-width: 40em) and (orientation: landscape)”>
<source srcset=”default_portrait.jpg” media=”(min-width: 40em) and (orientation: portrait)”>
<img srcset=”default_landscape.jpg” alt=”My default image”>
</picture>

Quindi picture viene utilizzato per visualizzare la stessa immagine che può provenire da origini diverse. Sarà il browser infatti a scegliere dall’elemento source (dai suoi attributi media, type e srcset) quale immagine utilizzare in base alla risoluzione/orientamento.

Browser supportati

Attualmente i browser supportati sono Chrome (ovviamente! 😉 ) Firefox, Opera. Explorer è supportato nella versione 11 ed in Edge.

 

0 comments on “Come rendere un’immagine Responsive ovvero usare il tag Picture HTML 5Add yours →

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *