Servir des images correctement mises à l'échelle sur votre site WordPress ou Joomla

Prenez n'importe quelle image sur votre blog WordPress ou Joomla. Si vous évaluez la qualité, il y a de fortes chances que l'image soit suffisamment grande pour être réduite à la taille des appareils de bureau de vos lecteurs, et encore moins sur les appareils mobiles. La qualité est bonne et bonne, mais des cas comme celui-ci ont un prix élevé.

Pour accueillir autant d'affichages différents que possible avec une seule image, vous devez en utiliser une grande. À son tour, cela se traduit par de gros fichiers qui doivent être téléchargés dans leur intégralité, même sur de petits appareils. Il existe une solution: diffuser des images à l'échelle en fonction du périphérique d'affichage, qu'il s'agisse d'un ordinateur de bureau, d'une tablette ou d'un mobile.

Servir des images à l'échelle sur WordPress et Joomla avec CSS

Combien d'espace les images occupent-elles dans les pages Web? Il n'y a pas de règles strictes et rapides, mais compte tenu de leur importance et de leur ubiquité, la réponse est certainement beaucoup. Si vous proposez des images que vous finirez par redimensionner de toute façon, il est logique d'être économique et de servir vos utilisateurs WordPress ou Joomla avec des images déjà réduites pour accélérer les temps de chargement de votre site Web.

CSS est là pour vous aider avec un ensemble d'attributs relativement inconnus, mais inestimables : le srcset , tailles et les médias . Ces attributs, qui sont tous pris en charge par la plupart des navigateurs Web modernes, vous permettent de spécifier les versions d'image à diffuser en fonction de la taille de la fenêtre d'affichage.

Le srcset complète l' onglet src habituel . Comme le nom de l'attribut l'indique, au lieu de spécifier une seule image, vous l'utilisez pour spécifier une liste d'images mises à l'échelle et la largeur lorsque chacune doit être utilisée. L' attribut des tailles est utilisé en conjonction avec lui, avec lequel vous pouvez définir quand afficher les images en fonction de la largeur de la fenêtre.

Vous pouvez en savoir plus sur ces attributs ici , mais la bonne nouvelle est que depuis quelques années, WordPress redimensionne automatiquement vos images et propose les tailles appropriées à votre lectorat. Le résultat est stupéfiant: une image portrait de 511 Ko est réduite à 42 Ko sur les appareils mobiles.

Redimensionnement et optimisation automatiques avec ImageRecycle

En ce qui concerne les tailles d'image, la plus petite est la meilleure, tant que la qualité n'est pas compromise. Bien que WordPress vous aide à utiliser srcset , vous pouvez faire plus pour minimiser la taille des images, notamment en redimensionnant et en compressant les images.

ImageRecycle est un plugin qui peut simultanément redimensionner et compresser les images pour vous, et est disponible sur WordPress et Joomla. Mieux encore, vous pouvez utiliser ImageRecycle pour redimensionner et compresser automatiquement les images.

Le redimensionnement est particulièrement utile si vous vous retrouvez à utiliser des images de stock dans votre blog WordPress ou Joomla. Ces images sont souvent d'une taille disproportionnée pour tenir compte de toutes les utilisations, y compris les supports imprimés. Sur le Web, il est très peu probable que vous ayez jamais besoin d'utiliser l'intégralité de leur résolution. Avec ImageRecycle , vous pouvez automatiquement redimensionner les grandes images à une hauteur ou une largeur maximale lors du téléchargement.

Le redimensionnement est complété par la compression, qui optimise la taille de l'image sans sacrifier la qualité. Avec la compression avec perte, vous pouvez réduire l'espace image jusqu'à 80%. Cela s'applique non seulement aux images originales, mais également aux images redimensionnées par WordPress. Une fois de plus, ImageRecycle peut le faire automatiquement pour vous.

Ce que vous voyez comme quelques kilo-octets supplémentaires peut signifier un temps précieux pour votre lectorat. La bonne nouvelle est que vous n'avez pas à sacrifier la qualité pour les temps de chargement. Grâce à une utilisation plus intelligente du CSS et ImageRecycle redimensionnement et à l'optimisation d' ImageRecycle , vous pouvez obtenir des images de haute qualité qui s'adaptent aux appareils de vos lecteurs.