Avez-vous géré votre site Web avec un outil de test de performance uniquement pour vous faire dire que vous devez «servir des images à l’échelle»? En gros, l’outil vous indique que vous devez redimensionner les dimensions de vos images pour les adapter à la manière dont elles sont affichées sur votre site.
Heureusement, WordPress dispose d'excellents outils pour vous aider. Vous pouvez utiliser un plug-in d'optimisation d'image pour diffuser automatiquement des images redimensionnées – ou redimensionner vous-même des images à l'aide de différentes techniques. Cela contribuera grandement à optimiser les temps de chargement de vos pages et à améliorer vos taux de rebond.
Dans cet article, nous expliquerons pourquoi il est si important de servir correctement les images redimensionnées. Nous proposerons ensuite des solutions pratiques pour rendre le processus aussi simple que possible. Allons-y!
C’est pourquoi vous devez servir des images à l’échelle
Une image mise à l'échelle est essentiellement une image qui a été dimensionnée pour correspondre aux dimensions exactes pour lesquelles vous l'utilisez. D’une part, une image trop petite et agrandie sera floue. En revanche, si un navigateur réduit la taille d’une image trop volumineuse, il ajoute inutilement à la taille du fichier de la page.
De plus, les images de grande taille obligent le navigateur à charger du temps et des ressources au lieu de charger la page elle-même le plus rapidement possible. Cela peut ralentir considérablement le temps de chargement de votre page et avoir un impact négatif sur les performances de votre site Web.
Par exemple, si votre thème affiche une image à 100 x 100 px, vous voudrez alors charger une image exactement 100 x 100 px. Si vous chargez une image de 50 x 50 px, elle paraît floue si elle est agrandie à 100 px. Par contre, si vous chargez une image de 200 x 200 px, elle aura fière allure, mais il n’est pas nécessaire d’augmenter la taille de votre page car elle ne s’affiche toujours qu’à 100 px.
Bien sûr, des pages plus lentes peuvent éloigner les visiteurs. Non seulement peuvent-ils promouvoir une politique moins que favorable expérience utilisateur (UX), mais ils peuvent aussi augmenter votre Taux de rebond lorsque les utilisateurs sont frustrés et qu’ils cliquent loin de votre site.
C’est pourquoi presque tous les outil de test de performance souligne la nécessité de servir des images à l'échelle:
Trois plugins pour vous aider à servir des images à l'échelle dans WordPress
La bonne nouvelle est que l’un des moyens les plus simples de servir correctement les images à l’échelle est de: utiliser un plugin pour vous aider. Les options suivantes facilitent la optimisez vos images lourdes et nettoyez vos pages gonflées. Nous allons jeter un coup d'oeil!
1. Optimole
Notre première offre est Optimole. Ce plugin pratique optimise vos images et les diffuse à la taille idéale pour différents appareils. Cela vous permet donc non seulement de servir des images redimensionnées, mais également de les redimensionner automatiquement à la taille optimale en fonction du périphérique de l'utilisateur.
Son processus d’installation est minimal, ce qui est excellent si vous avez besoin d’une qualité maximale avec un minimum de tracas.
En plus de la mise à l'échelle et de la compression de vos images, Optimole les fournit également à partir d'une solution globale. réseau de distribution de contenu (CDN) optimisé par Amazon CloudFront, ce qui accélère vos temps de chargement dans le monde entier.
Avec le forfait gratuit, vous pouvez optimiser et redimensionner des images illimitées pour un maximum de 5 000 visites mensuelles. Après cela, les plans payés commencent à seulement 9 $ par mois.
2 Smush
Smush est un autre plugin que vous pouvez utiliser pour servir des images correctement dimensionnées. Il s'agit d'un choix populaire très apprécié qui optimise vos images en les numérisant, en supprimant les données inutiles, puis en définissant une taille idéale. Une fois terminée, chaque image est enregistrée dans votre Médiathèque.
Pour redimensionner vos images, vous pouvez le redimensionner automatiquement au-dessus de certaines dimensions afin de répondre aux besoins de votre site.
De plus, le plug-in a la capacité de "brouiller" jusqu’à 50 images à la fois et vous pouvez le configurer pour optimiser automatiquement chacune d’elles au fur et à mesure de leur chargement. De plus, vous pouvez le configurer pour compresser les images dans n’importe quel répertoire, y compris ceux stockés sur des services cloud.
Pour cette raison, la version gratuite est un excellent point de départ pour optimiser les images en illimité, même si la taille des images individuelles ne peut excéder 5 Mo.
3 ShortPixel
Notre recommandation finale est ShortPixel. Ce plugin est le choix idéal pour ceux qui recherchent une solution de compression et de mise à l’échelle d’image de qualité sur un budget. Il peut optimiser jusqu'à 100 images par mois gratuitement. De plus, il est simple et facile à utiliser.
Plus précisément, ShortPixel peut vous aider à redimensionner automatiquement les images WordPress lors de leur téléchargement aux dimensions que vous spécifiez.
ShortPixel est également livré avec une compression d’image sans perte et avec perte pour JPEG, PNG, et GIF images– Vous pouvez également optimiser les PDF. Il vous offre la possibilité de convertir automatiquement les images (y compris WebP) lorsque vous les téléchargez ou que vous les manipulez manuellement.
Comme mentionné ci-dessus, la version gratuite vous permet d'optimiser jusqu'à 100 images par mois. De plus, les forfaits payants commencent à 4,99 $ par mois pour optimiser jusqu'à 5 000 images par mois.
Comment servir des images à l'échelle dans WordPress sans utiliser de plugin (3 méthodes)
Si vous préférez diffuser des images à l’échelle sans plug-in, vous pouvez procéder de différentes manières. Par exemple, vous pouvez rogner des images dans votre bibliothèque multimédia, les ajuster dans vos paramètres multimédia d’administrateur ou utiliser un éditeur d’image tel que le GIMP open-source ou Photoshop.
Cependant, avant de discuter de la manière de servir des images à l'échelle sans utiliser de plug-in, il convient de mentionner une fonctionnalité native fournie avec WordPress. appelé srcset. Cette fonctionnalité de base rend vos images sensibles aux différentes tailles d’écran. Cela fonctionne en offrant au navigateur trois options différentes, qui utiliseront ensuite celle qui est la plus optimisée pour cet utilisateur. Bien sûr, cela aide quelque peu avec les temps de chargement de la page, mais le redimensionnement des images vous donnera encore plus de performance.
En parlant de cela, jetons un coup d’œil à notre première méthode: le recadrage d’images dans WordPress.
1. Recadrer des images dans votre médiathèque
Votre première escale pour réaliser cette méthode consiste à vous diriger vers votre back-end WordPress. Dans l’un de vos articles ou pages, commencez par cliquer sur l’image que vous souhaitez mettre à l’échelle et en sélectionnant Éditer l'image:
À partir de là, vous devrez vous rendre au Médiathèque écran, choisissez votre image et cliquez sur le bouton Éditer l'image lien. Sur l'écran suivant, vous avez la possibilité de redimensionner votre image:
Les dimensions d'origine de l'image vous seront présentées, ainsi qu'une zone permettant de saisir vos nouvelles dimensions mises à l'échelle. Cependant, notez que les noms de fichiers sont souvent enregistrés avec une chaîne de caractères supplémentaires, ce qui peut vous affecter si vous utilisez une stratégie de référencement par image spécifique.
2. Ajustez les tailles d’image dans le Paramètres> Média écran
Vous pouvez également redimensionner vos images en ajustant directement les paramètres dans WordPress. Pour ce faire, accédez à WordPress, puis accédez à Paramètres> Média:
Cela vous amènera à la Paramètres de média page. Ici, vous pouvez définir les dimensions maximales à utiliser lors du téléchargement d’une image vers WordPress, pour chacune des trois options qu’elle présentera au navigateur (comme indiqué plus haut à propos de srcset):
Ici, vous pouvez modifier la largeur et la hauteur des tailles d’image miniature, moyenne et grande.
WordPress créera alors automatiquement des versions à l'échelle de chaque image en utilisant ces tailles. Vous pouvez choisir la taille que vous souhaitez insérer dans l'éditeur WordPress.
Toutefois, il convient de noter que même si vous pouvez parfois améliorer les temps de chargement des pages à l'aide de ces paramètres, ceux-ci n'optimiseront pas parfaitement vos images dans toutes les circonstances. Pour cela, vous pouvez envisager la dernière méthode manuelle.
3. Utilisez un éditeur d’image (tel que GIMP ou Photoshop)
Bien entendu, notre dernière méthode pour redimensionner manuellement vos images consiste à utiliser un éditeur d’image hors ligne. Vous pouvez penser que cette méthode est la plus évidente, bien qu’elle soit sans doute l’option la plus efficace disponible. Par exemple, dans Photoshop, vous pouvez vous diriger vers Image dans la barre d’outils et sélectionnez Taille de l'image:
Un écran contextuel apparaît avec la dimension de base de votre image. Vous pourrez ensuite redimensionner l'image à votre guise avant de la télécharger sur WordPress.
En plus de la largeur et de la hauteur, vous avez également d'autres options ici. Par exemple, la résolution de l'image peut être supérieure ou inférieure en fonction de vos besoins (72 PPI est généralement la norme pour le Web).
Conclusion
Dans cet article, nous avons expliqué comment redimensionner les images manuellement et proposé trois plugins utiles à cet effet. En résumé, ils sont:
- Optimole: Ce plugin offre une méthode de définition et d’oubli pour servir des images redimensionnées.
- Smush: Une solution populaire et hautement cotée pour l'optimisation d'image.
- ShortPixel: Pour ceux qui préfèrent une option légère, ce plugin est le choix parfait.
Avez-vous des questions sur la fourniture d'images redimensionnées ou sur ce que signifie le traitement d'images redimensionnées? Demandez-leur dans la section commentaires ci-dessous!
