Comment optimiser les images de son site web - Tutoriel pas à pas

Aaah, la joie de recevoir son nouveau site à soi, ou celui de délivrer enfin un site tout beau tout propre et bien optimisé à sa clientèle !
Seulement pour le retrouver quelques mois plus tard, méconnaissable, avec 450 requêtes en plus et plus vraiment optimisé ?(Le drame de toute personne travaillant dans le web…) !

Et aujourd’hui, on va s’attaquer à un problème tout particulièrement…
Une petite bête cachée qui se développe dans l’ombre…
Et qui se cache habilement pour envahir vos sites et les métamorphoser sans qu’on s’en rende compte…

J’ai nommé : VOS IMAGES !

Et oui, les images sont un facteur important pour votre site web (que ce soit pour le SEO aussi appelé Référencement Naturel, l’impact environnemental de votre site et l’accessibilité pour les personnes à handicaps) !

Alors pour arrêter de mettre en PLS nos développeureuses et marketeureuses, on va voir le process complet et tutoriel étape par étape pour vous apprendre à optimiser vos images pour votre site web (avec quelques astuces spécialement pour WordPress !).

L’optimisation des images pour le web, tutoriels en vidéo

N’oubliez pas de regarder cette vidéo en basse résolution afin de réduire notre empreinte écologique, c’est l’audio qui compte ici.

Au sommaire de cette vidéo : 

  • 00:00:00 Introduction
  • 00:28 L’importance des images sur le web
  • 01:12 Combien d’images par page web
  • 01:53 Moins et mieux, l’écoconception des images
  • 02:23 ⚠️ Les 2 points d’attention
  • 02:32 1- Le poids / la taille des images
  • 02:54 Redimensionner son image
  • 03:55 Alléger le poids de l’image
  • 04:35 Outil ImageOptim
  • 05:20 Extension SMUSH pour WordPress
  • 06:09 2- Les descriptions textuelles
  • 07:00 Renommer le fichier
  • 07:45 Utiliser des formats simples
  • 07:56 Remplir l’attribut ALT
  • 09:08 Ajouter une légende à l’image
  • 09:30 Rappel des règles SEO
  • 09:55 ➡️ Résumé des actions
  • 10:33 Conclusion

Transcription écrite de la vidéo « Comment optimiser les images de son site web (écoconception, SEO et accessibilité) » :

Hello à toutes et à tous,

Dans cette vidéo, je vais vous partager ma stratégie et le process complet que j’applique à mes images pour un site web. Pourquoi une vidéo entière sur les images ? Parce que c’est pas aussi simple que juste en trouver une jolie, la mettre en ligne sur son site et… Voilaaa.

C’est un facteur ultra important pour avoir un site qui soit mieux classé en terme de SEO, un site qui charge le plus rapidement possible, et un site qui soit accessible au plus grand nombre de personnes. Plutôt important donc.

Allez, on va voir tout ça en détail, c’est parti !

 

L’importance des images sur le web

Je suis Alex Carmona, et quand je ne m’occupe pas de mes formations en ligne ou des vidéos youtube, je travaille la stratégie de marketing éthique sur le web pour des structures éthiques.

Et qu’on soit dans le secteur éthique ou non, à chaque fois, n’importe quelle clientèle va être ravie d’avoir son nouveau site et va vouloir le rendre le plus attrayant possible avec pleins de belles photos à tout va et des illustrations à gogo.

Sauf qu’on ne doit pas prendre les images à la légère ! Quelque soit l’image que vous voulez mettre en ligne, elle peut avoir un impact sur :

  • Votre SEO
  • Les performances de votre site, donc c’est la rapidité qu’à le site à s’afficher, et DONC ça a un impact sur le SEO
  • Et enfin la lisibilité pour votre lectorat

Et sur chacun de ces critères, ça peut être un impact POSITIF OU NÉGATIF.
C’est pour cette raison que je voulais vous partager cette vidéo aujourd’hui !

impact images site internet

Combien mettre d’images par pages web ?

Pour commencer, des images, il en faut.

Comme beaucoup de points en SEO, il n’y a pas de chiffres précis à vous donner, mais il faut penser à en avoir quelques-unes pour agrémenter votre page et la rendre plus lisible. Ni trop, ni pas assez ! Pour une page classique de 1400 mots, 2 images c’est bien, puis 3 ou 4 si vous avez vraiment une grosse page avec beaucoup de texte ou des choses à montrer.

Pour autant, l’objectif n’est pas d’avoir 95% d’images pour 5% de texte sur votre page !
Déjà parce qu’en terme de SEO, Google et les autres moteurs ne savent pas encore lire le CONTENU des images. Donc il vaut mieux miser sur du texte pour donner de la matière (à référencer) aux moteurs de recherche.
Et parce que votre page va probablement prendre beaucoup plus de temps à s’afficher avec le poids des images !

Si vous connaissez déjà le concept de l’éco-conception, alors vous le savez déjà : Même un site web a un impact environnemental. Et pour éviter que votre site pollue trop, l’idée est déjà de bien sélectionner ce qu’on veut afficher sur son site. Comme pour la slow communication, on veut MOINS ET MIEUX. Donc pour les images et avant toute chose, on va bien prendre le temps de réfléchir à trier et sélectionner les images qu’on veut. On veut moins et mieux pour les images aussi.
Si vous voulez plus d’infos là dessus, je vous mets l’article en lien sur l’écoconception en moins de 3 min.

Ensuite, il y a 2 points auxquels on va faire attention pour nos images :

  • 1- Le poids, la taille des images
  • 2- Les descriptions textuelles
optimiser performance seo image

1- Réduire le poids / la taille des images

Le premier point, ça va être pour des questions de performance tout simplement, on ne veut pas que nos images ralentissent le chargement de la page. Une image c’est beaucoup plus lourd à charger que du simple texte. C’est pour ça que, comme je vous disais, quand on parle d’éco-conception d’un site web, on essaie d’éviter les images un max et on se limite au strict minimum vital d’images !

Pour l’optimisation des images côté performances, on a plusieurs choses à faire :

  • Mettre l’image directement à la bonne dimension. Vous pouvez modifier la taille d’une image dans un logiciel de retouche photo comme Photoshop par ex, le logiciel que j’utilise ici. On ne veut pas que l’image soit redimensionnée par le navigateur ou une extension, mais que ce soit directement à la bonne taille de base. Pour vous illustrer tout ça, on va prendre une image en exemple (voir vidéo pour démonstration sur Photoshop).
  • Ensuite, alléger vos images le plus possible. Vous pouvez le faire dans des logiciels de retouches photo aussi en choisissant les options d’export. Pour ça, vous jouez avec les réglages et vous vérifiez jusqu’à quel point c’est ok de la réduire. Si vous arrivez à moins de 500 ko pour vos images, c’est parfait ! On va le faire ici (voir vidéo pour démonstration sur Photoshop).
  • Une autre astuce partagée par Théo Degarat pour alléger vos images : Supprimer les données EXIF des photos, en choisissant « Métadonnées : Sans » dans Photoshop (ou votre logiciel de retouches photo préféré). Ces données sont des informations relatives à chaque image (modèle de l’appareil photo, objectif utilisé, prise de vue, copyrights…), stockées directement dans le fichier images et invisibles sur l’image pour l’utilisateurice. Même si elles peuvent très nombreuses, elles ne sont généralement pas volumineuses… Mais c’est toujours ça en moins !
  • Et le dernier truc pour les performances que j’aime bien faire, j’ai un petit logiciel gratuit sur Mac qui s’appelle ImageOptim. Avant de mettre mon image sur mon site, en plus des 2 autres réglages avant, je la fais glisser dans mon logiciel et hop, elle est allégée automatiquement. C’est vraiment un gain de temps énorme quand j’ai une dizaine d’images à traiter et je ne veux pas passer une par une sur photoshop. Pour les personnes sur Windows Linux, je pense que vous devriez pouvoir trouver des alternatives, avec plaisir si vous voulez les laisser en commentaires pour les autres personnes ! Après il y a aussi plusieurs outils en ligne qui vous permettent de le faire mais je ne les ai pas testés (voir vidéo pour démonstration sur ImageOptim). Zohra El Houjjaji recommande l’outil TinyPNG en ligne qui est gratuit et apparemment simple d’utilisation !
  • Dernier point pour les performances : Si vous êtes sur WordPress, vous avez des extensions comme Smush qui permettent de réduire la taille de vos images une fois téléchargées sur votre site. C’est quand même mieux de le faire vous avant, comme ça vous êtes sûr‧es que c’est bien fait, et ENSUITE on a SMUSH au cas où en dernière vérification 🙂 ! Cet outil permet d’ailleurs de faire aussi du lazy loading, c’est le fait de charger l’image seulement lorsque l’utilisateurice scrolle la page. Comme ça, on charge les choses au fur et à mesure et pas tout d’un coup dès l’ouverture de la page. Je vous recommande de mettre cette option aussi, c’est assez efficace pour améliorer le chargement de la page !
  • Pour le formatage, ne pas oublier bien sûr de vérifier qu’on utilise le bon format (on préfère le JPG au PNG si pas besoin de canal alpha / de transparence). Et étape post upload pour booster les performances : générer une version webp à servir aux navigateurs compatibles  (Merci Louis pour l’ajout de ce conseil !)

     

outils optimisation web

2- Les descriptions textuelles

Tout ça c’était pour la partie optimisation des images pour les performances. Maintenant on va parler description pour le SEO ! Ça va nous servir à deux choses :

1- C’est avec ça qu’on va pouvoir jouer pour classer nos images dans Google images par exemple.
2- Pour améliorer l’accessibilité web à toutes les personnes. Que ce soit des personnes avec handicaps qui ont des outils qui lisent l’écran pour elles, des personnes avec des troubles de la vue, des personnes avec une mauvaise connexion internet etc etc. Si vous voulez plus d’infos sur l’accessibilité web, on a aussi fait un article sur le sujet que je vous mets en lien !

Donc, pour optimiser la description des images pour le SEO, on a plusieurs actions à suivre :

  • Avant même d’uploader votre image, il faut renommer le fichier avec un titre compréhensible et vos mots clefs. On ne laisse pas les « img-666-final.jpg » ! Ça ne sert à rien. Comme pour les URLS, on met des scores ou « tirets du 6 » (ceux là : – ), mais pas de underscore (ou tirets du 8) (comme ça : _ ). On met ces tirets score et on évite les accents ou caractères spéciaux. Juste des lettres voir des chiffres si pertinents pour vous.
  • Pensez à utiliser des formats d’images simples, compréhensibles par tous les navigateurs. Donc les classiques jpg, png ou gif. On va éviter le format BMP par ex. Essayez de privilégier les formats web comme .webp pour les images et .svg pour les icônes et illustrations.
  • Une fois qu’on a fait toutes ces modifications sur notre image, on va pouvoir l’importer sur notre site. Et là on arrive à un point important pour optimiser notre image : Remplir l’attribut Alt de votre balise image. C’est en fait un petit texte qu’on va mettre pour dire à Google ce que contient notre image, vu que ce n’est pas encore quelque chose que le moteur sait faire. Ce texte ne sera pas visible par les utilisateurices sur votre site, le seul moment ou des personnes le verront, c’est quand le lien est cassé comme ceci (je vous mets l’exemple juste en dessous).
    • Pour remplir ce texte, 2 solutions : soit directement dans le code en ajoutant l’attribut à votre balise img (voir la vidéo pour la démonstration).
    • Soit dans WordPress par exemple vous avez sur le côté dans la barre latérale à droite un cadre avec l’attribut alt que vous pouvez remplir. La plupart des CMS permettent de pouvoir remplir cet attribut assez facilement.
    • Pour le choix de ce qu’on va écrire dedans, le but est de décrire l’image qu’on met. Et de réussir à y mettre quelques mots clefs ! Donc par exemple si je fais des bracelets, je peux avoir 1 image « bracelet personnalisé lyon », 1 autre image « bracelet tissu cadeau », 1 autre image « bijou poignet tissu » etc etc.
    • Vous avez des outils qui permettent de voir si les attributs alts sont remplies pour votre page : L’extension web developer par exemple. Et vous avez aussi l’extension SEO Quake qui vous l’affiche dans son rapport « DIAGNOSTIC ».
  • Et enfin le dernier point : Ajouter une légende descriptive sous l’image, avec nos mots-clefs pour contextualiser notre image et donner plus d’informations à Google et l’utilisateurice. Ça aussi, la majorité des CMS vous permettent de le faire simplement et rapidement.

A noter : Les images affichées grâce à du CSS (comme les images en background, en fond) ne sont pas prises en compte, tout comme leur attribut alt. Google ne va indexer que les images affichées via la balise HTML classique.

    balise alt image optimisation

    Rappel des règles SEO :

    Voilà, tout ça c’était pour la partie description. Et là aussi, les mêmes règles s’appliquent toujours :

    1- On fait attention à faire un contenu qui soit UNIQUE et utile, donc on ne DUPLIQUE PAS les titres, les attributs alt, les légendes etc.

    2- Et comme d’habitude aussi, on cherche à optimiser pour le SEO et les utilisateurices, mais on évite de SUR-optimiser au risque d’avoir de mauvaises surprises !

    Envie de booster votre référencement naturel ?

    La checklist SEO ultime !

    Pour vous aider à y voir plus clair pour améliorer la position SEO de votre site, je vous présente la checklist SEO complète pour votre site (à télécharger) et quelques astuces à mettre en place pour optimiser votre référencement naturel !

    Pour télécharger la liste de 4 pages, il vous suffit de remplir le formulaire ci-dessous :
      apprendre seo tutoriel liste refrencement

      Résumé des actions étape par étape pour optimiser vos images

      Donc si on reprend, dans l’ordre, pour optimiser mes images en terme de SEO, de performances et d’accessibilité, vous devez :

      • Re-dimensionner l’image à la bonne taille sur un logiciel de retouche photo
      • L’exporter pour le web avec la taille la plus légère possible sans trop dégrader votre image
      • Option : La passer en plus dans un logiciel comme ImageOptim pour l’alléger encore un peu
      • La renommer correctement de manière descriptive et avec quelques mots clefs
      • L’uploader sur votre serveur ou votre CMS
      • Remplir la balise alt avec une description de l’image contenant des mots clefs
      • Ajouter une légende descriptive sous l’image avec nos mots-clefs !
      • En option  : Utiliser une extension WordPress comme Smush
      checklist optimisation image web

      Et voilà, votre image est fin prête 🙂 !

      Plus qu’à répéter toutes ces étapes… Pour chacune de vos images ! Et oui, le bon travail prend du temps !

      Courage à vous, j’espère que vous aurez appris quelques trucs et avec plaisir si vous voulez partager vos tips et outils en commentaires !

      Et on se retrouve dans la prochaine vidéo sur le marketing digital et éthique !

      Bye-bye !

      Inscrivez-vous maintenant pour
      découvrir  mes derniers conseils et recevoir les nouvelles ressources marketing  pour développer votre projet !

      marketing communication ESS

      Inscrivez-vous maintenant pour
      découvrir  mes derniers conseils et recevoir les nouvelles ressources marketing  pour développer votre projet !

      Je partage régulièrement mes conseils en communication, découvertes entrepreneuriale et nouvelles ressources marketing éthique pour vous permettre d'apprendre construire des fondations solides pour la communication digitale (et responsable) de votre structure, qui vont vous apporter la sérénité pour faire grandir votre business.

      Inscrivez-vous ci-dessous dès maintenant pour recevoir mes conseils par mail... Ou même proposer le prochain sujet  d'article !