Afficher des images correctement dimensionnées sur votre site WordPress ou Joomla

Prenez n'importe quelle image de votre blog WordPress ou Joomla. Si vous évaluez sa qualité, il y a de fortes chances qu'elle soit si grande qu'il faille la redimensionner pour l'afficher correctement sur les ordinateurs de vos lecteurs, sans parler des appareils mobiles. La qualité, c'est bien beau, mais ce genre de situation a un coût non négligeable.

Pour afficher une image compatible avec un maximum d'écrans, il faut utiliser une image de grande taille. Cela se traduit par des fichiers volumineux qui doivent être téléchargés intégralement, même sur les petits appareils. Il existe une solution : proposer des images redimensionnées en fonction de l'appareil utilisé, qu'il s'agisse d'un ordinateur, d'une tablette ou d'un mobile.

Afficher des images redimensionnées sur WordPress et Joomla avec CSS

Quelle place occupent les images sur les pages web ? Il n’existe pas de règle absolue, mais compte tenu de leur importance et de leur omniprésence, la réponse est sans aucun doute : beaucoup. Si vous utilisez des images que vous allez de toute façon redimensionner, il est plus judicieux d’optimiser l’espace et de proposer à vos utilisateurs WordPress ou Joomla des images déjà redimensionnées afin d’accélérer le chargement de votre site web.

Le CSS est là pour vous aider avec un ensemble d'attributs relativement méconnus, mais pourtant indispensables : ` srcset` , `sizes` et `media` . Ces attributs, tous pris en charge par la plupart des navigateurs web modernes, vous permettent de spécifier les versions d'image à afficher en fonction de la taille de la fenêtre d'affichage.

L' `srcset` complète l' `src` `sizes` utilisé conjointement, permet de définir quand afficher les images en fonction de la largeur de la fenêtre d'affichage.

Vous trouverez plus d'informations sur ces attributs ici , mais la bonne nouvelle est que depuis quelques années, WordPress redimensionne automatiquement vos images et propose des tailles adaptées à vos lecteurs. Le résultat est impressionnant : une image portrait de 511 Ko est réduite à 42 Ko sur les appareils mobiles.

Redimensionnement et optimisation automatiques avec ImageRecycle

En matière de taille d'image, plus elle est petite, mieux c'est, à condition que la qualité ne soit pas altérée. Bien que WordPress vous aide grâce à l'attribut `srcset` , vous pouvez faire davantage pour réduire la taille des images, notamment en les redimensionnant et en les compressant.

ImageRecycle est une extension qui permet de redimensionner et de compresser simultanément vos images. Elle est disponible pour WordPress et Joomla. Mieux encore, ImageRecycle permet de redimensionner et de compresser vos images automatiquement.

Le redimensionnement est particulièrement utile si vous utilisez des images libres de droits sur votre blog WordPress ou Joomla. Ces images sont souvent disproportionnées afin de couvrir tous les usages, y compris l'impression. Sur le web, il est très peu probable que vous ayez besoin de leur résolution maximale. Avec ImageRecycle, vous pouvez redimensionner automatiquement les images volumineuses à une hauteur ou une largeur maximale lors de leur importation.

Le redimensionnement s'accompagne de la compression, qui optimise la taille des images sans en altérer la qualité. Grâce à la compression avec perte, vous pouvez réduire l'espace occupé par une image jusqu'à 80 %. Ceci s'applique non seulement aux images originales, mais aussi à celles redimensionnées par WordPress. ImageRecycle peut, là encore, effectuer cette opération automatiquement.

Quelques kilo-octets supplémentaires peuvent représenter un temps précieux perdu pour vos lecteurs. Heureusement, il n'est pas nécessaire de sacrifier la qualité pour accélérer le chargement. Grâce à une utilisation plus judicieuse du CSS et aux fonctionnalités de redimensionnement et d'optimisation d' ImageRecycle, vous pouvez proposer des images de haute qualité qui s'adaptent à tous les appareils.