Dépannage WordPress

Images WordPress absentes ou cassées : diagnostic complet

Une image absente peut venir d’un fichier introuvable, d’une URL erronée, d’une taille non générée, d’un blocage CDN, d’un lazy-load ou simplement d’un CSS qui la masque. Le pictogramme cassé et l’espace vide ne se diagnostiquent pas de la même façon.

Lire le conseil

Une image qui manque dans WordPress ne signifie pas toujours que le fichier a disparu. Il peut être présent, mais demandé à une mauvaise adresse, remplacé par une miniature inexistante ou masqué dans la page. Avant de la supprimer de la médiathèque ou de la téléverser à nouveau, retrouvez l’image réellement demandée et ce que le navigateur reçoit.

Identifier l’image qui manque réellement

Notez la page, l’emplacement et les conditions du problème : téléphone ou ordinateur, visite connectée ou non, premier affichage ou défilement. Vérifiez si toutes les images sont touchées ou seulement un format, un ancien dossier ou une galerie. Cette différence permet de commencer par une piste précise plutôt que de désactiver toutes les extensions.

Dans les outils de développement, sélectionnez l’image et regardez l’adresse effectivement utilisée. La propriété currentSrc peut différer du src affiché dans le HTML lorsque le navigateur choisit une variante responsive. Pour une image de fond, cherchez la propriété CSS concernée : il n’y a pas forcément de balise image à cet emplacement.

Ouvrir l’adresse du fichier séparément aide à vérifier son existence, mais ne suffit pas à valider son intégration dans la page. Les conditions d’accès, les règles de sécurité et le chargement peuvent y être différents. Conservez le message utile sans publier de lien privé ou signé dans une capture.

Lire la réponse reçue avant de modifier WordPress

Le panneau Réseau montre la requête, sa destination finale et sa réponse. Les codes de statut HTTP orientent le diagnostic, sans en donner seuls la cause :

  • 404 : la ressource n’est pas trouvée à cette adresse. Comparez le chemin demandé au fichier réellement présent.
  • 403 : l’accès est refusé. Examinez les droits, les règles de protection ou la configuration du service qui répond.
  • 5xx : une couche serveur échoue. Rapprochez l’heure et la requête des journaux avant de modifier le contenu de la page.
  • 200 : contrôlez aussi le type et le contenu reçus. Une page de connexion ou de vérification renvoyée en HTML n’est pas une image valide.

Une requête annulée ou bloquée par le navigateur ne se traite pas comme une erreur 404. Regardez les messages associés et les redirections. Ne forcez pas un type MIME « image » pour masquer une réponse incorrecte : il faut retrouver pourquoi le fichier attendu n’est pas servi.

Comparer l’original aux tailles utilisées dans la page

Dans la médiathèque WordPress, retrouvez le média, son adresse et ses dimensions. Une entrée en base et une miniature dans l’administration ne prouvent pas que tous les fichiers associés sont encore accessibles. Après une migration, comparez aussi les dossiers transférés et l’emplacement de stockage prévu.

Les images responsive de WordPress permettent au navigateur de choisir une source avec srcset et sizes. L’original peut fonctionner tandis qu’une variante annoncée manque. Par exemple, si seule une taille intermédiaire échoue, le problème peut apparaître sur téléphone et rester invisible sur un autre écran.

Vérifiez donc la variante effectivement demandée et les métadonnées qui l’annoncent. Si une régénération est nécessaire, commencez par une sauvegarde récente et restaurable, puis un petit échantillon. WP-CLI permet de cibler des médias et des tailles, avec des options pour les tailles manquantes ou la conservation des anciennes miniatures. Choisissez ces options selon le défaut constaté ; elles ne réparent pas un original absent. Estimez l’espace disponible avant de traiter toute la bibliothèque.

Distinguer l’origine, le CDN et les blocages HTTPS

Si l’adresse passe par un CDN ou un service d’optimisation, comparez la réponse obtenue avec celle de l’origine, lorsque cet accès est prévu. Une origine correcte et une version optimisée en erreur orientent vers cette couche intermédiaire. Corrigez sa configuration ou la ressource concernée, puis invalidez uniquement les URL nécessaires. Une purge générale ne restaure pas un fichier absent à l’origine.

Sur une page HTTPS, une ancienne référence HTTP peut être bloquée ou, dans certains cas, automatiquement demandée en HTTPS. Le comportement dépend de la ressource et de son intégration, comme l’explique la documentation sur le contenu mixte. Examinez l’adresse réellement demandée et corrigez la référence ou le certificat en cause ; ne désactivez pas la protection du navigateur.

Une image distante n’exige pas systématiquement CORS pour s’afficher. En revanche, l’attribut crossorigin peut déclencher une requête CORS et un refus si le serveur ne l’autorise pas. La documentation de l’élément image précise cette distinction. Ne changez pas globalement les autorisations d’origine pour tenter de résoudre chaque image cassée.

Chercher ce qui masque ou retarde une image chargée

Lorsque le bon fichier arrive, inspectez sa place dans la page : largeur et hauteur calculées, conteneur, débordement, opacité et règles propres au format d’écran. Une image peut être cachée par le thème, recouverte par un bloc ou affichée dans un conteneur sans hauteur. Une correction temporaire dans les outils du navigateur permet de vérifier la piste avant de modifier les styles du site.

Pour un chargement différé, regardez ce qui se passe après défilement et après une interaction. Un emplacement vide qui garde une adresse provisoire peut dépendre d’un script en erreur ou retardé. Vérifiez aussi le refus du consentement et la lecture sans JavaScript lorsque le contenu essentiel doit y rester disponible. Évitez d’ajouter un second mécanisme de chargement différé pour compenser le premier.

Si l’image principale s’affiche mais arrive trop tard, le sujet devient celui de la vitesse : le plan d’optimisation WordPress complète ce diagnostic. Réduire son poids ne répare pas une URL inexistante ou un style qui la masque.

Réparer la bonne référence et vérifier ses autres usages

Restaurez le fichier manquant ou corrigez la référence qui produit la mauvaise adresse. Avant un remplacement en base, une modification de stockage ou une régénération, définissez le périmètre et le retour arrière. Supprimer puis recréer le média peut changer son identifiant et laisser d’anciennes références dans des contenus, des galeries ou des modèles.

Après correction, contrôlez les pages qui utilisent ce média, plusieurs largeurs d’écran et les variantes servies par le CDN. Vérifiez le recadrage, les dimensions et l’espace réservé pour éviter les sauts de mise en page. Un texte alternatif pertinent décrit l’information utile sans empiler des mots-clés ; les recommandations Google pour les images complètent ces contrôles.

Gardez la cause et la correction dans un relevé court. Si le problème touche de nombreux médias ou revient après chaque mise à jour, faites vérifier la chaîne complète avant un traitement global. La maintenance du site peut cadrer cette intervention ; les autres guides de dépannage WordPress aident à isoler un incident différent.

Liens externes cités