MobileWordpress

Des images vraiment responsives

Par Guillaume Thavaud - Publié le 11 juillet 2015

Une fois n’est pas coutume, voici un petit article technique suite à une découverte que j’ai faite et qui peut intéresser d’autres webmasters WordPress.

De plus en plus de sites web utilisent des images HD en bannière, en slider, en background. Cette tendance au « wide » met en valeur les belles photos et c’est vrai que ça rend bien pour certaines activités (tourisme, photographie, location de vacances, etc…). Les problèmes apparaissent quand ces belles images doivent rentrer sur un smartphone, c’est tout l’enjeu du responsive design.

responsive-design-exemple

La solution la plus simple est de redimensionner les images à la taille de l’écran, comme cela l’internaute ne sera pas gêné. C’est ce que font les thèmes dits responsifs.

Mauvaise idée. Une image HD qui pèse 1Mo pèsera toujours le même poids, qu’elle soit affichée en 300×200 pixels ou en 1500x1000pixels. Le mobinaute se retrouvera avec de jolies images, bien proportionnées, mais qui mettront 3 plombes à se charger. Imaginez le problème sur un Slider composé de 5 à 10 images HD !

Heureusement, il existe une autre solution, celle qui est proposée par HTML5 : l’attribut srcset.

D’habitude, lorsque vous voulez mettre une image sur une page web, vous utilisez ce genre de code :

<img src="mon-image.jpg" width="1200" height="400">

Désormais en HTML, vous pouvez spécifiez au navigateur qu’une image possède plusieurs sources, et qu’il faudra utiliser la mieux appropriée aux dimensions de l’écran :

<img src="mon-image.jpg" srcset="mon-image.jpg 1x, mon-image-320.jpg 320w 1x, mon-image-640.jpg 320w 2x" width="1200" height="400" >

Pour en savoir plus sur le principe, vous pouvez consulter un bon article sur AlsaCréations

images-srcset

Tout cela est bien beau me direz-vous, mais comment je l’applique à WordPress ?

Hé bien, souvenez-vous que WordPress génère automatiquement un lot d’images de différentes tailles (miniature, medium, large) à chaque fois que vous faites un Upload. Ces réglages sont disponibles dans Réglages > Médias et c’est ce qui permet ensuite de placer dans un article une image de taille medium avec dessus un lien vers l’image full-size (si vous ne procédez pas ainsi, gare au temps de chargement de vos pages)

Vous voyez où je veux en venir ? D’un côté on a un attribut srcset qui permet de lister plusieurs sources d’images et de l’autre côté on a un lot de différentes tailles d’image, gentiment fourni par WordPress… Il n’y plus qu’à en tirer profit !

Plusieurs développeurs se sont penché sur la question et il existe notamment le projet PictureFill disponible dans GitHub, fruit du travail de Scott Jehl, Mat Marquis, et Shawn Jansepar (merci à eux). Dans la bibliothèque des plugins WordPress, on trouve plusieurs plugins qui utilisent ce système, comme Srcset Responsive Images for WordPress, Responsive WP, ou RICG Responsive Images.

Ces plugins « magiques » vont faire tout le travail pour vous : à chaque fois qu’ils vous trouver une balise <img> quelque part, ils vont remplacer l’attribut src par un attribut srcset pointant vers les différentes images disponibles dans la bibliothèque média. Du coup vous pourrez insérer sans remords des images HD dans vos pages.

Un dernier point qui a son importance : l’attribut srcset est supporté par Firefox (à partir de la version 38) et Chrome (à partir de la version 39). Ce n’est pas le cas pour Safari et Internet Explorer (qui va bientôt disparaître de toute manière). C’est donc une fonctionnalité qui est en cours de déploiement, mais qui est promise à un bel avenir !