Avec l’arrivée du rétina et des multiples résolutions d’écrans, la mise en place du responsive image dans WordPress n’est pas si simple. Aujourd’hui le W3C n’a pas encore acte sur une structure à appliquer sur nos intégrations HTML, cependant il existe des solutions fonctionnant sur l’ensemble des navigateurs du marché au travers de scripts JS.
L’objectif de cet atelier est de vous présenter un plugin WordPress qui implémente les attributs srcset dans les balises images couplé à librairie JavaScript Picturefill. Ce plugin est destiné aux intégrateurs et aux développeurs pour simplifier la mise en place du responsive image dans les thèmes WordPress.
4. CONTEXTE
• Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la
pratique qui vise à adapter les taille, résolution et qualité des images utilisées dans
le contenu éditorial d’une page web en fonction de l’utilisateur.
• Les images adaptatives sont nécessaires pour les sites Responsive qui vont adapter
leur affichage selon le device : sur un site Responsive la même page est rendue de
manière différente selon la taille de l’écran.
• Adapter les images vise avant tout à améliorer l’expérience utilisateur, en délivrant
l’image qui convient le mieux : inutile d’envoyer une image trop grande et trop
lourde si l’utilisateur consulte la page sur un smartphone avec un petit écran et une
mauvaise connexion internet !
5. PLUSIEURS CAS D’USAGE
• Viewport Switching : adapter la taille de l’image à celle du viewport, par exemple en
envoyant une image de largeur 320px sur un smartphone et une image de largeur 800px sur une
tablette
• Device-pixel ratio (DPR) Switching : adapter l’image à la résolution de l’écran, par
exemple en envoyant une image avec 4 fois plus de pixels à ceux qui visualisent la page sur écran Retina
• Network Switching : adapter l’image à la qualité de la connexion, par exemple en envoyant
une image de qualité réduite si l’utilisateur est connecté en Edge dans le métro
• Art Direction : adapter l’image à la taille affichée, par exemple en envoyant une image recadrée
autour du sujet important si elle doit s’afficher sur un petit écran plutôt qu’une version redimensionnée
de l’image sur laquelle le sujet important sera difficilement visible.
7. QUELLES SOLUTIONS ?
• Depuis quelques années, de nombreuses solutions émergent mais toutes ont leurs
défauts et imperfections, et en choisir une s’avère compliqué. Fondamentalement, il
manque encore une API et un markup HTML dédié à cet usage, et chacun essaye
de faire au mieux avec ce qui existe.
• Il se passera encore quelques années avant que tout cela soit normalisé et
disponible et utilisable sur une proportion majoritaire du parc des navigateurs.
• Pourtant, c’est dès maintenant qu’on a besoin de cette technique, pour nos sites
Responsive !!!!!!
16. ALTERNATIVE
• WP-Thumb : génération des images à la volé
• Mu-plugin custom : empêcher WordPress de générer toutes les
tailles d’images sauf celle de WordPress
18. MA SOLUTION
• Un plugin :Advanced Responsive Images
(https://github.com/asadowski10/advanced-responsive-images)
• Pour les développeurs
• WordPress compliant