Upload
alexandre-sadowski
View
580
Download
0
Embed Size (px)
Citation preview
ALEXANDRE SADOWSKI
25 ansDéveloppeur WordPress depuis 2 ans chez BeAPI
Fan de Rugby (RCT)
@alex_sadowski
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 ?
• 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 !!!!!!
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
MA SOLUTION
• Un plugin : Advanced Responsive Images (https://github.com/asadowski10/advanced-responsive-images)
• Pour les développeurs
• WordPress compliant
CONFIGURATIONS JSON
• Images Sizes : ensemble des tailles d’images
• Images Locations : ensembles de mes zones dans mon template HTML
EVOLUTIONS ?
• Parsing du contenu
• Détection de la bande passante ( donc réduction de qualité )
• Suivre l’actualité du W3C…