Images responsives dans WordPress en 2020: ce que vous devez savoir

WordPress est un système de gestion de contenu populaire qui vous permet de concevoir des sites sans utiliser de code ou avec une utilisation minimale du code. Vous pouvez le faire en installant des thèmes fournis avec des conceptions prêtes à l’emploi et en téléchargeant des plugins qui ajoutent des fonctionnalités à votre site.

La plupart des thèmes WordPress sont livrés avec une conception réactive intégrée, qui adapte votre site à la taille de l’écran et aux spécifications de l’appareil de vos utilisateurs. Cependant, parfois, les thèmes deviennent bogués, les images ne s’affichent pas correctement et vous devez ensuite résoudre les problèmes de réactivité par défaut.

De plus, si vous modifiez le thème par défaut, vous pouvez rencontrer des problèmes avec les images réactives. Comprendre le fonctionnement des images réactives dans WordPress peut vous aider à comprendre la source du problème et à appliquer le correctif approprié.

Que sont les images responsives?

Les images responsives sont des images qui sont servies à un utilisateur en fonction de leur taille d’écran et des spécifications de l’appareil. Par exemple, une image haute résolution envoyée à un grand écran HD ou une image basse résolution envoyée à un petit téléphone portable plus ancien. Le but des images responsives est de maximiser l’efficacité de l’utilisation de la bande passante sans compromettre l’expérience utilisateur.

Vous pouvez ajouter des images réactives en téléchargeant plusieurs tailles ou formats d’une image. Ensuite, lorsqu’un utilisateur visite votre site, vous pouvez utiliser une combinaison de HTML, CSS et JavaScript pour diffuser l’image qui correspond aux paramètres d’écran de l’utilisateur.

Souvent, la création des différentes tailles et formats dont vous avez besoin nécessite un peu de travail manuel. Cela est particulièrement vrai si vous souhaitez modifier le recadrage des images pour mieux s’adapter à des tailles d’écran spécifiques. Une fois vos différentes tailles enregistrées, vous devez héberger toutes vos images sur votre serveur Web pour qu’elles soient servies au besoin.

Vous pouvez également utiliser des outils tels que les réseaux de diffusion de contenu (CDN) ou solutions de gestion des actifs numériques (DAM) pour redimensionner et diffuser dynamiquement les images. Cela peut être une option plus simple si vous avez de nombreuses images ou plusieurs sites. L’utilisation de ces méthodes nécessite d’importer la bibliothèque appropriée dans vos scripts de page et d’effectuer un appel API pour l’image requise.

Pourquoi utiliser des images responsives

Il existe de nombreuses raisons pour lesquelles vous devriez utiliser des images responsives sur vos sites pour votre propre bénéfice et celui de vos utilisateurs. En plus des raisons ci-dessous, gardez à l’esprit que Google donne la préférence de recherche aux sites qui ont des images réactives.

• Utilisation efficace de la bande passante: Les images réactives garantissent que seule l’image la plus utile pour un utilisateur est diffusée et téléchargée. Cela élimine le gaspillage de bande passante puisque vous n’envoyez pas de fichiers plus volumineux que ce qu’un utilisateur peut réellement utiliser. Cela rend également votre site plus convivial, en particulier pour les utilisateurs mobiles qui ont souvent des données limitées.
• Temps de chargement plus rapide– moins un client utilisateur doit télécharger de données, plus le temps de chargement de votre page est rapide. Ceci est vital car de nombreux utilisateurs ne veulent pas attendre plus de quelques secondes pour qu’une page se charge et quitteront un site si le chargement prend trop de temps.
• Expérience utilisateur améliorée– lorsque vous ajoutez des images à votre site, vous le faites pour offrir à l’utilisateur une expérience spécifique. Les images réactives garantissent que les utilisateurs peuvent visualiser les images comme vous le souhaitez, sans déformation ni égarement. Cela donne à l’utilisateur une expérience plus agréable et les rend plus susceptibles de rester sur votre site.

Comment fonctionnent les images responsives dans WordPress?

À partir du WordPress (WP) 4.4, l’ajout d’images à votre médiathèque vous configure automatiquement pour des images réactives. Lorsque vous téléchargez une image, WP crée automatiquement cinq copies de votre image dans différentes tailles. Ces tailles comprennent:

• Plein: La taille de téléchargement d’origine
• Grand: Largeur ou hauteur maximale de 1 024 pixels
• Moyen large: Largeur ou hauteur maximale de 768 pixels
• Moyen: Largeur ou hauteur maximale de 300 pixels
• La vignette: Largeur ou hauteur maximale de 150 pixels

Vous pouvez également modifier ces tailles ou ajouter des tailles supplémentaires manuellement.

Pour contrôler la façon dont ces tailles sont utilisées, WP inclut les attributs de balise img srcset et les tailles. Ces attributs fournissent au navigateur des informations sur les tailles disponibles et quand ces tailles doivent être sélectionnées.

Dans l’attribut srcset, vous attribuez une largeur d’image. Le navigateur vérifie ensuite la largeur et sélectionne la plus grande image qui correspond ou moins à la largeur du navigateur. Dans l’attribut taille, vous spécifiez la taille à laquelle l’image doit être mise à l’échelle. Cela vous permet de sélectionner l’image la plus efficace et de vous assurer qu’elle s’affiche proportionnellement à l’écran.

Un exemple de ce à quoi cela ressemble dans votre balise d’image peut être vu ci-dessous:

<img src="https://wpmayor.com/responsive-images-in-wordpress/image/sample.jpeg"
    srcset="https://wpmayor.com/image/sample-tiny.jpeg 150w,
            https://wpmayor.com/image/sample-small.jpeg 300w,
            https://wpmayor.com/image/sample-medium.jpeg 600w,
            https://wpmayor.com/image/sample.jpeg 1000w"
    sizes="(min-width: 75rem) 60rem,
           (min-width: 50rem) 40rem,
           (min-width: 40rem) calc(100vw - 10rem),
           100vw"
    alt="A sample image">

Ce que vous devez savoir sur les images réactives

Lorsque vous travaillez avec des images réactives, vous devez garder à l’esprit certains aspects. Ces considérations peuvent vous aider à vous assurer que vos images s’affichent comme prévu et que vos utilisateurs bénéficient de la meilleure expérience possible.

« Tailles » est facultatif avec un crochet

Lors de la définition de votre attribut de tailles, vous devez comprendre qu’il spécifie l’image requise ainsi que la largeur de rendu des images. Cela signifie que vous devez prendre soin de faire correspondre les largeurs entre les images. Si les largeurs d’image diffèrent entre les srcs, vous pouvez vous retrouver avec une image déformée lors de son rendu. De plus, si vous utilisez srcset sans inclure les tailles, vous devez savoir que les navigateurs clients utiliseront une largeur par défaut de 100vw.

Le rendu de l’image varie selon le navigateur

En règle générale, les navigateurs affichent la taille d’image qui correspond le mieux à la taille de la fenêtre. Cependant, différents navigateurs utilisent des méthodes différentes pour sélectionner une image, de sorte que votre expérience utilisateur peut être incohérente. Par exemple, certains navigateurs donneront la priorité aux versions des images mises en cache, que la taille corresponde ou non.

Cette variabilité et l’absence de contrôle granulaire signifient que vous ne devez pas vous fier à srcset pour les décisions de conception. Vous devriez plutôt envisager, par exemple, de servir différentes images ou images avec des ratios différents pour mieux convenir à des appareils spécifiques. Pour ce faire, vous pouvez utiliser l’élément .

«Srcset» n’est pas une valeur par défaut

Si vous utilisez un thème développé par quelqu’un d’autre, gardez à l’esprit que srcset n’est pas implémenté par défaut. De nombreux thèmes, en particulier les plus anciens, n’incluent pas cet attribut ni les attributs de taille. Si vous souhaitez utiliser ces attributs, vous devez soit personnaliser le thème que vous utilisez, soit trouver un autre thème qui implémente les attributs.

Si vous n’êtes pas sûr que votre thème utilise srcset et que cela ne dit pas dans la documentation du thème, vous pouvez vérifier manuellement. Le moyen le plus simple consiste à afficher une de vos pages avec une image sur votre ordinateur de bureau ou ordinateur portable. En fonction de votre navigateur et de votre système d’exploitation, vous devriez pouvoir cliquer avec le bouton droit sur l’image et choisir Inspecter. Cela vous permet de regarder l’élément et de voir si srcset est implémenté.

Conclusion

Les images réactives sont essentielles pour créer une expérience utilisateur positive. Lorsque les images sont réactives, les utilisateurs peuvent afficher des fichiers sur n’importe quel type d’appareil sans rencontrer de problèmes. Vous pouvez également utiliser des images réactives pour augmenter les temps de chargement et utiliser efficacement la bande passante.

La plupart des thèmes WordPress sont livrés avec un ensemble de configurations d’images réactives, mais vous pouvez souvent apporter des modifications. Avant d’apporter des modifications aux paramètres par défaut, vous devez vous assurer que vous comprenez correctement les conséquences. Pour éviter toute perte de données, veillez à sauvegarder votre site à l’avance et à modifier un thème enfant plutôt que le fichier d’origine.

A propos de Leah Fainchtein Buenavida

Je suis un écrivain technologique avec 15 ans d’expérience, couvrant des domaines allant de la technologie financière et du marketing numérique à la cybersécurité et aux pratiques de codage. LinkedIn: https://www.linkedin.com/in/leahfainchteinbuenavida/