INTÉGRER LA PROBLÉMATIQUE
DU RESPONSIVE IMAGE DANS
WORDPRESS
ALEXANDRE
SADOWSKI
25 ans
Dé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 ...
PLUSIEURS CAS D’USAGE
• Viewport Switching : adapter la taille de l’image à celle du viewport, par exemple en
envoyant une...
QUELLES SOLUTIONS ?
QUELLES SOLUTIONS ?
• Depuis quelques années, de nombreuses solutions émergent mais toutes ont leurs
défauts et imperfecti...
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 so...
ALTERNATIVE
• WP-Thumb : génération des images à la volé
• Mu-plugin custom : empêcher WordPress de générer toutes les
tai...
ALTERNATIVE
MA SOLUTION
• Un plugin :Advanced Responsive Images
(https://github.com/asadowski10/advanced-responsive-images)
• Pour les...
ARCHITECTURE DU PLUGIN
CONFIGURATIONS JSON
• Images Sizes : ensemble des tailles d’images
• Images Locations : ensembles de mes zones dans
mon te...
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 W...
MERCI.
Intégrer la problématique du responsive image dans WordPress
Intégrer la problématique du responsive image dans WordPress
Prochain SlideShare
Chargement dans…5
×

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

1 536 vues

Publié le

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.

Publié dans : Internet
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 536
Sur SlideShare
0
Issues des intégrations
0
Intégrations
153
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. INTÉGRER LA PROBLÉMATIQUE DU RESPONSIVE IMAGE DANS WORDPRESS
  2. 2. ALEXANDRE SADOWSKI 25 ans Développeur WordPress depuis 2 ans chez BeAPI Fan de Rugby (RCT) @alex_sadowski
  3. 3. CONTEXTE
  4. 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. 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. 6. QUELLES SOLUTIONS ?
  7. 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. 8. COTÉ CODE
  9. 9. COTÉ FRONT
  10. 10. COMMENT FAIRE ?
  11. 11. COTÉ CODE
  12. 12. QUELQUES SOLUTIONS • Simple Responsive Images • Hammy • et bien d’autres…
  13. 13. CE QUI PEUT SE FAIRE Source : http://kune.fr/tutoriels/images-responsives-theme-wordpress/
  14. 14. AVANTAGES / INCONVÉNIENTS • Multitudes de tailles d’images • Crop • Espace physique suffisant • Pas toutes les images ne sont utilisées
  15. 15. 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
  16. 16. ALTERNATIVE
  17. 17. MA SOLUTION • Un plugin :Advanced Responsive Images (https://github.com/asadowski10/advanced-responsive-images) • Pour les développeurs • WordPress compliant
  18. 18. ARCHITECTURE DU PLUGIN
  19. 19. CONFIGURATIONS JSON • Images Sizes : ensemble des tailles d’images • Images Locations : ensembles de mes zones dans mon template HTML
  20. 20. IMAGE.PHP
  21. 21. IMAGE.PHP
  22. 22. COTÉ FRONT
  23. 23. EVOLUTIONS ? • Parsing du contenu • Détection de la bande passante ( donc réduction de qualité ) • Suivre l’actualité du W3C…
  24. 24. MERCI.

×