Test de Picture Fill pour des images responsives

Le Responsive Web Design intègre la notion de flexibilité des images mais pas l’optimisation de leurs taille et poids selon le support. Pourtant, il devient de plus en plus nécessaire d’anticiper le fait qu’une image puisse être chargée depuis un smartphone de 320×480 pixels mais aussi depuis un MacBook Pro Retina de 2880×1800 pixels. Même le 72dpi standard ne suffit plus ! Alors, la problématique qui se pose est de trouver comment améliorer les performances lors du chargement des images d’un site Internet selon le support ?

Plusieurs possibilités peuvent être envisagées :

Le script d’adaptive-images.com

Une solution efficace qui propose un redimensionnement des images à la volée. Le script s’éxécute coté serveur (PHP) et stocke les images créées dans un dossier. Il est très simple à mettre en place. Pour en savoir plus, consultez le site d’Adaptive Images.

La balise <picture>

L’élément est en cours de discussion pour être intégrer aux prochaines spécifications HTML5. Dans le même principe que l’élément <video> pour la gestion des différents types de vidéos, cette balise permettrait de gérer différentes tailles d’images en précisant les points de rupture de la même manière que les media queries.
<picture>
   <source media="(min-width: 45em)" srcset="01-large.jpg 1x, 01-extralarge.jpg 2x">
   <source media="(min-width: 18em)" srcset="01-medium.jpg 1x, 01-extramedium.jpg 2x">
   <img src="small-1.jpg">
</picture>

Si vous souhaitez en savoir plus sur la balise <picture>, ou suivre la réflexion du groupe de travail W3C.

Le script PictureFill

En attendant le probable déploiement de la balise <picture>, PictureFill est un petit code Javascript Polyfill qui permet d’en retranscrire le fonctionnement et la structure.
Voici comment se présente le code dans le HTML :
<div data-picture data-alt="Texte de l'image">
   <div data-src="01-small.jpg"></div>
   <div data-src="01-medium.jpg" data-media="(min-width: 300px)"></div>
   <div data-src="01-large.jpg" data-media="(min-width: 640px)"></div>
   <div data-src="01-extralarge.jpg" data-media="(min-width: 1024px)"></div>

   <!-- Au cas où le navigateur ne supporte pas le javascript -->
   <noscript><img src="images/01-small.jpg" alt=""></noscript>
</div>

Ce code est interprété par le script JS appelé dans le header :
<script type="text/javascript" src="picturefill.js"></script>

Voir la démo réalisée.

Attention cependant, pour un bon fonctionnement, le script nécessite l’utilisation d’un navigateur supportant les media queries. Le problème se pose bien évidemment pour Internet Explorer puisque les versions antérieures à IE9 ne supporte pas le script.

Laisser un commentaire

Votre commentaire sera publié sans modération initiale et modéré par la suite. Merci de rafraîchir la page pour afficher votre commentaire. Votre adresse de messagerie ne sera pas publiée.