JS : Servir différentes images pour différentes résolutions

Le 21 décembre 2012 — par

Le Responsive Design est sans conteste la grande mode du développement Web ces derniers temps. Maintenant que tout le monde sait utiliser des media queries il faut maintenant s’occuper rapidement d’un autre problème : Le poids d’une page, par conséquence le poids des images.

Si bien qu’actuellement le W3C est en train de pencher sur l’adoption d’une nouvelle balise HTML, picture, qui pourrait regrouper un ensemble d’images adaptées en fonction de l’appareil ou de la résolution de l’utilisateur. Grâce à cette balise, fini le chargement inutile d’images trop lourdes.

Malheureusement ce Draft est loin d’être un standard adopté par les navigateurs actuels. Mais heureusement il existe un polyfill JavaScript qui vous permettra de vivre dans le futur et vous économisera des solutions bancales comme Adaptive Images.

Ce polyfill est disponible sur GitHub : scottjehl/picturefill.

Son utilisation est semblable au Draft du W3C :

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <div data-src="small.jpg"></div>
    <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
    <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
    <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</div>

Notez la balise noscript pour fournir un fallback aux navigateurs ne supportant pas JavaScript. picturefill gère aussi le Retina et les navigateurs ne supportant pas le CSS3.

S'abonner au flux RSS du blog
Recevoir les nouveaux articles par e-mail :