L’optimisation d’un site en vue d’un meilleur référencement passe inévitablement par l’amélioration du temps de chargement de chacune des pages du site web en lui-même. Suivre les recommandations de base de cet article engendre une meilleure visibilité de l’ensemble des pages, du site dans sa globalité. Ne pas s’attarder à gagner du temps de chargement freine cet élan de visibilité.

Cet article ne va traiter que la partie concernant les images, c’est volontaire. Tous les autres points méritent un article dédié chacun, que ce soit la partie Javascript, nombre de requêtes, compression html, minification css, etc.

Comment optimiser les images de mon site ?

Une page web se doit maintenant d’être responsive, vous le savez certainement. Si non, une page dite responsive est capable d’être toujours aussi bien visible quel que soit la taille de l’écran. Que ce soit un petit smartphone, un grand, une tablette, en portrait ou paysage, un laptop ou un grand écran d’ordinateur de bureau, tous les éléments sont visibles agréablement, sans devoir scroller vers la droite ou la gauche et sans devoir zoomer ou dézoomer.

Si pour tout ce qui est partie textuelle, il est facile de rendre chaque paragraphe lisible, pour les images, cela peut être un peu plus compliqué.

La première chose à vérifier (et à penser) pour optimiser les images

Il ne sert à rien d’envoyer sur le serveur des images de plusieurs milliers de pixels ! Il faut bannir cela.

Les images ne doivent pas dépasser la plus grande largeur d’écran, donc le maximum du maximum est de 2000 pixels.

Secondement, il faut bien se mettre en tête que la plupart des visiteurs vont venir depuis un smartphone. Là encore, la plus grande taille est de l’ordre de 768 pixels.

Pour quelle raison vouloir envoyer une image HD de 4000 pixels alors qu’elle sera affichée à « seulement » 768px ?

Suivant le design de la page, cette même image sera déjà réduite. Même sur un site de vente en ligne, les images ne dépassent pas les 800 pixels.

Premier réflex pour optimiser les images du site :

Reprendre toutes les images pour diminuer leur taille.

Personnellement et pour mes clients :

  • Les images d’entête sont au maximum à 1000px
  • Les images produits sont au maximum à 800px
  • Les images diverses et variées pour agrémenter la lecture sont à 400 voir 450 px de large.

La compression des images est importante

Lorsque vous prenez une photo, elle est riche en détails. C’est super pour les retouches et les travaux sur les images. Par contre, pour le web…aucune utilité. Voilà pourquoi, de plus en plus, vous pouvez voir des services, modules, plugins et autres outils de compression.

Une image compressée normalement ne perd pas en qualité d’affichage pour un site web. A l’œil, quasiment aucune différence.

Pourquoi est ce important ? Le poids. Cette compression permet de gagner énormément de poids. En moyenne une image perd 25% de son poids grâce à cette méthode.

Si cela ne représente pas grand-chose dit comme ça, lors du chargement de la page, ça change tout, et mieux encore, Google Bot le ressent. Si Google Bot met moins de temps à charger votre page web, il est heureux et vous sort un petit drapeau vert au lieu d’un drapeau rouge.

Plus vous cumulez de drapeaux verts (bons points), plus vos pages sont visibles (bien positionnées).

Il est de coutume d’annoncer que chaque image sur un site web ne doit pas dépasser 100ko.

Si le design de vos pages html ou php intègre de grosses images et qu’il n’est pas possible de réduire suffisamment celles-ci pour conserver un visuel correct. Vous risquez fort de devoir repenser le design du site. C’est ce que l’on appelle une refonte de site web. Ca se fait couramment, c’est du travail, mais ça se fait. Vous pouvez me contacter pour que l’on voit cela en détail.

Surveiller l’extension de ses images

Beaucoup de personnes transfèrent les images sur le serveur sans se préoccuper de l’extension de celles-ci. C’est un tort ! C’est même une erreur !

Le fichier png ne doit être utilisé que pour les images ayant besoin d’un fond transparent car ce format est beaucoup, beaucoup plus lourd qu’un simple jpeg ou jpg.

Le fond transparent peut bien souvent être remplacé par du blanc ou par la couleur de l’arrière plan du site lui-même. Mis bout à bout, tous ces kilo-octets économisés vous feront gagner beaucoup de temps de chargement.

Sur un site web « à la main », le travail peut vite devenir laborieux, mais il n’y a guère le choix.

Heureusement, avec WordPress, c’est plus simple.

Optimiser ses images pour WordPress

On prend les mêmes et on recommence !

La grande différence se fait grâce aux plugins disponibles. Là, il y a de quoi faire, sans forcément payer.

Des extensions WordPress comme Smush.It, comme Imagify, comme Autoptimize, comme ShortPixel peuvent vous aider.

  • Imagify est très pratique, mais il faut un compte premium lorsque l’on a beaucoup d’images à retravailler.
  • Smush.It est très pratique, il faut simplement penser à relancer l’outil toutes les 50 images (en formule gratuite).

Ces extensions vont uniquement compresser les images, celles déjà présentes et celles à venir par la suite. Ces plugins ne vont pas gérer les formats d’extensions (passer de png à jpg par exemple), ni réduire les images de 4012px à 800px. Pour tout cela, il va falloir le faire à la main.

Vous ne croyez tout de même pas vous en sortir sans travailler un peu ? hihihihih 

Ca vous prend la tête de vous en occuper ?

Je peux m’en charger. Prenez deux minutes pour me contacter.

Comment savoir si mes images sont trop lourdes ?

Si vous n’avez jamais regardé cet aspect des photos et images, que vous avez pris tel fichier image et « jeté » sur le serveur, il y a de fortes chances que toutes les images soient à retravailler.

Vous pouvez également utiliser le logiciel ScreamingFrog pour découvrir quelles sont les images dépassant les 100ko.

Passer par PageSpeedInsight de Google permet également de détecter si des images doivent être retravaillées, par contre, c’est page par page (long et fastidieux).

Optimiser ses images pour le référencement

Un détail pour certains, un point très important pour d’autres. Le référencement n’est pas seulement sur la partie texte comme on peut l’imaginer. Elle concerne également tout ce qui est image. 

Google met un point d’honneur à ne pas laisser trop de place à Pinterest depuis quelques années, en proposant un onglet et un moteur de recherche dédié uniquement aux images. Vous devez en profiter !

Ce sont tout de même plusieurs millions de recherches quotidiennes qui sont effectuées en France et seulement sur ces images. Il y a forcément quelques visiteurs pour vous dans tout cela.

L’optimisation à ce niveau ne concerne plus le poids mais les mots. Voilà pour quelle raison il est important (presque impératif) de renseigner la balise alt (le texte alternatif) de chacune de vos images, et encore plus, de renommer vos fichiers images.

  • Il faut arrêter d’envoyer sur le web des fichiers CIMG04598.jpg !
  • Il faut prendre le temps de renommer ces fichier avec des mots qui servent à décrire le visuel !

5 + 4 =

Aurelien Groux, Populoweb, indépendant depuis 2011.

  • Amélioration de la visibilité sur internet
  • Création de site internet
  • Rédaction web
  • Maintenance
  • Réseaux sociaux

J’accompagne mes clients à développer leurs activités sur internet et l’univers du digital.