Comment optimiser vos images sur WordPress ?
La vitesse de chargement fait partie des éléments que le moteur de recherche Google utilise pour classer les sites internet dans ses résultats. Si le SEO est en tête de liste, l’utilisation des images est encore sous-utilisée, alors qu’elle devrait être aussi au cœur des préoccupations.
Avoir des images attrayantes et impactantes sur le site Web de son entreprise procure des avantages indéniables. Booster votre visibilité et obtenir plus de trafics en sont de bons exemples.
Cependant, l’optimisation des images doit répondre à certains critères spécifiques. À travers ce guide, nous vous dévoilerons comment optimiser vos images sur WordPress ?
Pourquoi optimiser les images WordPress d’un site Web ?
La vitesse de chargement sur votre site est conditionnée par le poids de vos fichiers et les tailles des images. Google se réfère à cet élément pour définir la position de votre site internet, car il impacte sur le comportement de vos lecteurs.
Un site web qui se charge lentement va faire fuir les internautes. C’est également un site qui ne convertit pas. Selon les statistiques de Kissmetrics, l’influence de la vitesse de chargement d’un site web s’annonce comme suit :
%
des visiteurs patientent au moins 2 secondes pour charger une page.
%
des visiteurs se déconnectent d'une page qui met plus de 3 secondes à s'ouvrir.
de chargement équivaut à un temps de conversion de 7 % en e-commerce.
Bref, en optimisant le SEO de vos images, vous vous faites une place d’honneur sur Google images et en simultané, vous augmentez le trafic sur votre site WordPress. Cela est très important si vous avez une activité professionnelle basée sur le visuel.
Par ailleurs, l’ajout de texte alternatif à vos images est une très bonne piste à creuser pour le référencement de vos images et l’accessibilité du web. Petit rappel : le texte alternatif se concrétise par l’attribut Alt appliqué sur l’élément <img/>. Il peut être appliqué à tous les formats d’images tels que : JPEG, WebP, PNH, GIF…
Calculer la vitesse de chargement d’un site web : comment procéder ?
Si vous rencontrez quelques problèmes avec votre site WordPress, ces conseils vous seront utiles. De nombreux outils peuvent vous aider à calculer la vitesse de chargement de votre site web.
Parmi les plus répandus, vous avez :
Google Page Speed Insights ou PSI
Cet outil lancé par Google met à votre disposition une liste des modifications à apporter selon leur niveau d’importance, bien qu’il ne puisse pas fournir les données liées à la vitesse d’affichage de votre site internet. Un rapport détaillé est visible automatiquement après avoir renseigné l’URL de la page à évaluer. La page est alors notée de 1 à 100 avec un code couleur qui est intuitif et compréhensible par tous.
GT Metrix
Plus complet que le premier outil, il affiche les données des moteurs de recherche Yahoo et Bing. Celui-ci vous donne accès à des graphiques et des notes relatives à la vitesse de chargement de votre site.
Les astuces pour optimiser vos images sur WordPress
L’optimisation de vos images sur WordPress est une solution efficace pour améliorer la vitesse de chargement de votre site. Mais sachez qu’il en existe aussi d’autres. Une fois que vous avez optimisé vos images WordPress, ne restez pas les bras croisés. Ainsi, soyez toujours à l’affût des nouvelles solutions qui apparaissent.
Utiliser des images libres de droit, gratuites
Se servir de ses propres images pour illustrer ses contenus, c’est l’idéal. Mais ce n’est pas toujours possible ! Les raisons peuvent être : un manque de ressources ou de temps. Fort heureusement, les images libres de droit sont accessibles sur Internet. Trois sites sortent du lot :
– pixabay.com ;
– unsplash.com ;
– pexels.com.
Vous pourrez y piocher de très belles photos, et tout cela, à titre gratuit.
Le format d’image à utiliser
La qualité de l’image est cruciale. Le choix du format de fichier l’est tout autant. D’ailleurs, il existe plusieurs types de fichiers. Mais les plus courants sont :
JPEG (Joint Photographic Experts Group)
Avec les images JPEG, vous devez trouver le bon équilibre entre la qualité de l’image et la taille du fichier. Le niveau de compression doit être ajusté par un plugin d’optimisation tel que TinyPNG ou Compressor.
Comme les fonds transparents ne sont pas pris en charge, JPEG n’est donc pas adapté aux logos de site internet. En revanche, il est recommandé aux images photographiques avec des couleurs élevées.
GIF (Graphics Interchange Format)
Le format GIF est compatible aux images animées. Son bémol : il ne peut prendre en charge que 256 couleurs du spectre RVB. Cette contrainte rend le fichier GIF incompatible aux images photographiques aux couleurs élevées. A contrario du JPEG, la transparence est prise en charge.
PNG (Portable Network Graphics)
Ce format peut compresser des données sans nuire à leur qualité. Il est le digne successeur du format d image GIF. Celui-ci prend en charge les fonds transparents et un large panel de couleurs, à l’instar du JPEG. Le PNG propose une excellente qualité d’image pour les images classiques, comparé au fichier JPEG.
WebP
Ce format d’image créé par Google remplace à main levée les formats standards : JPEG, PNG, GIF… Son plus grand atout, il conserve la qualité de l’image tout en limitant son poids de 25, voire 30 % afin d’optimiser la vitesse de chargement de votre site internet.
WebP favorise la compression de vos images avec ou sans perte. Avec la première option, votre image est très légère, mais réduite au niveau de la qualité par rapport à l’originale.
Avec la seconde option, le poids de l’image est réduit en conservant les caractéristiques identiques (nombre de couleurs, définition, transparence et animation) à l’originale. Pour profiter de ce format, il faut impérativement passer par une extension. Néanmoins, sur WordPress, vous ne pouvez pas encore charger ce type d’image par défaut.
La résolution d’image à retenir
Ce critère joue grandement sur la taille de votre fichier. Sachez qu’une petite taille de fichiers vous garantit un chargement rapide de votre page. À titre d’exemple, si votre site intègre des images dont la largeur est de 720 px, évitez les images de 2000 px de large. Ces dernières vont être redimensionnées pour s’adapter au contenu de 720 px. La taille de l’image, quant à elle, sera conservée. La différence de taille entre l’image de 2000 px et 720 px peut être flagrante (plus de 1 Mo).
Les outils et étapes requises pour optimiser vos images sur WordPress
Voici les étapes essentielles à suivre pour vous aider à optimiser vos images sur WordPress.
Connaître les dimensions maximales
Savez-vous que les widgets et les thèmes que vous utilisez sur WordPress doivent respecter une taille maximale aux images ? Cette dernière est exprimée en pixels. Si l’image intégrée est supérieure à votre thème, elle sera ajustée par WordPress. À ce stade, tout se passe pour le mieux. Vous vous dites alors que vous pouvez continuer sur votre lancée.
Mais même si WordPress ajuste la taille de l’image, le fichier volumineux ne quitte pas votre bibliothèque média. Il occupe un espace qui devrait être exploité. De ce fait, il est nécessaire de connaître les dimensions d’images nécessaires au thème de votre site. À ce titre, vous devez travailler vos images pour que leur taille soit adaptée. Ainsi, cela va réduire la taille des pages et en conséquence elles s’affichent rapidement sans faire baisser leur qualité.
Pour savoir quelle est la taille maximale supportée par votre thème, vous devez vous rendre sur la page visée et cliquer sur le bouton droit de votre souris, puis sur « inspecter ». Par la suite, appuyez sur la flèche en haut à gauche du champ d’inspection. La photo à sélectionner apparait. Vous pouvez alors inspecter les dimensions.
Une fois que c’est fait, la barre de code HTML va s’afficher dans la colonne « éléments ». Les dimensions visibles sur la barre de code informent sur les dimensions exactes de l’image (telle qu’elle est stockée dans votre bibliothèque média).
Sur votre droite, vous avez accès à un menu (carré central) qui fournit les dimensions d’images WordPress que votre thème peut supporter. Arrivé à cette étape, vous pouvez ajuster la taille de votre image aux dimensions souhaitées.
Dans le cas où les dimensions indiquées dans votre barre de code dépassent celles du menu à droite, cela signifie qu’il y a un espace qui est inutilisé.
Ajuster ses images aux dimensions de WordPress
Après avoir ajusté la taille de vos images et après les avoir intégrées, vous pouvez maintenant vous tourner vers des outils de redimensionnement en ligne. Nous pouvons citer entre autres :
BeFunky
Cet outil de retouche en ligne peut appliquer des effets à vos photos, les retoucher. Grâce à lui, vous pouvez réaliser des collages de photos.
Toolur
Il vous permet de couper partiellement un fichier audio ou de convertir une vidéo au format MP3.
Simple Image Resizer
Grâce à cet outil, convertir et compresser un fichier d’image deviendront un vrai jeu d’enfant.
Online Image Resize
Il est possible de redimensionner une image sans perdre de qualité de manière gratuite et rapide avec cet outil.
Si malencontreusement vous avez intégré une image volumineuse, détrompez-vous ! Il vous suffit de modifier les dimensions depuis WordPress et le tour est joué. Pour cela, allez sur le menu « Médias » et sélectionnez l’image à redimensionner.
Une fois sur la page qui conserve l’image, cliquez sur « Modifier l’image ». Vous accédez à une fenêtre. Ensuite, vous pouvez procéder à la modification de la hauteur ou de la longueur. Le rapport d’origine sera sauvegardé automatiquement. Puis cliquez sur « redimensionner » et terminez par « enregistrer ». Vous êtes un vrai pro !
Si vous êtes propriétaire d’une boutique e-marchande avec une multitude d’images, le temps vous manque pour optimiser vos images WordPress une par une. Le cas échéant, privilégiez l’utilisation d’extension pour automatiser les tâches. Nous avons sélectionné pour vous des extensions qui allient efficacité et rapidité :
Wp Rocket
Ce plugin d’optimisation de votre site va jouer sur la performance de ce dernier. Bien que cet outil de mise en cache de référence soit payant, il est très apprécié pour sa capacité à accélérer le chargement des pages web.
Imsanity
Cette extension requiert de renseigner les dimensions et la qualité d’image maximales à appliquer pour vos photos. Par la suite, elle prendra en charge le redimensionnement des nouvelles images et celles existantes.
Compresser les images
L’optimisation des images WordPress ne se résume pas seulement au redimensionnement. La compression est également de mise. Elle vous permet de gagner de l’espace et d’activer votre vitesse de chargement. Les outils les plus populaires sont :
– TinyPNG ;
– Optimizilla ;
– Compressor ;
– ImageSmaller ;
– ImageOptim.
Avant de publier votre article avec l’image correspondante, assurez-vous que le poids du fichier est réduit. Une taille moyenne de 50 KB est vivement conseillée pour vos images. En effet, le chiffre changera selon le contenu et les couleurs des images. Avant la mise en ligne, vérifiez le niveau de lisibilité et de visibilité de l’image.