Nous savons tous que le « responsive design » (design adaptatif), est important, car il permet d’afficher les sites sur tous les appareils disponibles, à condition que le thèmes et les images soient adaptatifs… La plupart d’entre nous savent qu’il ne s’agit pas simplement de l’affichage sur lesdits dispositifs, mais qu’il faut aussi prendre en compte la bande passante; et pour ce faire, des mesures d’optimisations doivent être prises.
Avoir un thème adaptatif est une chose, mais il faut également que vos images s’adaptent au dispositifs portables, quelles que soient leurs tailles.
Pour y remédier, vous pouvez générer manuellement toutes les tailles d’image, et ensuite, dans un éditeur HTML, vous pouvez saisir manuellement la balise des image et les attributs srcset de chaque image (ces attributs permettent de résoudre en partie l’intégration des images dans les sites adaptatifs).
Le problème, c’est que non seulement cela va vous prendre du temps, beaucoup de temps, mais cela pourrait aussi être un problème pour tous les administrateurs qui ne sont pas à l’aise avec le code HTML. Alors quelle est la solution pour rendre vos images adaptatives?
Rendre vos images adaptatives en 3 étapes
Pour avoir un site avec des images adaptatives, il faut générer toutes les tailles d’image, à partir d’une seule image, et via un plugin, modifier la balise image et l’attribut srcset partout où l’auteur choisit d’insérer une image.
Etape 1: Modifier le fichier functions.php pour générer plus de tailles d’images
Chaque fois que vous téléchargez une image, WordPress l’enregistre dans sa taille d’origine. Il génère aussi, automatiquement, 3 copies redimensionnées dans des tailles standard (hauteur ou largeur peuvent changer en fonction du rapport de l’image):
- Miniature (150 × 150)
- Moyenne (300 × 300)
- Grande (1024 × 1024)
C’est une caractéristique très puissante, car elle peut être personnalisée afin de générer toute taille d’image, cela signifie que vous n’aurez pas à faire de multiples copies d’une image en différentes tailles. Vous téléchargez une seule image, et WordPress crée les copies redimensionnées.
Pour ce faire, il faut modifier le fichier functions.php de votre thème. Pour ajouter de nouvelles tailles d’image, vous devez ajouter des appels à la fonction add_image_size. Voici un exemple qui ajoute quatre nouvelles tailles d’image:
Attention: Avant de faire une quelconque modification du fichier functions.php, faites en une copie de sauvegarde et stockez la dans un endroit sûr.
add_image_size( 'sml_size', 300 ); add_image_size( 'mid_size', 600 ); add_image_size( 'lrg_size', 1200 ); add_image_size( 'sup_size', 2400 );
Chaque appel à la fonction inclut un nom (afin que WordPress puisse identifier la taille) et une largeur. Les nouvelles dimensions seront de 300, 600, 1200 et 2400 pixels de large. Il est également possible de modifier la hauteur ou de recadrer l’image avec la fonction add_image_size, toutefois l’exemple ci-dessus maintient le ratio largeur x hauteur de l’image originale. (Vous trouverez plus d’informations sur la fonction add_image_size dans le Codex WordPress)
L’exemple ci-dessus ajoute quatre nouvelles tailles d’images, mais vous pouvez en ajouter plus ou moins … en fonction de la conception de votre thème. Maintenant, à chaque fois qu’une image sera téléchargée sur votre site, WordPress va générer les nouvelles tailles d’image, en plus de celles générées par défaut..
La prochaine étape est d’inclure ces tailles dans le code HTML.
Etape 2: Installer le plugin RICG Responsive Images
Afin que WordPress puisse afficher toutes les tailles d’image, un nouveau plugin doit être installé: RICG Responsive. Une fois installé et activé toutes les tailles d’images seront incluses dans la balise d’image via l’attribut srcset.
Généralement quand une image est ajoutée à une page WordPress, le code HTML ressemble à ceci:
<img class="aligncenter wp-image–176 size-full" src="http://mon-domaine.fr/wp-content/uploads/2015/05/img176.jpg" alt="App Screenshot">
Il y a une seule image dans l’attribut src.
Une fois le plugin installé, le code HTML ressemblera à ceci:
<img class="aligncenter wp-image–137 size-full" src="http://mon-domaine.fr/wp-content/uploads/2015/05/onavo.jpg" srcset="http://mon-domaine.fr/wp-content/uploads/2015/05/onavo–169x300.jpg 169w, http://mon-domaine.fr/wp-content/uploads/2015/05/onavo–576x1024.jpg 576w, http://mon-domaine.fr/wp-content/uploads/2015/05/onavo–300x534.jpg 300w, http://mon-domaine.fr/wp-content/uploads/2015/05/onavo–600x1067.jpg 600w, http://mon-domaine.fr/wp-content/uploads/2015/05/onavo.jpg 600w" alt="onavo" width="600" height="1067" sizes="(max-width: 600px) 100vw, 600px">
Toutes les nouvelles tailles d’images ont été ajoutées, via l’ attribut srcset.
Vous avez à présent des images adaptatives!
Maintenant que les images de votre site sont adaptatives, le navigateur va choisir l’image la plus appropriée à télécharger.
Les utilisateurs d’appareils dotés d’écrans plus petits auront de petites images. Votre site web se chargera plus rapidement puisque les images seront téléchargées plus rapidement, et ils auront besoin de moins de bande passante. Les utilisateurs ayant des appareils avec des écrans plus grands, auront eux de plus grandes images. Elles n’apparaîtront pas pixelisées ou de moindre qualité.
Il y a toutefois un problème avec cette méthode: elle ne fonctionne qu’avec les images téléchargées sur WordPress après l’installation du plugin RICG Responsive. Si vous travaillez sur un tout nouveau site, cela ne sera pas un problème, mais si il s’agit d’un site existant avec du existant, les nouvelles tailles d’image ajoutées dans functions.php, n’ auront pas été générées.
Heureusement, il ne vous faudra pas pas ajouter toutes les images, avec les nouvelles tailles, il existe, ici aussi, un plugin qui peut vous aider.
Etape 3: Installer le plugin Regenerate Thumbnails (Facultatif)
Le plugin Regenerate Thumbnails va passer en revue toutes images existantes et régénérer de nouvelles tailles d’image sur la base des tailles ajoutées dans le fichier functions.php, c’est un véritable gain de temps et ne nécessite pas plus que le clic d’un bouton.
Une fois installé, allez dans le Menu -> Outils -> Regen. Thumbnails, puis cliquez sur le bouton « Regenerate All Thumbnails ». Une barre d’état apparaît et vous verrez le nombre d’images redimensionnées.
Voilà, toutes les images existantes dans votre site existent à présent dans toutes les dimensions et s’afficheront correctement en utilisant la balise image via l’attribut srcset.
En tenant compte de tous les dispositifs qui peuvent se connecter à Internet, de la montre connectée à l’ordinateur de bureau avec un très grand écran, en passant par les smartphones et les tablettes, avoir des images adaptatives sur votre site n’est plus un détail, c’est une nécessité pour ne pas perdre de visiteurs.
Avez vous fait en sorte d’avoir des images adaptatives? Comment avez vous procédé pour rendre vos images adaptatives? Indiquez nous, dans les commentaires, votre façon de faire.
Cet article vous a intéressé? N’hésitez pas à le partager afin que d’autres personnes en profitent. Merci!
Publié à l'origine le : 22 juin 2015 @ 12 h 06 min
