Renommer ses images pour le web – Tutoriel

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.

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.

BONUS : si vous pouvez, des trucs sur les images à faire en plus

Une fois vos images renommées “proprement”, il reste encore un peu de boulot.

Redimensionner les images

Un autre tuto sera consacré au redimensionnement des images, avec les tailles que j’utilise généralement sur les sites que je construis, mais dans tous les cas, redimensionner ses images avant de les envoyer en bibliothèque de médias est essentiel, pour alléger le poids des images et ainsi améliorer les temps de chargement de vos pages.

Renseigner l’attribut alt. (ou texte alternatif)

Google, et les moteurs de recherche en général, ne peuvent littéralement pas “voir” ce que représente une image. Faites le test en recherchant “pizza aux anchois” sur Google Images : à un moment donné, vous tomberez sur une photo d’Adriana Karembeu (une des légendes du SEO). Cela prouve qu’avec un texte optimisé sur une requête donnée, vous pourriez afficher n’importe quelle photo, même si elle n’a aucun rapport avec la requête en question.

Renseignez donc l’attribut alt. (aussi appelé texte alternatif) de vos photos en bibliothèque de médias pour aider les moteurs à mieux comprendre la sémantique de votre texte et aider au référencement de vos pages ou articles.

Utilisez une extension de compression des images

En plus de redimensionner les images, je vous recommande aussi de les compresser au moment de l’envoi dans la bibliothèque de médias de WordPress (ou du gestionnaire de médias d’un autre CMS). Pas d’inquiétude, il existe plusieurs plugins pour cela – gratuits ou payants – simples à utiliser et qui automatisent la compression. En voici une sélection rapide (pas d’ordre de préférence), parmi les plus connus :

• Smush par WMU DEV,
• Robin Image Optimizer par Webcraftic,
• Imagify par WP Media,
• EWWW Image Optimizer par Exactly WWW,
• ShortPixel Image Optimizer par ShortPixel,

Chez Perspectives Marketing, nous utilisons Imagify (dans sa version payante car beaucoup d’images à traiter), car il cohabite très bien avec WP Rocket (le meilleur plugin de cache !). Normal car WP Rocket est aussi édité par WP Media. De plus Imagify permet aussi la conversion des images au format .webp, ce qui allège encore plus le poids des images par rapport au classique .jpg.

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 !