plugin jquery responsive image

Quand on travaille sur le responsive design, un des problèmes majeurs est de pouvoir charger des images selon la résolution de l'écran et de préférence selon le réseau que l'on utilise.

Si l'on est dans une résolution de 320 * 480 pixel, il est inutile d'afficher des images de 640px de largeur par exemple, certes cela s'affichera mais le poids de l'image est plus lourd et souvent les devices de 320 * 480 pixel sont des téléphones avec une connection (hors wifi) en 3G, ou 3G+ (ou encore 4G mais le debit aidant cela pose moins de souci). Donc l'image mettra du temps à s'afficher.

Une solution serait d'utiliser l'api HTML5 d'information du réseau afin de détecter le débit d'une connexion mais celle ci n'est implémentée dans aucun navigateur.

Je me suis donc confronté à plusieurs choix :

  • soit créer un plugin qui détecte la bande passante d'une connexion et qui affiche sur le onload les images avec un poids en accord avec la connexion utilisée
  • soit créer un plugin qui affiche sur le onload les images avec une résolution en accord avec la résolution du device permettant ainsi de charger des images moins lourdes
  • soit créer un plugin qui donne le choix de gérer les 2

J'ai donc décider de faire un plugin qui donne le choix de gérer les 2

jResponsiveImageLoader

Ce plugin permet donc d'afficher les images sur le load de la page (ou un autre évènement sur l'objet window  si vous le souhaitez), de détecter soit la résolution soit la bande passante de la connexion et d'afficher l'image choisie.

Comment utiliser jResponsiveImageLoader

voici comment utiliser le plugin : 

<script type="text/javascript">
$(function(){
    $('.lazy').jResponsiveImageLoader({
        event : 'load'
    });
});
</script>

toutes les images ayant une classe 'lazy' doivent avoir la structure HTML suivante :

 <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
    data-original="logo.png"
    data-w320="logo-w320.png"
    data-w480="logo-w480.png"
    data-w800="logo-w800.png"
    data-b128="logo-b128.png"
    data-b512="logo-b512.png"
    data-b1024="logo-b1024.png"
    data-b4096="logo-b4096.png"
alt="..."/>

  • data-original : correspond à l'image original à charger si l'image pour la résolution ou la bande passante n'est pas trouvée.
  • data-w320 : correspond a l'url de l'image à charger pour un résolution <= à 320px et ainsi de suite
  • data-b128 : correspond à l'url de la page à charger pour une bande passante située entre 128 et 512 ko/s et ainsi de suite

Selon les paramètres utilisés dans le plugin, vous pouvez donc soit utilisé la detection par bande passante soit la détection par résolution d'écran

Utiliser la détection par la bande passante 

<script type="text/javascript">
$(function(){
    $('.lazy').jResponsiveImageLoader({
        event : 'load',
        detection : 'bandwidth',
        file : {
            src : 'http://monsite/mon_fichier_a_telecharger',   // le chemin vers un fichier image à télécharger pour calculer la bande passante (entre 50 et 100ko)
            weight : 91        // le poids du fichier image à télécharger en Ko
        },
        map : [128, 512, 1024, 4096]       // un tableau répertoriant les intervals de bande passante à tester et présent dans le code html sous la forme data-b*=""
    });
});
</script>

 <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
    data-original="logo.png" 
    data-b128="logo-b128.png" 
    data-b512="logo-b512.png" 
    data-b1024="logo-b1024.png" 
    data-b4096="logo-b4096.png" 
alt="..."/>

  • event : évènement lançant le chargement des images - par défaut load
  • detection : type de detection choisie 'bandwidth' ou 'resolution' - par défaut resolution
  • file : objet indiquant le fichier image à tester (src) ainsi que son poids (weight)
  • map : tableau des différents débits de connexion en Ko à utiliser. Ceux ci sont en rapport avec les attributs data-b* utilisés sur l'élément <img/> - par defaut [128, 512, 1024, 4096, 10240, 20480]

Utiliser la détection par la résolution 

<script type="text/javascript">
$(function(){
    $('.lazy').jResponsiveImageLoader({
        event : 'load',
        detection : 'resolution',
        map : [320, 480, 800, 1024]       // un tableau répertoriant les différentes résolutions à tester et présent dans le code html sous la forme data-w*="" 
    });
});
</script>

 <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
    data-original="logo.png" 
    data-w320="logo-w320.png" 
    data-w480="logo-w480.png" 
    data-w800="logo-w800.png" 
alt="..."/>

  • event : évènement lançant le chargement des images - par défaut load
  • map : tableau des différents résolution en pixel à utiliser. Ceux ci sont en rapport avec les attributs data-w* utilisé sur l'élément <img/> - par defaut [320, 480, 800]

Le cas du resize 

Il est à noter que dans le cas d'un resize de la fenêtre, les images sont rechargées. vous pouvez choisir de ne pas autoriser ce comportement en ajoutant le paramètre "resize" à false dans le code javascript (ce paramètre est valable pour la détection par résolution et pour la détection par bande passante : 

<script type="text/javascript">
$(function(){
    $('.lazy').jResponsiveImageLoader({
        event : 'load',
        detection : 'resolution',
        map : [320, 480, 800, 1024],
        resize : false
    });
});
</script>

le resize peut s'avérer utile lors du changement d'orientation du device utilisé (mode portrait ou paysage)

Pré-requis

jQuery > 1.7.2

compatible IE7+, Chrome, Firefox, Safari, Opera

Téléchargement et démo

Télécharger le plugin : jResponsiveImageLoader (1.65ko minifié)

voici une page de démo : démo

Si vous avez la moindre question sur jResponsiveImageLoader, n'hésitez pas à laisser un commentaire !

image jerome debray

Jerome Debray est responsable de projet et lead developper web pour Ouestfrance Multimedia dans la business unit Auto.

retourner en haut de la page