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.

1. INTÉGRER LA PROBLÉMATIQUE
DU RESPONSIVE IMAGE DANS
WORDPRESS

2. ALEXANDRE
SADOWSKI
25 ans
Développeur WordPress
depuis 2 ans chez BeAPI
Fan de Rugby (RCT)
@alex_sadowski

3. CONTEXTE

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.

6. QUELLES SOLUTIONS ?

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

8. COTÉ CODE

9. COTÉ FRONT

10. COMMENT FAIRE ?

11. COTÉ CODE

13. QUELQUES SOLUTIONS
• Simple Responsive Images
• Hammy
• et bien d’autres…

14. CE QUI PEUT SE FAIRE
Source : http://kune.fr/tutoriels/images-responsives-theme-wordpress/

15. AVANTAGES /
INCONVÉNIENTS
• Multitudes de tailles
d’images
• Crop
• Espace physique
suffisant
• Pas toutes les images
ne sont utilisées

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

17. ALTERNATIVE

18. MA SOLUTION
• Un plugin :Advanced Responsive Images
(https://github.com/asadowski10/advanced-responsive-images)
• Pour les développeurs
• WordPress compliant

19. ARCHITECTURE DU PLUGIN

20. CONFIGURATIONS JSON
• Images Sizes : ensemble des tailles d’images
• Images Locations : ensembles de mes zones dans
mon template HTML

21. IMAGE.PHP

22. IMAGE.PHP

24. COTÉ FRONT

25. EVOLUTIONS ?
• Parsing du contenu
• Détection de la bande passante ( donc réduction
de qualité )
• Suivre l’actualité du W3C…

26. MERCI.