ResponsImg è un plugin di jQuery che modifica l’elemento img in modo che l’immagine fornita al browser sia adatta alla dimensione e alla risoluzione del dispositivo. Con jQuery ResponsImg è semplice rendere le immagini responsive ed è rilasciato con licenza MIT.

Rendere le immagini responsive con ResponsImg

Rendere le immagini responsive con ResponsImg

Immagini responsive

Inserire una copia di ResponsImg (scarica) dopo jQuery, come mostrato nell’esempio, e poi inserire in un altro elemento script per attivare il plugin.

<script src="js/jquery-1.11.1.min.js"></script> 
<script src="js/jquery.responsImg.min.js"></script>
<script>
  $('img.responsive').responsImg();
</script>

L’unica istruzione necessaria è quella che seleziona le immagini da modificare, quelle con classe responsive, e attivare il plugin con il metodo responsImg().

Ora modificare gli elementi img in modo che si riferiscano alle immagini per le diverse risoluzioni.

Nell’esempio, l’elemento img contiene i riferimenti a quattro diverse immagini. La prima è quella contenuta nell’attributo src, utilizzato come immagine predefinita e come fallback. Le immagini più grandi sono indicate all’interno degli attributi data- e sono per le risoluzioni più grandi.

<img src="images/img-300.png" class="responsive" width="100%" alt=""
  data-responsimg480="images/img-480.png, img-480@2x.png"
  data-responsimg768="images/img-768.png"
  data-responsimg1200="images/img-1200.png"
/>

Quando il browser carica la pagina, ResponsImg sostituisce l’immagine presente nell’attributo src con quella presente negli attributi data- più adatta in base alla grandezza della finestra. In pratica, gli attributi data- funzionano come i breakpoint delle media queries.

Nell’attributo data- si può specificare anche l’immagine per gli schermi ad alta risoluzione (es. Retina), nell’esempio l’immagine img-480@2x.png.

Controllare ResponsImg

ResponsImg dispone di numerose opzioni che consentono di controllare l’aspetto del plugin. ResponsImg utilizza un’immagine grande, se disponibile, quando la finestra viene ridotta, invece di scaricare la versione prevista dall’attributo data-. Per evitare che ciò accada e costringere il plugin a scaricare l’immagine prevista dall’attributo data usare il valore true nella proprietà allowDownsize.

$('.responsimg').responsImg({
 allowDownsize: true,
 delay: 150
});

L’opzione delay imposta il ritardo nella sostituzione dell’immagine espresso in millisecondi. Per altre informazioni sulle opzioni del plugin consultare il sito ufficiale.