Mai 21, 2020 | Webmarketing

L’art d’optimiser ses images pour le web et le SEO

Savez-vous que les images impactent le référencement naturel et la performance de votre site ?

Tout d’abord, une page web doit comporter au moins une image pour booster sa visibilité, appuyer vos propos et créer une atmosphère.

Il faut savoir que les images représentent ce qu’il y a de plus lourd sur une page web, il est donc primordial d’optimiser leur poids.

Voici les bonnes pratiques SEO pour vos images.

Optimiser l’image avant de l’importer

Les internautes aiment les sites rapides donc Google aussi…

Pour optimiser le temps de chargement de votre site vous devez alléger le poids de vos images.

Google aime les sites rapides. Et si vous lui imposer des images trop lourdes, il ne sera pas content car vos pages auront un chargement très lent.

 

Sur ce sujet les professionnels du web ne sont pas tous d’accord entre eux…

Il y a ceux qui disent qu’on peut ne pas s’embêter à optimiser les images (les redimensionner et/ou les compresser) avant de les importer dans la bibliothèque et d’autres qui disent de le faire et de suivre les règles suivantes :

  • Une image ne doit pas dépasser idéalement 200 Ko
  • Et une page ne doit pas contenir idéalement plus de 1Mo d’images

Je vais vous parler plus bas d’une extension WordPress qui permet d’optimiser les images déjà en ligne et toutes vos prochaines images automatiquement.

Je l’utilise sur mes sites mais avant d’importer les images je préfère quand même les redimensionner. Et si la photo est vraiment trop lourde je l’optimise sur Photoshop également.

Optimiser une image web avec Photoshop

Si vous avez beaucoup d’images à traiter, Photoshop vous fera gagner du temps.

Le process pour optimiser une image :

1- Ouvrez votre image dans Photoshop

2- Fichier > Exporter > Enregistrer pour le web

3- Changez la taille de votre image en fonction de son emplacement sur le site

4- Ajustez la qualité entre 50% et 100% en fonction du poids de l’image

5- Exportez l’image

Optimiser une image web avec photoshop

Cliquez sur l’image pour l’agrandir

Si vous avez plusieurs images, ou pour éviter de répéter l’opération, vous pouvez créer une Action qui consiste à automatiser le process :

1- Allez dans « Fenêtre » > Action

2- Créez une nouvelle action

3- Répétez le process d’optimisation image

4- Arrêter l’enregistrement de l’action

Maintenant vous n’aurez plus qu’à cliquer sur votre action pour exporter en un clic vos images optimisées.

Modifier la taille de l’image avec Paint

Si vous n’avez pas de logiciel et que vous utilisez un PC, vous pouvez modifier la taille de vos images avec Paint. Sur Mac c’est le logiciel Preview, option « Ajuster la taille ».

Pour cela, il suffit de faire clic droit sur votre image, cliquez sur « Modifier ». L’image s’ouvre dans Paint.

Cliquez sur « Redimensionner », cochez « Pixels ». Choisissez la valeur souhaitée. Sachant que cela ne sert à rien de dépasser 1920px.

Lorsque vous enregistrer votre valeur, vous aurez l’information concernant la taille de l’image en bas. Essayez de ne pas dépasser 200 ko.

Redimensionner image pour le web avec Paint

Optimiser une image web avec Imagify

Imagify est un plugin créé par WP Rocket, une extension géniale qui optimise les performances de votre site.

L’extension Imagify, une fois installée sur votre site WordPress, va optimiser automatiquement les images téléchargées. Vous avez même la possibilité de les redimensionner automatiquement mais cela ne veut pas dire qu’il faut télécharger quand même de très grandes images.

Vous avez le choix entre l’optimisation normale, agressive ou ultra. La dernière altère la qualité de l’image.

Optimiser images web avec Imagify

Utiliser le format webP pour vos images

Le format webP allège encore plus le poids de vos images.

Le plugin Imagify, en plus d’optimiser vos images, peut les convertir automatiquement en format webP.

Il vous suffit de choisir l’une des 2 options :

  • Utiliser des règles de réécriture
  • Utiliser des balises <picture>

La première option ajoute des règles de réécriture dans le fichier de configuration du site (.htaccess) et n’altère pas le code de vos pages. Cependant cela ne fonctionne pas avec un CDN.

La seconde option remplace les balises <img> par des balises <picture>. Ceci est la solution conseillée mais certains thèmes peuvent casser, donc assurez-vous que tout fonctionne correctement.

Je vous conseille donc de cocher la première option, règles de réécriture.

Bien renommer vos images et booster le SEO

Le format

Vous pouvez utiliser les formats d’images JPG, PNG ou GIF.

Je vous conseille d’utiliser le format png que pour les logos ou illustrations nécessitant un fond transparent car ce format est plus lourd que le jpg.

Les formats gif ne peuvent pas avoir de balise alt, ce qui est dommage pour le référencement.

Privilégiez donc le format jpg.

Le nom des images

Si vous téléchargez des images nommées comme ceci « img856 », vous ne profitez pas du pouvoir du référencement !

Renommez correctement vos images avant de les télécharger. Utilisez seulement les minuscules et le tiret « -« .

N’utilisez pas de caractère spécial, d’accent, d’espace ou underscore.

Exemple : « comment-devenir-photographe-professionnel.jpg »

Assurez-vous que les nom de l’image soit bien une description textuelle de l’image.

Le texte alternatif

S’il y a bien un champ WordPress à compléter obligatoirement c’est bien celui ci.

La balise alt permet à Google de lire votre image et de la référencer. En utilisant les mots clés adaptés, vous augmenterez la position de votre image dans Google images.

Le Alt Text s’affiche aussi sur la page si votre image ne parvient pas à se charger. Et il est également utilisé par les lecteurs d’écran pour les malvoyants.

Le titre

Le titre est un texte qui s’affiche au survol de la souris, vous pouvez laisser le nom laissé au téléchargement de l’image.

La légende

La légende apporte du contenu autour de l’image.

Avec certains thèmes, la description sera affichée sous la photo.

Certains diront que ça n’apporte rien pour le référencement, je ne suis pas d’accord avec eux. Car tout contenu qualitatif apporte de la valeur.

Image WordPress texte alt titre légende et description

Voilà, maintenant les images pour le web n’ont plus de secret pour vous.

Si vous souhaitez remplacer vos images existantes pour mettre à jour les dimensions ou changer complètement de photo, utilisez le plugin Enable Media Replace. Il permet également de modifier le nom de l’image avec celui de la nouvelle image téléchargée.

Si vous souhaitez changer seulement le nom, essayez le plugin Media File Renamer.

Un dernier conseil, veillez à utiliser des images libres de droit.

Télécharge la checklist

39 points à vérifier avant de lancer son site web

Pour réussir le lancement de son site web et partir sur de bonnes bases.

Plugins WordPress : les indispensables en 2021

Plugins WordPress : les indispensables en 2021

Chaque année je partage la mise à jour de ma liste d'extensions WordPress que je considère indispensables. Bien évidemment, vous n'avez pas à toutes les utiliser. Choisissez les plugins en fonction de vos besoins. A quoi sert une extension WordPress ? Une extension...

Mettre à jour WordPress en toute sécurité

Mettre à jour WordPress en toute sécurité

Les mises à jour sur votre site WordPress permettent d'ajouter de nouvelles fonctionnalités ou d'apporter des corrections. Elles concernent la version de WordPress, les extensions, les thèmes et les traductions. Les mises à jour doivent être effectuées régulièrement....