Les images sont essentielles pour capter l’attention d’un visiteur. Elles permettent de rompre de longs morceaux de contenu, et permet de favoriser le partage de vos articles sur le Web. Mais, d’un autre côté, les images augmentent également le “poids” de vos pages.
Lorsque vous ajoutez une image dans une page, elle est alors téléchargée par le visiteur à partir de votre serveur vers son ordinateur. Cela contribue à augmenter le temps de chargement de la page, ce qui peut frustrer l’internaute et avoir un effet négatif sur le classement des moteurs de recherche.
La présence d’une grande quantité d’images augmentera la bande passante de manière significative et utilisera plus d’espace sur votre serveur. Ce n’est probablement pas un problème au début de la vie de votre site, mais cela pourrait augmenter, à terme, vos frais d’hébergement.
Je vais vous présenter dans cet article comment vous allez pouvoir optimiser vos images pour votre site WordPress.
Les différents formats de fichiers
Les logiciels de graphisme proposent d’enregistrer vos images sous différents formats. Les formats de fichiers en ligne les plus couramment utilisés sont le JPEG et le PNG.
Le JPEG convient mieux aux photographies car ils contiennent beaucoup d’informations de couleurs. Ce format utilise la compression pour réduire la taille du fichier. Le PNG, quant à lui, est plus adapté aux captures d’écran et aux images servant à la conception de sites web tels que les icônes et les boutons. Il utilise des techniques de compression sans perte donc la qualité est plus élevée, mais cela génère par conséquent des fichiers plus volumineux.
Optimiser les images permettra de réduire la taille du fichier, mais cela aura une incidence sur la qualité de l’image.
L’autre format que vous rencontrerez fréquemment sur internet est le GIF. Le format GIF est bien adapté aux images de faibles qualités avec peu de couleurs. Bien connu sur la toile, le GIF animé, est Le format de fichier pour les fichiers animés.
Optimiser vos images avant de les uploader sur votre site web
WordPress inclut une fonction bien utile de miniaturisation des images . Elle va créer automatiquement trois tailles différentes de toutes les images que vous allez télécharger. Vous trouverez ces indications dans votre tableau de bord WordPress sous Réglages > médias.
Vous pourrez ajuster les tailles de miniatures qui vous conviennent. Par exemple, vous pouvez configurer WordPress pour qu’il génère une image de 150 × 150 pixels pour les miniatures, une image moyenne de 300 × 200 pixels et une image de grande taille de 600 × 600 pixels.
Si vous avez téléchargé une image disons de 1000 pixels de large, vous pourrez afficher la version grande taille dans votre article avec un lien vers l’image en taille réelle. C’est exactement ce que font de nombreux blogueurs, mais ce n’est pas la meilleure façon de procéder dans le traitement de vos images. Le poids des fichiers des images réduites par WordPress sera plus petit, WordPress réduisant la taille de l’image téléchargée, mais il ne compresse pas les images quand il crée les vignettes. Une méthode plus efficace consiste donc à optimiser les images avant de les télécharger sur votre site.
La plupart des applications d’édition graphique vous permettent de réduire la qualité d’une image pour un usage sur internet. Par exemple dans GIMP, passez par Fichier > Export As…puis choisir le format de fichier approprié et éventuellement son taux de compression en faisant glisser le curseur “Qualité”. Cochez donc la case “Affichez l’aperçu” afin de vous rendre compte de l’impact sur l’apparence de l’image et faites ainsi le meilleur choix dans le rapport poids / qualité de l’image. Si votre logiciel ne possède pas d’option pour une sauvegarde optimisée sur le web il existe des logiciels qui peuvent s’en occuper. Pour Windows il existe, par exemple, RIOT qui peut aussi être installé en tant que plug-in dans GIMP, IrfanView ou encore XnView. Riot permet de comparer l’image originale à l’image optimisée. Un bouton “Full Auto Mode” permet l’optimisation de manière entièrement automatique.
Si vous n’avez encore jamais optimisé vos images sur votre site WordPress, Smush.it est un moyen rapide et efficace de réduire le poids de toutes vos images téléchargées. L’extension peut être très gourmande en ressources pour votre serveur lorsqu’il opère l’optimisation. Il est donc préférable d’exécuter l’application lorsque les visites sur votre site web sont moins importantes, par exemple la nuit.
Il existe des alternatives à WP Smush.it. Notamment : EWWW Image Optimizer , image CW Optimizer , Imsanity ou encore Hammy . Certains utilisateurs WordPress préfèrent utiliser ces extensions du fait qu’elles ne reposent pas sur un serveur externe pour traiter vos images.
Pour conclure
L’optimisation de vos images est importante et ne doit pas être sous-estimée. Optimiser vos images permettra de réduire le temps de chargement de votre site Web, de réduire la bande passante et d’améliorer ainsi l’expérience de navigation pour vos internautes. Vos pages s’affichant plus rapidement, votre classement dans les moteurs de recherche devrait également s’en trouver amélioré.
N’oubliez pas que le fait de comprimer une image va permettre de réduire la taille du fichier, certes, mais, si vous la comprimez de manière trop importante, la qualité visuelle s’en verra notablement réduite . Il est donc important de trouver l’équilibre entre la qualité de l’image et la taille du fichier d’image.
Pour ceux d’entre vous qui accordent une grande importance à la qualité d’image (par exemple, les photographes), il est possible de charger les images seulement lorsque l’utilisateur fait défiler la page vers le bas. Cela s’appelle le “Lazy loading”. Il existe des extensions comme charge Lazy (pas mis à jour depuis 2 ans…). Une fois activée, vos images ne seront affichées aux visiteurs que lorsqu’elles sont visibles dans leur navigateur. Cela réduit considérablement la taille initiale des pages Web contenant un grand nombre d’images.
Bien sûr, il existe encore d’autres méthodes pour optimiser son site WordPress (futurs posts ?)
Si vous avez des questions par rapport à ce tutoriel, utilisez les commentaires ci-dessous.