Intégrer la problématique du responsive image dans WordPress

INTÉGRER LA PROBLÉMATIQUE DU RESPONSIVE IMAGE DANS

WORDPRESS

ALEXANDRE SADOWSKI

25 ansDéveloppeur WordPress depuis 2 ans chez BeAPI

Fan de Rugby (RCT)

@alex_sadowski

CONTEXTE

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 !

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.

QUELLES SOLUTIONS ?

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

COTÉ CODE

COTÉ FRONT

COMMENT FAIRE ?

COTÉ CODE

QUELQUES SOLUTIONS

• Simple Responsive Images

• Hammy

• et bien d’autres…

CE QUI PEUT SE FAIRE

Source : http://kune.fr/tutoriels/images-responsives-theme-wordpress/

AVANTAGES / INCONVÉNIENTS

• Multitudes de tailles d’images

• Crop

• Espace physique suffisant

• Pas toutes les images ne sont utilisées

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

ALTERNATIVE

MA SOLUTION

• Un plugin : Advanced Responsive Images (https://github.com/asadowski10/advanced-responsive-images)

• Pour les développeurs

• WordPress compliant

ARCHITECTURE DU PLUGIN

CONFIGURATIONS JSON

• Images Sizes : ensemble des tailles d’images

• Images Locations : ensembles de mes zones dans mon template HTML

IMAGE.PHP

IMAGE.PHP

COTÉ FRONT

EVOLUTIONS ?

• Parsing du contenu

• Détection de la bande passante ( donc réduction de qualité )

• Suivre l’actualité du W3C…

MERCI.