Non sono certo la prima che parla di responsive images, recentemente è un argomento molto quotato. Questo perché le soluzioni proposte per servire la giusta immagine a seconda del device, delle dimensioni delle schermo o della larghezza di banda disponibile sono molteplici.

Ho deciso di dire la mia, perché da poco ho provato il plugin jQuery Picture e l'ho trovato molto semplice e veloce da integrare.

jQuery Picture serve ad inserire nel proprio layout un supporto alle immagini responsive.

Funziona con:

• l'HTML5 <figure> tag;

• il nuovo candidato <picture> tag.

Vi anticipo subito che non mi dilungherò sull'utilizzo del plugin con il tag <picture>: per ora è ancora una proposta e non si tratta di un codice HTML valido. Preferisco parlare di <figure>, che è già parte dello standard.

l'HTML5 <figure> tag

L'elemento <figure> può contenere immagini, foto, esempi di codice, audio, video e diagrammi.

<figure>
   <img src="img_test.jpg" alt="Immagine di test" width="256" height="256" />
</figure>

Questo tag ha due caratteristiche principali:

1. è un'unità di contenuto che può essere spostata all'interno del flusso principale del documento senza nessun effetto sul significato del documento stesso. Quindi se sei indeciso sull'uso del tag <figure> rispetto ad altri tag, accertati che l'elemento sia essenziale e che se fosse spostato in un'altra sezione non intaccherebbe il significato generale della pagina;

2. dà la possibilità di marcare semanticamente la didascalia dell'elemento direttamente nell'HTML, invece di ricorre a classi CSS, tramite il nuovo tag <figcaption>, usato insieme a <figure>.

Adesso che conosciamo un po' meglio il tag <figure> ritorniamo al plugin.

jQuery Picture

Come dicevo, il plugin jQuery Picture è molto chiaro. Segue il breve pezzo di codice che identifica l'immagine nell'HTML:

<figure class="ImmagineResponsive"
  data-media="images/image-small.png"
  data-media440="images/image-medium.png"
  data-media600="images/image-large.png"
    <noscript>
        <img src="images/image-large.png" alt="User" width="256" height="256" />
    </noscript>
</figure>

Per usare il plugin con il tag <figure> è necessario aggiungere alcuni custom data-Attributes al tag (data-media..), uno per ogni dimensione dell'immagine che si intende utilizzare. Questi custom data-Attributes indicano l'URL alle differenti dimensioni dell'immagine. Ognuno specifica anche il break point in cui l'immagine appropriata deve essere usata.

Ecco il codice JavaScript che serve a inizializzare il plugin:

(function($) {
    $(document).ready(function() {
       $(function(){
           $('figure.ImmagineResponsive').picture();
       });
    })
})(jQuery);

Basta chiamare picture sugli elementi <figure> a cui vogliamo applicare il plugin.

Ancora dubbi? In questo video si vede il plugin in azione, con le immagini demo dal sito ufficiale del plugin.

L'immagine in testata è di dan taylor.