SEO des images et performance : comment optimiser correctement les images dans WordPress

SEO des images et performance : comment optimiser correctement les images dans WordPress

Les images font vivre un site web. Elles expliquent le contenu, instaurent la confiance, présentent des produits, des personnes, des projets ou des processus de travail et améliorent l'expérience utilisateur. En même temps, les images sont l'une des causes les plus fréquentes de lenteur des sites WordPress. Les photos provenant directement d'un appareil photo ou d'un smartphone, en particulier, sont souvent bien trop grandes pour être utilisées sur le web.

Une seule image non optimisée peut peser plusieurs mégaoctets. Si plusieurs images de ce type sont chargées sur une page, le temps de chargement s'allonge considérablement. Cela affecte les visiteurs, les utilisateurs mobiles, les moteurs de recherche et la qualité générale de votre site web.

Pourquoi les images sont-elles si importantes pour le temps de chargement ?

Les images représentent souvent une grande partie de la taille totale d'une page. Alors que le texte HTML est généralement très léger, les images peuvent rapidement occuper plusieurs mégaoctets. C'est particulièrement problématique sur les appareils mobiles ou avec des connexions lentes.

Une page qui charge lentement peut inciter les visiteurs à quitter le site avant même d'avoir vu votre contenu. Les moteurs de recherche évaluent également l'expérience utilisateur et la qualité technique d'un site web. Un site rapide est donc non seulement plus agréable pour les visiteurs, mais constitue également une meilleure base pour le SEO.

Les problèmes typiques causés par des images non optimisées sont :

• temps de chargement longs : les fichiers volumineux prennent plus de temps à télécharger.
• consommation de données élevée : particulièrement gênant pour les utilisateurs mobiles.
• mauvais Core Web Vitals : les grandes images peuvent dégrader les indicateurs de performance importants.
• décalages de mise en page : l'absence de dimensions d'image peut entraîner des sauts visibles lors du chargement.
• charge serveur inutile : les fichiers très volumineux pèsent sur l'espace de stockage et la distribution.

1. Bien préparer les images avant le téléchargement

Le meilleur moment pour optimiser une image est avant de la télécharger dans WordPress. Évitez autant que possible de télécharger des images originales non retouchées directement depuis un appareil photo ou un smartphone. Ces images font souvent 3000, 4000 pixels de large ou plus, ce qui est bien trop grand pour le contenu normal d'un site web.

Avant de télécharger, réfléchissez à l'endroit où l'image sera utilisée :

• Image de blog ou image à la une : une largeur de 1200 à 1600 pixels suffit souvent.
• Image au sein d'un texte : une largeur de 800 à 1200 pixels suffit souvent.
• Image "Hero" sur toute la largeur : environ 1600 à 2000 pixels de large selon la mise en page.
• Miniature ou petite image d'aperçu : des dimensions nettement plus petites suffisent.
• Image de produit : dépend de la mise en page de la boutique et de la fonction de zoom.

Ces valeurs ne sont pas des règles fixes, mais des points de repère pratiques. L'essentiel est que l'image ne soit pas beaucoup plus grande que ce qu'elle sera réellement affichée sur le site.

2. Recadrer et redimensionner les images directement dans WordPress

Il n'est pas indispensable d'utiliser un logiciel graphique professionnel pour effectuer des ajustements simples. WordPress propose des fonctions d'édition de base dans la médiathèque.

Pour cela, allez dans le tableau de bord WordPress sous Médias > Médiathèque, cliquez sur une image et choisissez Modifier l'image. Là, selon la version de WordPress, vous pouvez effectuer des ajustements simples, par exemple :

• Recadrer l'image,
• Faire pivoter l'image,
• Retourner l'image,
• Redimensionner l'image,
• Définir de nouvelles dimensions.

Ces fonctions sont utiles pour des corrections rapides. Pour une optimisation systématique de nombreuses images, des logiciels de retouche photo spécialisés ou des plugins d'optimisation sont généralement plus efficaces.

3. Réduire la taille du fichier : bien utiliser la compression

Outre les dimensions, la taille du fichier est déterminante. Deux images peuvent avoir la même largeur mais des tailles de fichier très différentes. Cela dépend du format, de la compression, du motif et du réglage de la qualité.

Pour les photos, une légère compression est généralement à peine visible, mais réduit considérablement la taille du fichier. Pour les graphiques, les captures d'écran ou les logos, il convient d'être plus prudent pour que les bords et le texte ne deviennent pas flous.

À titre indicatif :

• petites images de contenu : si possible moins de 100 à 200 Ko
• images à la une plus grandes : souvent moins de 300 à 500 Ko est réaliste
• images Hero : à garder aussi légères que possible, selon la mise en page et la qualité
• logos et icônes : souvent possible d'être beaucoup plus petit

Ces valeurs dépendent du motif et de l'usage prévu. Une photo riche en détails nécessite plus de mémoire qu'un graphique simple.

4. Choisir le bon format d'image

Le format d'image a une grande influence sur la qualité et la taille du fichier. Tous les formats ne conviennent pas à tous les usages.

5. WebP : un format moderne pour des fichiers plus petits

Le WebP est un format d'image moderne qui permet souvent d'obtenir des fichiers plus petits que les fichiers JPEG ou PNG classiques, avec une qualité visuelle comparable. WordPress supporte nativement le WebP depuis la version 5.8, à condition que l'environnement serveur supporte le format.

L'avantage : des fichiers d'image plus petits peuvent être chargés plus rapidement et réduisent la quantité de données transférées. C'est particulièrement précieux pour les visiteurs mobiles et les sites web riches en images.

Cependant, vous ne devriez pas considérer le WebP comme la solution unique. Une image WebP peut également être trop grande si elle est téléchargée avec des dimensions inutilement élevées ou une mauvaise compression. Le format, les dimensions et la compression doivent être cohérents.

6. Textes Alt : importants pour l'accessibilité et la recherche d'images

Le texte alternatif, ou texte Alt, décrit le contenu ou l'usage d'une image. Il est utilisé par les lecteurs d'écran et aide les moteurs de recherche à mieux classer le contenu de l'image. Si une image ne peut pas être chargée, le texte Alt peut également servir d'information de remplacement.

Un bon texte Alt décrit l'image précisément et dans le contexte de la page. Il ne doit pas être surchargé de mots-clés. Google recommande des textes Alt utiles et riches en informations, n'utilisant les mots-clés que de manière appropriée et naturelle.

Mauvais exemple :

Hébergement WordPress Suisse pas cher rapide acheter hébergement web image SEO

Meilleur exemple :

Capture d'écran de la médiathèque WordPress avec la fenêtre d'édition d'image ouverte.

Pour les images décoratives qui n'apportent aucune valeur ajoutée au contenu, un texte Alt vide peut être judicieux. Ainsi, les utilisateurs de lecteurs d'écran ne sont pas importunés par des informations inutiles.

7. Optimiser les noms de fichiers avant le téléchargement

Le nom du fichier peut également aider les moteurs de recherche et les rédacteurs à mieux comprendre le contenu de l'image. Évitez de télécharger des images avec des noms génériques comme IMG_4837.jpg ou DSC00091.png.

Des noms de fichiers courts et descriptifs sont préférables :

• wordpress-mediatheque-modifier-image.webp
• formulaire-contact-wordpress-exemple.jpg
• curiaweb-wordpress-hosting-dashboard.png

Utilisez des lettres minuscules, des traits d'union au lieu d'espaces et des termes aussi clairs que possible. N'abusez pas des mots-clés. Le nom du fichier doit décrire ce que l'image montre.

8. Titre, légende et description dans WordPress

Dans la médiathèque WordPress, il existe d'autres champs que le texte Alt : Titre, Légende et Description. Ces champs ont des rôles différents.

• Titre : Titre de l'image interne ou visible, selon le thème et l'utilisation.
• Légende : Peut être affichée sous l'image et est souvent lue par les visiteurs.
• Description : Peut être utile pour les pages de fichiers joints ou pour l'organisation interne.
• Texte Alt : Important pour l'accessibilité et le contexte de l'image.

Toutes les images n'ont pas besoin de tous les champs. Cependant, pour les images explicatives importantes, un remplissage soigné en vaut la peine.

9. Utiliser judicieusement le Lazy Loading

Le Lazy Loading signifie que les images ne sont chargées que lorsqu'elles sont nécessaires dans la zone visible du visiteur. Ainsi, le navigateur n'a pas besoin de charger immédiatement toutes les images lors du premier affichage de la page.

WordPress supporte déjà le Lazy Loading par défaut pour les images. Néanmoins, vous devriez vérifier si votre thème, votre constructeur de page (Pagebuilder) ou votre plugin de performance le gère correctement.

Important : L'image la plus importante dans la zone visible supérieure, par exemple une image Hero ou une grande image à la une, ne doit pas être retardée inutilement. Sinon, le Largest Contentful Paint, un indicateur important des Core Web Vitals, pourrait se dégrader.

10. Comprendre les tailles d'image et les miniatures WordPress

WordPress crée automatiquement différentes tailles d'image lors du téléchargement. Selon les réglages et le thème, cela inclut par exemple des miniatures, des tailles moyennes et des versions larges.

Cette fonction est utile car WordPress peut proposer une taille d'image adaptée selon l'affichage. Une petite miniature n'a alors pas besoin d'être chargée comme une énorme image originale.

Vérifiez sous Réglages > Médias quelles sont les tailles standard enregistrées. De nombreux thèmes et Pagebuilders créent des tailles d'image supplémentaires. C'est normal, mais cela peut nécessiter de l'espace de stockage supplémentaire si vous avez beaucoup de fichiers.

11. Utiliser des plugins d'optimisation d'images

Des plugins comme Imagify, ShortPixel, EWWW Image Optimizer ou des solutions similaires peuvent compresser automatiquement les images et parfois les convertir dans des formats modernes comme le WebP. Cela fait gagner du temps, surtout pour les grandes médiathèques.

Les fonctions typiques de ces plugins sont :

• compression automatique lors du téléchargement,
• optimisation ultérieure des images existantes,
• génération de WebP,
• sauvegarde des images originales,
• optimisation de différentes tailles d'image WordPress,
• parfois des services de CDN ou d'optimisation externe.

Avant l'utilisation, vérifiez si l'optimisation se fait localement sur votre serveur ou via un service externe. Avec les services externes, des questions de protection des données et de contrat peuvent être pertinentes.

12. Bien utiliser les images dans les Pagebuilders

Les Pagebuilders comme Elementor, Divi ou d'autres facilitent l'insertion d'images. Cependant, cela crée rapidement le risque que des images trop grandes soient intégrées à de petits emplacements.

Faites particulièrement attention dans les Pagebuilders à :

• choisir la taille d'image adaptée,
• ne pas utiliser d'images originales géantes pour de petites vignettes,
• compresser les images d'arrière-plan,
• tester l'affichage mobile,
• utiliser les sliders avec parcimonie,
• ne pas charger d'animations d'image inutiles,
• vérifier les textes Alt même pour les éléments du constructeur.

Les sliders contenant plusieurs grandes images, en particulier, peuvent fortement dégrader les temps de chargement. N'utilisez de tels éléments que s'ils apportent réellement une valeur ajoutée.

13. Core Web Vitals et images

Les images peuvent influencer plusieurs indicateurs des Core Web Vitals. Le Largest Contentful Paint (LCP) est particulièrement important. Cet indicateur décrit, pour faire simple, le moment où l'élément de contenu visible le plus important dans la partie supérieure de la page est chargé. Souvent, cet élément est une grande image.

Le Cumulative Layout Shift (CLS) peut également être influencé par les images. Si la largeur et la hauteur d'une image ne sont pas correctement indiquées, la mise en page peut se décaler pendant le chargement.

Pour de bons résultats, vous devriez :

• optimiser très fortement les images Hero,
• définir correctement les dimensions des images,
• éviter ou gérer correctement le Lazy Loading pour les images importantes du haut de page,
• éviter les images d'arrière-plan inutilement grandes,
• utiliser des formats modernes,
• configurer proprement la mise en cache et la performance du serveur.

De bons indicateurs Core Web Vitals ne proviennent pas seulement du WebP ou d'un plugin d'optimisation. Ils sont le résultat de l'hébergement, du thème, de la mise en cache, de l'optimisation des images, du CSS, du JavaScript et d'une mise en page propre.

14. SEO : comment les images peuvent apporter une visibilité supplémentaire

Des images optimisées peuvent apporter du trafic supplémentaire via la recherche d'images Google. C'est particulièrement pertinent pour les produits, les guides, les références, les infographies, les recettes, les tutoriels, les projets locaux et les services visuels.

Pour un meilleur SEO des images, vous devriez :

• utiliser des noms de fichiers descriptifs,
• écrire des textes Alt utiles,
• placer les images de manière thématiquement adaptée dans le texte,
• utiliser des légendes d'images si elles sont utiles aux visiteurs,
• utiliser des images de haute qualité et uniques,
• ne pas utiliser aveuglément des images de stock sans valeur ajoutée,
• soutenir la page elle-même avec un bon contenu textuel.

Les moteurs de recherche n'évaluent pas les images isolément. Le contexte de l'ensemble de la page est également important. Une bonne image sur une page médiocre générera rarement une forte visibilité à elle seule.

15. GEO : rendre les images plus compréhensibles pour les systèmes de recherche par IA

Le GEO, ou Generative Engine Optimization, ne concerne pas seulement le texte. Les systèmes de recherche assistés par l'IA et les moteurs de réponse profitent de pages clairement structurées, de descriptions d'images compréhensibles et d'un contexte propre.

Lorsque les images possèdent des textes Alt explicatifs, des noms de fichiers adaptés et des légendes utiles, elles peuvent être mieux intégrées dans le contexte global de la page. C'est particulièrement pertinent pour les guides, les documentations techniques, les comparaisons de produits et les explications visuelles étape par étape.

Particulièrement utiles pour le GEO :

• descriptions d'images précises,
• texte clair autour de l'image,
• noms de fichiers explicites,
• pas de surcharge purement décorative,
• guides structurés avec des captures d'écran adaptées,
• images actuelles et originales plutôt que des photos de stock quelconques.

16. Erreurs fréquentes avec les images WordPress

De nombreux problèmes de performance proviennent d'erreurs récurrentes. En les évitant, vous améliorerez considérablement la qualité technique de votre site web.

• Télécharger directement les images originales : les photos d'appareils ou de smartphones sont généralement bien trop grandes.
• Utiliser le PNG pour les photos : le PNG est souvent inutilement lourd pour les photos.
• Laisser les textes Alt vides : les images importantes perdent leur contexte et leur utilité en matière d'accessibilité.
• Faire du bourrage de mots-clés (Keyword Stuffing) : les textes Alt surchargés semblent peu naturels et peuvent nuire.
• Utiliser trop de sliders : plusieurs grandes images ralentissent le chargement de la page.
• Ne pas effectuer de tests mobiles : c'est justement sur smartphone que les grandes images se remarquent le plus.
• Ne pas vider le cache : les images optimisées ne sont peut-être pas distribuées immédiatement.
• Ne pas sauvegarder les originaux : une compression trop forte est difficile à annuler sans sauvegarde.

Procédure recommandée

1. Vérifier l'image avant le téléchargement : est-elle vraiment nécessaire et adaptée ?
2. Réduire les dimensions : ne pas télécharger d'images originales inutilement grandes.
3. Choisir le bon format : JPEG, PNG, WebP ou SVG selon l'usage.
4. Optimiser le nom du fichier : court, descriptif et sans caractères spéciaux.
5. Écrire le texte Alt : précis, utile et sans bourrage de mots-clés.
6. Utiliser la compression : manuellement ou via un plugin.
7. Vérifier le WebP : utiliser des formats modernes si cela est pertinent.
8. Contrôler le Lazy Loading : particulièrement pour les images importantes du haut de page.
9. Tester l'affichage mobile : les images doivent charger rapidement et correctement aussi sur smartphone.
10. Mesurer la performance : utiliser PageSpeed Insights, Lighthouse ou des outils similaires.

Questions fréquentes sur le SEO des images et la performance

Quelle taille doivent avoir les images dans WordPress ?

Cela dépend de l'emplacement. Pour les images de blog normales, une largeur de 1200 à 1600 pixels suffit souvent. Les petites images de contenu peuvent souvent être beaucoup plus petites. Les images Hero nécessitent plus de largeur selon la mise en page, mais devraient tout de même être compressées.

Le WebP est-il meilleur que le JPEG ou le PNG ?

Le WebP peut permettre d'obtenir des fichiers plus petits avec une qualité comparable. Pour de nombreuses images de sites web, c'est un très bon choix. Néanmoins, les dimensions et la compression doivent toujours être optimisées.

Est-ce que WordPress supporte le WebP ?

Oui. WordPress supporte nativement le WebP depuis la version 5.8, à condition que l'environnement serveur supporte le WebP.

Qu'est-ce qu'un bon texte Alt ?

Un bon texte Alt décrit brièvement et précisément ce que l'on voit sur l'image ou quel est le but de l'image dans le contexte de la page. Les mots-clés ne doivent être utilisés que de manière naturelle.

Est-ce que chaque image doit avoir un texte Alt ?

Les images informatives importantes devraient avoir un texte Alt pertinent. Les images purement décoratives peuvent utiliser un texte Alt vide afin que les lecteurs d'écran les ignorent.

Est-ce que des images optimisées améliorent automatiquement mon classement ?

Pas automatiquement. Des images optimisées améliorent le temps de chargement, l'expérience utilisateur, l'accessibilité et la recherche d'images. Cela peut contribuer indirectement à la qualité SEO, mais ne remplace pas un bon contenu ni une structure de page propre.

Quel plugin est adapté pour l'optimisation des images ?

Des solutions connues sont par exemple Imagify, ShortPixel, EWWW Image Optimizer ou des plugins similaires. Vérifiez l'étendue des fonctions, les coûts, la protection des données et si l'optimisation se fait localement ou via des serveurs externes.

Pourquoi mon site charge-t-il lentement malgré le WebP ?

Le WebP seul ne résout pas tous les problèmes de performance. Le thème, le Pagebuilder, le JavaScript, le CSS, la mise en cache, le temps de réponse du serveur, les scripts externes et les dimensions des images jouent également un rôle.