Avoir de belles images c’est bien, avoir des images légères et qui parlent à Google c’est mieux !
Des images lourdes vont ralentir, voir faire planter l’affichage d’une page Web lors de leurs chargements, c’est encore plus vrai lorsque la page est ouverte depuis un appareil mobile.
Pourquoi et comment alléger ses images ?
Redimensionner – Compresser
Les photos prises par un appareil photo ou un smartphone ont toujours des dimensions bien trop grandes pour le Web, 2000 pixels et plus. C’est également vrai pour les images libres de droit téléchargées sur les banques d’images gratuites (Pixabay, Unsplash…) ou achetées.
Pour le poids c’est la même chose, les photos initiales dépassent souvent les 1000 Ko (= 1 Mo) beaucoup trop lourd pour le Web, un poids de 200 Ko et moins est recommandé. Plus le visuel est léger, plus son affichage sera rapide.
Conseil ! Toujours travailler sur une copie de vos images
Pour votre contenu (page ou article) une image de + ou – 800 pixels est souvent suffisante.
Pour les images destinées à être vue en grand (diaporama, galerie, entête,…) : 1200 à 1500 pixels
- Outils en ligne gratuits, Iloveimg et imagecompressor.com pour redimensionner et alléger vos images avant de les télécharger sur votre site. En faisant une petite recherche internet vous en trouverez d’autres.
Pourquoi et comment renommer ses visuels ?
Les moteurs de recherche (Google, Ecosia, Lilo, Bing, Yahoo,…) ne sont pas capables de voir les images mais ils savent lire ! Le texte est donc indispensable si on veut que les images participent au référencement naturel (SEO) du site.
Renommer le fichier image AVANT le téléchargement dans WordPress
- Mots clés séparés par des tirets (-)
- Attention ! Ne jamais mettre d’espace, d’accent ou de caractères spéciaux dans le nom des fichiers images (.jpg, .png, .gif…)
L’image dans WordPress
1. Titre
On peut donner un nouveau nom après le téléchargement dans WordPress, ou garder le nom du fichier, ce titre est simplement visible lorsque l’on survole l’image avec le pointeur de la souris (info bulle).
2. Balise Alt
Quelques mots clés pour la décrire, toujours en rapport avec le contenu pour :
- Afficher le texte qui remplacera l’image lors d’un problème technique (bug, lenteur de chargement…)
- Rendre l’image accessible au lecteur d’écran pour les personnes malvoyantes
- Booster votre SEO (référencement naturel) inclure des mots clés, justifiés par le contenu et qui donnent du sens au visuel (recherches dans Google images, renforcer la pertinence de votre contenu…)
3. Légende (optionnelle)
Le texte va se placer sous l’image, emplacement idéal pour y mettre un crédit photo.
L’exemple ci-dessous résume les actions à faire avant le téléchargement du média et les champs à remplir dans WordPress
Une bonne routine lorsque vous ajoutez des images sur votre site :
- Redimensionner
- Compresser
- Renommer les fichiers
- Donner un titre
- Remplir la balise Alt
N’oublions pas que les moteurs de recherche sont nos premiers lecteurs !