Simple Responsive Images : La bonne taille pour la bonne résolution
Simple Responsive Images est un plugin WordPress permettant de définir les bonnes tailles d’image en fonction des points de rupture d’un thème.
Le responsive design est une pratique de plus en plus utilisée de nos jours. Elle très pratique car elle permet de modifier la mise en page de notre site en fonction de la taille de l’écran de notre visiteur. Ainsi plus besoin d’avoir un site mobile dédié pour nos visiteurs, ni une application spéciale mobile ou tablettes.
Cependant on ne pense pas forcément au contexte d’utilisation de notre site, si la personne vient avec un mobile cela veut dire que sa connexion internet ne doit pas forcément être de type wifi mais plutôt 3G ou pire…EDGE. Pourquoi donc aller faire charger à notre visiteur une image en 1280*1024 pixels alors qu’il n’a que 480px de largeur d’écran ? Il va tout simplement mettre trop de temps pour charger la page et donc peut être abandonner, ce qui vous fait perdre au mieux un visiteur et au pire un client..
Explications en images :
On voit donc bien que ente l’image de gauche et l’image de droite, on gagne 30Ko, ce qui n’est pas rien pour une connexion faible ! La différence serait encore plus flagrante si l’on partait de l’image en 1280…
Ma solution avec Simple Responsives images
WordPress gère nativement des tailles d’image différentes, donc à partir d’une image il peut en générer une infinité (moyennant votre stockage serveur disponible).
En attendant que le w3C trouve une solution, c’est en m’inspirant d’un article (dont je ne trouve plus la source, sorry..) que j’ai créé ce plugin.
Le principe est simple, il utilise deux choses:
- Les attributs dans les images
- Le script DoubleTake modifié pour mon cas d’utilisation
On définit des “Breakpoints” de taille de navigateur et des tailles d’images associées :
Puis lors de l’insertion d’un média dans le contenu de votre article, le plugin va ajouter des attributs spéciaux dans l’image. Ces attributs seront alors exploités pas le script pour changer de façon dynamique les tailles des images en commençant bien sûr par la taille la plus petite. Il faut bien spécifier le contexte, pour que images concernées ne soient que celles voulues, comme le la classe ou l’id de l’élément html qui comporte les images de votre contenu.
Cependant, il réside plusieurs limitatons dans cette méthode:
- Les images précédemment insérées ne sont pas concernées
- Si une taille d’image change, son url aussi, dès lors le plugin sera bloqué
- Si vous ajoutez un breakpoint après l’ajout des images dans le contenu, le plugin sera bloqué
Ces éléments sont assez contraignants mais je réfléchis à une solution plus flexible comme l’utilisation d’un shortcode ( assez bancale, mais le plus pratique ).
Il faudrait aussi avoir la possibilité de repasser sur tous les articles précédemment créés et ajouter ces attributs, ce qui est lourd et assez incertain.
Cependant, si vous êtes sur le point de mettre en place votre site, il sera alors bon de prévoir cette solution s’il est responsive !
En conclusion
Ce plugin en est à ses prémices, des fonctionnalités sont encore à développer.
Toutes les remarques et aides sont les bienvenues.
Vous pouvez venir contribuer sur le github du projet:
https://github.com/Rahe/Simple-responsive-images
15 Commentaires
Très intéressant. Je suis un nouvel utilisateur. Je souhaite connaitre votre produit le mieux possible
Oui le responsive est intéressant et ce projet semble promis à un bel avenir, bonne chance et bon courage !
très bon plugin, je vais l’utiliser pour le thème responsive que je suis en-train de concevoir.
PS : quel est ce plugin qui permet de mettre en forme les commentaires ?
Je l’avais trouvé assez intéressant pour le tester mais je me suis retrouvé avec un code étrange en insérant des images dans mon billet. Ça m’a refroidi du coup…
Bonjour,
Je suis preneur de tout problème technique rencontré, si tu pouvais me donner l’erreur que tu as eu ça m’intéresse.
Le mieux serait d’aller mettre ça en issue sur le github mentionné ci-dessus :)
Nicolas
Excellent ! Je surveille de près ce petit script :) Merci beaucoup
C’est déjà le cas, peut être que ton add_image_size se fait après mes filtres ;)
Salut Nicolas, est-ce qu’il serait possible de prévoir une version qui permet de sélectionner les formats d’image que l’on ajoute avec add_image_size ?
En effet, il y avait un code parasite. Le plugin fonctionne très bien.
Merci pour l’info ;)
Et rétina? C’est un peu la même problématique, non?
@DMSR : Je pense que c’est la même problématique, mais qu’il faut la prendre à l’envers.
La dernière et il semble meilleure technique pour afficher la bonne image semble être le picturefill, basé sur un nouvel élément de la spécification html5. http://cyril-wolfangel.com/integrateur-typo3/2012/08/05/image-responsive-enfin-une-solution-perenne/
@cyril : Ils ont finalement trouvé une solution ? C’est super mais ça va complexifier le travail de tout le monde, je vais voir si je peux adapter mon script en fonction de tout ça :)
J’étais persuader qu’ a partir du moment où l’on possède un thème responsive, qu’il n’y avait rien a faire au niveau des images du fait qu’il héritait du thème responsive.
Salut a tous, j’ai aussi eu cette idée mais pas pour wordpress, plutot sur un site php maison…
Pour ma part, j’ai 3 images et j’utilise un fichier js qui vérifie d’abbord la taille de la fenetre et envoie le bon dossier pour trouver l’image, j’ai aussi fait des tests avec le css et ca fonctionne bien…
Le soucis, pour les images c’est pas tres grave mais pour le css c’est plus chiant est que ce script n’est actif qu’une fois jQuery completement chargé..