Optimisez les images de vos articles WordPress et web

Compression des images : un pas de plus dans l’optimisation de votre site internet et de vos articles Web

Dans notre série de tutoriels sur l’optimisation de contenu web, nous allons aborder le thème de l’optimisation d’images destinées à être publiées sur le web via un site internet et notamment avec WordPress. Vous cherchez un outil pour publier des images au poids léger sur votre site ? Nous vous avons choisi 3 logiciels qui le font très bien ! Pour rappel, cet article s’inscrit comme un complément à nos autres articles sur l’optimisation SEO et sur la publication d’articles sur WordPress.

Lorsqu’il publie du contenu sur son site internet, un auteur web est toujours confronté à un dilemme : d’une part, il est très important de pouvoir présenter des images d’une qualité suffisante pour le lecteur, et d’autre part, si l’image se révèle trop lourde ou mal optimisée, la page web où elle figure sera elle aussi alourdie, et par conséquent, aura un mauvais référencement par les moteurs de recherche. Partant de ce constat, comment trouver le juste équilibre entre qualité d’image et fluidité du site ? Nous vous proposons 3 logiciels qui permettent de travailler vos images de manière à les redimensionner, les rogner et les alléger. Elles seront ainsi correctement optimisées pour être publiées sur le web et amélioreront le SEO de vos articles et donc le référencement du site.

Nous avons choisi de vous présenter 3 logiciels de traitement d’image. Les deux premiers sont libres : Gimp et Paint.net, et le troisième fait figure d’incontournable du traitement d’image, j’ai nommé Photoshop. Dans chacun des cas, notre objectif sera de redimensionner nos images pour qu’elles correspondent à notre plateforme. Les besoins de chacun diffèreront en fonction du thème de leur site, c’est pourquoi il faut bien choisir son format final, et s’y tenir. Les outils utilisés dans ce tuto remplissent tous les trois fonctions de base pour optimiser une image : Le recadrage ou rognage, la modification de la talle d’image, et la possibilité d’alléger celle-ci lors de l’enregistrement.

Notez bien sûr qu’il est souhaitable de partir d’une grande image, quitte à la réduire à votre convenance afin d’optimiser son poids. Vous n’aurez ainsi que peu de perte de qualité. Si en revanche vous partez d’une image de petite taille, et que vous l’agrandissez artificiellement, votre résultat final risque d’être flou, voire pixelisé.

L’optimisation d’image à l’aide de Gimp

Gimp est probablement le plus connu des logiciels libres de traitement d’image. Il offre un éventail d’options assez étoffé en termes de gestion de calques et de réglages divers. Souvent vu comme un peu complexe dans son utilisation, il permet néanmoins d’optimiser très facilement vos photos.

La première étape est facultative, il s’agit du rognage. Si vous désirez ne garder qu’une partie de votre image, tracez un rectangle sur celle-ci afin de dessiner les contours dans les proportions que vous désirez. Suite à cela, sélectionnez dans le menu « Image » l’option « rogner selon la sélection ». Vous obtiendrez alors l’échantillon que vous désirez. Reste alors à régler la taille de l’image.

Pour ce faire, retournez dans le menu « Image », et sélectionnez l’option « Échelle et taille de l’image ». Une fenêtre apparait, vous permettant de modifier les dimensions. Dans la mesure du possible évitez de toucher aux proportions, cela déformera l’image finale. Si cependant vous désirez les modifier, vous pouvez déverrouiller les proportions en cliquant sur l’icône symbolisant une chaine sur la droite des dimensions de l’image. Si le résultat est à votre goût, vous pouvez passer à l’enregistrement de l’image.

 Dans Gimp, ne vous laissez pas piéger ! Alors que dans bien des logiciels, l’option « enregistrer sous » semble toute indiquée pour enregistrer son résultat dans le format souhaité, nous allons ici nous servir de la fonction « Exporter », située en dessous. Procédez ensuite comme lorsque vous vouliez enregistrer votre fichier, et cliquez sur exporter. C’est à ce stade que l’on pourra modifier le poids du fichier final. Jouez sur le curseur qui s’offre à vous afin de définir le degré de qualité d’image. Vous pourrez avoir un aperçu de la taille finale en cliquant sur la case « afficher l’aperçu dans la fenêtre d’image ». Vous aurez alors tout loisir de régler votre image afin qu’elle soit la moins lourde possible tout en gardant une qualité tout à fait honorable.

L’avantage de Gimp à mes yeux, c’est sa capacité à pouvoir drastiquement réduire le poids d’une image, tout en conservant une bonne qualité de rendu. Passons maintenant au second outil, j’ai nommé Paint.net.

Optimiser son image avec Paint.net

Paint.net est un outil gratuit, et à mes yeux trop méconnu en comparaison de Gimp. En dépit de sa légèreté, il offre toutes les fonctionnalités pour permettre un traitement d’image, certes moins poussé que ses deux homologues, mais tout à fait suffisant pour ce que l’on a à faire ici. Il est simple d’utilisation et le traitement de l’image ne prend souvent que quelques secondes.

Comme pour Gimp, on va procéder comme suit : Rognage éventuel, Redimensionnement de l’image et optimisation du poids.

Pour rogner, on dessine un rectangle sur l’image afin de dessiner les contours de l’image finale que l’on désire. On se dirige ensuite dans le menu « image » et on sélectionne « Rogner selon la sélection ». Si le raccourci clavier « Ctrl + maj + X » ravira les puristes du raccourci, sachez que la fonction rognage est directement proposée dans la barre d’icônes de Paint.net.

La seconde étape consistera à donner à l’image les dimensions de son choix. Pour ce faire, le menu « Image » propose une option « redimensionner ». Attention à bien cocher la case « conserver les proportions », afin de ne pas la déformer.

Enfin, l’option « enregistrer sous » permet d’enregistrer l’image (pas de piège avec Paint.net donc !), Après avoir défini l’emplacement et le nom de votre fichier, une fenêtre s’affiche et vous propose la jauge de qualité à moduler, ainsi que le poids calculé et vous montre un aperçu de l’image finale, ce qui permet de se faire une bonne idée de sa qualité.

Je retiendrai de Paint.net son extrême facilité d’utilisation. L’optimisation d’une image prend rarement plus d’une minute pour qui s’en sert régulièrement. Du point de vue interface c’est, et de loin, le plus intuitif, et la qualité du rendu est excellente. C’est mon petit coup de cœur sur ce tutoriel, bien qu’il ne soit pas étudié pour offrir autant d’options que Gimp et Photoshop, ce qu’il fait, il le fait bien. Passons maintenant à Photoshop.

Photoshop et l’optimisation d’image pour le web

Nous venons de voir qu’il existe des méthodes gratuites et efficaces afin de compresser ses images aisément. Cependant, les logiciels gratuits sont souvent des usines à gaz et réussir à obtenir une image compressée et bien optimisée pour un article relève parfois du défi, notamment pour comprendre le fonctionnement du logiciel. Parmi les logiciels payants les plus connus, il y a Photoshop. Ce dernier permet notamment de retoucher ses images, d’ajouter des filtres et, bien entendu, de compresser des images.

Avec Photoshop toutes les options pour les images sont relativement simples pour du traitement de base, j’entends par là : redimensionnement, taille, compression.

On démarre le logiciel, on ouvre son image et c’est parti.

Le recadrage, afin d’avoir notre image au format carré désiré

Pour cela, sélectionnez l’outil recadrage. Choisissez votre point de départ mais avant de cliquer, enfoncer la touche Shift (sur PC). Puis cliquez et agrandissez jusqu’à ce que vous obteniez la zone désirée. Puis double-cliquez pour valider. Dans mon cas, l’image obtenue a la résolution 800*800.

Redimensionner l’image

Pour avisdupublic.net, le thème exige une image de 450*450 pour qu’elle soit bien reproduite dans les différentes miniatures. Pour la redimensionner, allez dans l’onglet Image, puis Taille de l’image.

Qualité de l’image pour diminuer son poids

Un des meilleurs moyens pour obtenir une image bien optimisée c’est de diminuer la qualité de l’image. Pour cela, il suffit d’enregistrer votre image (format JPG), et au moment de l’enregistrement, diminuer sa qualité. En général, une qualité 3-4 suffit amplement pour du format Web. Vous aurez ainsi des images légères et optimales pour publication sur un article destiné à une page internet. Petit truc pour encore diminuer le poids de l’image et l’optimiser un peu plus pour le WEB et les pages internet, pensez à cocher l’option Progressif Optimisé (5 semble être correct). Et voilà le résultat.

Vous retrouverez l���image de départ pour cette partie du tuto ici.

Enfin, pour terminer une belle optimisation pour votre article et améliorer son SEO et son référencement, n’oubliez pas d’ajouter un plug-in de compression des images (qui vous fera encore gagner quelques dizaines de KO, ce n’est pas rien) et d’installer un plug-in de gestion de cache. Pour les images, je vous conseille EWWW Image Optimizer. De plus, selon les différents tests effectués, avec de belles images compressées après une bonne optimisation, WP Rocket sera le candidat idéal pour le cache.

Pour conclure ce tutoriel, il y a différents points à retenir. Le premier, et on ne le dira jamais assez, le poids de votre article est un des facteurs les plus importants pour le référencement, il faut donc soigner le poids total pour améliorer le SEO, le contenu, et le contenant d’un article, notamment avec WordPress. Nous avons également vu trois logiciels plutôt connus qui permettent d’améliorer l’aspect « image » de vos articles en effectuant les tâches les plus simples, à savoir : rogner, redimensionner, réduire la qualité. Maintenant, vous n’aurez plus d’excuse à avoir des images non redimensionnées ou pas assez optimisées ;). Et pour le plaisir, le poids moyen des trois images affichées sur cet article dédié à l’optimisation des images pour le référencement web et le SEO est de 8.23 kB.