Riloadr, framework pour des images « réactives » avec tous les navigateurs (#RWD)


Riloadr est un loader d’images multi-navigateurs et indépendant de tout framework qui permet de rendre ses images « responsives », en servant une image optimisée (en taille et poids) quel que soit le terminal utilisé.

L’idée est simple: le framework spécifie une image optimisée pour les mobiles en premier (approche mobile-first) et embarque de quoi servir une autre image plus adaptée (par exemple pour les navigateurs sur ordinateur). Riloadr ne s’appuie pas sur le serveur pour réaliser cette adaptation, ce qui évite de surcharger ce dernier.

 
L’utilisation est très simple. On définit ses breakpoints, un peu comme avec les médias queries :

    var group2 = new Riloadr({
        base: 'http://myserver.com/photos/{breakpoint-name}/',
        breakpoints: [
            {name: 'mobile',  maxWidth: 320},
            {name: 'tablet',  minWidth: 321, maxWidth: 768},
            {name: 'desktop', minWidth: 769}
        ]
    });

Ensuite, le script se charge de trouver les bonnes images. Par exemple :

    <!-- 
        In this case the {breakpoint-name} variable is used in the 'base' option.
        The final URL for this image will be one of these:
        - http://myserver.com/photos/mobile/super.jpg
        - http://myserver.com/photos/tablet/super.jpg
        - http://myserver.com/photos/desktop/super.jpg
    -->
    <img class="responsive" data-src="super.jpg">

Mais il est également possible d’avoir des images du type :

<img class="responsive" data-src="wow_{breakpoint-name}.jpg">

Le script prévoit également d’autre scenarii d’utilisation pour s’adapter à toutes les situations.
Pour une intégration avec WordPress, il suffirait de créer des tailles d’images nommées dans le CMS et d’intégrer ces noms dans la conf. Rien d’autre à faire pour utiliser la bonne image.

 
Riloadr propose en plus quelques fonctionnalités intéressante comme le lazy load, la création de groupes d’images avec des réglages différents, des callbacks, un mécanisme de fallback, …

Le tout en moins de 4 ko.

Il existe une version encore plus légère qui s’appuie sur jQuery.

Bref, que du bon.

Téléchargez le script Riloadr