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>
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.