Responsive-Enhance, des images adaptées au terminal automatiquement


Responsive-Enhance.js est un script JS qui permet de charger une image d’une plus grande résolution lorsque la largeur occupée par celle-ci est plus grande qu’une taille définie. Idéal pour rendre ses images « réactives » dans une approche RWD, sans faire ce concession sur la qualité de l’image pour les grands écrans.

Comme pour le script Riloadr, Responsive-Enhance.js s’appuie sur les metadonnées (data-xxx) des balises <img> pour définir l’emplacement de l’image en pleine résolution.

<img id="demo" src="http://dummyimage.com/400x300" alt="Responsive Image" data-fullsrc="http://dummyimage.com/800x600">
<script>responsiveEnhance(document.getElementById('demo'), 400);</script>

J’ai une préférence pour Riloadr car il permet plus de personnalisation et un meilleur contrôle (notamment le lazy load). Mais celui-ci est simple et rapide à mettre en place.

Téléchargez Responsive-Enhance.js