Renommer ses images pour le web – Tutoriel

par 15 mars 2020

Depuis que je m’essaie à la création de sites Internet (quelque part entre 2011 et 2012), je rage (intérieurement) contre tous les sites que je vois et sur lesquels les images ne sont pas renommées. Pourquoi me direz-vous ? Parce que c’est mal. Ok, ça nécessite un peu plus d’explications que ça (je vous les donne juste après, avec les bonnes pratiques) mais sérieusement, si vous avez la main sur l’administration de votre site Internet, renommez vos images ! (même si c’est chiant fastidieux).

Renommer ses images : un bon point pour le référencement !

Et oui, c’est lié, évidemment ! Google est capable de lire les noms des images dans le code source (les humains aussi d’ailleurs) et donc forcément, il y a un impact sur votre SEO. Ne me faites pas dire ce que je n’ai pas dit : ce n’est pas en renommant vos photos que vous atteindrez la position 1 dans les résultats de recherche de votre moteur préféré, surtout si le reste laisse à désirer. Bien sûr, cet impact est léger.

Mais pour moi, le SEO d’un site, c’est une addition de plein de trucs : la balise title, le H1, les H2 et H3, l’attribut alt des images (j’y reviens après), du contenu texte évidemment, les balises schema, le poids de la page, etc. Bien sûr on peut argumenter que tel ou tel point n’est pas vraiment important. Oui, certains critères ont plus de poids que d’autres. Mais quand on peut optimiser (et surtout facilement), pourquoi s’en priver ?

Exemple avec la requête “création de site Internet”

Une image valant mieux que 1 000 mots, démonstration.

Arrêtez d’envoyer des photos qui s’appellent DSC195826.JPG. Avec ce nom de photo, on ne comprend rien et donc Google non plus. A la place, envoyez une photo qui serait renommée en creation-site-internet.jpg. Vous voyez la différence ? Il s’agit juste d’un peu de discipline, même si l’heure est plutôt à faire vite (plutôt que faire bien), vu que visuellement c’est pareil.

Renommer ses photos pour mieux les retrouver

Toujours avec le même exemple, ça va être drôle le jour où on va vous demander de retrouver la photo DSC195826.JPG dans votre ordinateur. Tandis que si elle avait été renommée, la recherche Windows ou le Finder de MAC aurait pu vous la ressortir, du moment que vous effectuez la recherche avec un des termes qui composent le nom de l’image.

Si vous avez un site Internet créé avec un CMS, WordPress par exemple, vous avez probablement déjà vu à quel point la bibliothèque de médias se remplit vite. Certes, il existe l’outil de recherche, mais essayez donc d’aller chercher cette photo DSC195826.JPG : ça risque d’être fun…

Un cas pratique avec un client

Au moment de la refonte du site d’un de nos clients, j’ai formé la personne qui allait l’administrer de renommer les photos en suivant certaines bonnes pratiques. Son site inclut notamment une section avec les séances de cinéma : je lui ai conseillé dans ce cas précis de renommer toutes les affiches selon le modèle suivant : cinema-titre-du-film.jpg

Elle peut de cette manière retrouver toutes les affiches en quelques secondes dans la bibliothèque de médias de WordPress, et éventuellement supprimer celles devenues obsolètes.

Les bonnes pratiques pour renommer ses photos

Il n’y en a pas 36 en réalité, donc voici ce que je recommande pour renommer ses images avant de les envoyer sur son site Internet :

  • utilisez des minuscules pour le nom du fichier y compris l’extension : .JPG, .PNG, .GIF deviennent .jpg, .png, .gif,
  • n’utilisez aucun caractère spécial, aucun caractère “exotique”, et surtout pas d’accents,
  • ne séparez pas les mots qui composent le nom de la photo par des espaces,
  • séparez les mots par des tirets (-),
  • à l’inverse, ne séparez pas les mots par des underscores (_),
  • si plusieurs photos portent le même nom : ajouter -01, -02, -03 à la fin,
  • insérez des mots clefs pertinents,
  • supprimez les mots qui ne servent à rien (les “stop words”) : de, à, aux, du, le, la, les.

C’est tout !

Pourquoi renommer ses photos comme ça ?

Pas de majuscules

Si vraiment ça vous embête, je vous propose ça à la place : CreAtiOn-SitT-iNteRneT.JPG
Il fallait se fixer une règle, les minuscules systématiques étaient ce qu’il y avait de plus simple.

Pas de caractères spéciaux, de caractères exotiques ou d’accents

Les caractères spéciaux ne sont souvent pas compris donc pas lus, et vous risquez de passer à côté de votre optimisation SEO. Vous voulez vraiment mettre ça dans vos noms de photos : & ~ # { ( [ `\ ^ @ ) ] } $ £ % * µ § ? (le dernier c’était vraiment le point d’interrogation qui finalise la question)

Pour les accents, je ne rentre pas dans le détail, c’est une histoire d’encodage. Retenez simplement cet exemple :
création-site-internet.jpg deviendra cr%39ation-site-internet.jpg

Qu’est-ce que j’appelle “caractères exotiques” ? 网站创建.jpg par exemple. Si votre site est rédigé en mandarin, ça marche ; sinon, encore une fois, renommez vos photos.

Pas d’espaces

Même chose que précédemment, c’est toujours lié à l’encodage ASCII. Même exemple (je remets volontairement l’accent, histoire de se marrer un peu) :
création site internet.jpg deviendra dans le code source cr%39ation%20site%20internet.jpg

Tirets et underscores

A priori, Google comprendrait désormais les underscores (le tiret du 8 pour les novices). Mais pourquoi prendre le risque alors qu’on sait qu’il n’a strictement aucun problème de compréhension avec le tiret (celui du 6). Donc à la place de creation_site_internet.jpg, privilégiez creation-site-internet.jpg

La sérialisation

Si jamais toutes vos photos devaient avoir un nom identique – ça peut arriver – utilisez les chiffres pour les différencier :
creation-site-internet-01.jpg
creation-site-internet-02.jpg
creation-site-internet-03.jpg
creation-site-internet-04.jpg
etc.

Les mots clefs pertinents

Déjà des mots clefs, c’est bien. Encore une fois, quel nom de photos vous préférez entre les deux : DSC195826.JPG et creation-site-internet.jpg. Google aussi préfère celui que vous avez choisi. 🙂

Supprimez les “stop words

Toutes les prépositions qui ne servent à rien ou à pas grand chose à la bonne compréhension (de, à, aux, du, le, la, les, etc.). Par exemple, vous pourriez renommer Apprendre_à bien jouer du Piano.jpg en apprendre-bien-jouer-piano.jpg ou encore apprendre-jouer-piano.jpg. On comprend encore aisément le sens de ce qu’on veut mettre en avant.

Les trucs à éviter

Je n’en ai trouvé que deux pour le moment mais j’enrichirai au fur et à mesure

JPEG ou JPG ?

C’est le même format. Sur votre ordinateur, vous pouvez conserver les deux, pas de problème. Vous pouvez même changer manuellement l’extension de .jpeg en .jpg, ça ne pose pas de soucis.

En revanche, sur WordPress, privilégiez l’extension .jpg.

BMP, RAW et les autres extensions

Le .bmp, c’est trop lourd pour être utilisé sur une page web, donc on laisse tomber.

Du coup, pareil pour le .raw, laissez tomber, c’est le format utilisé par les photographes pour travailler leurs photos, en aucun cas un format adapté au web.

C’est terminé pour ce tutoriel. S’il vous a plu, ou si vous souhaitez voir apparaître un tuto qui concerne le web ou l’informatique, n’hésitez pas à m’en faire part dans les commentaires. Surfez sur le web, videz le cache !
15 Partages
Partagez15
Tweetez
Partagez