Comment trouver et réparer une image cassée dans WordPress

Vous avez probablement déjà vu une icône d'image sur votre site Web qui ressemble à une image déchirée. C'est une image cassée et elle peut affecter négativement votre site Web si vous ne la remplacez pas .

Les images sont importantes pour la plupart des sites Web. Entre autres choses, ils rendent votre page plus attrayante, transmettent des informations clés et améliorent votre classement dans les moteurs de recherche.

Par conséquent, il est important de trouver et de réparer les images cassées sur votre site Web dès que vous les remarquez. Dans ce guide, nous expliquerons ce qu'est une image cassée et vous montrerons comment les réparer sur votre site WordPress.

Contenu:

• Qu'est-ce qu'une image cassée ?
• Détecter les images brisées sur votre site Web
• Comment résoudre le problème d'image cassée
  • Chemin de fichier incorrect
  • Vérifiez les noms de fichiers
  • Extensions de fichier incorrectes
  • Utiliser un chemin relatif
  • Assurez-vous que l'image existe
  • Problèmes de transfert
• Conclusion

Qu'est-ce qu'une image cassée ?

En termes simples, une image cassée est une image dont le lien source est indisponible ou corrompu . Lorsqu'un utilisateur fait défiler vers une section avec une image cassée sur votre site, il verra l'icône de l'image cassée. Cela peut être dû à une URL mal orthographiée, à un chemin de fichier incorrect ou à un lien vers un site qui n'existe plus.

Il s'agit d'un problème critique car il affecte négativement l'expérience utilisateur. Lorsque les utilisateurs rencontrent des images manquantes sur votre site, ils ont tendance à quitter votre site pour un concurrent.

En conséquence, les taux de rebond augmenteront sur votre site Web. Donc, pour éviter que cela ne se produise, analysez toujours votre site à la recherche d'images cassées et corrigez-les. Voyons comment procéder dans la section suivante.

Détecter les images brisées sur votre site Web

Le moyen le plus simple de détecter les images cassées sur votre site Web WordPress consiste à utiliser un plugin. L'un de ces plugins est le vérificateur de lien brisé. Avec ce plugin, vous pouvez analyser les liens internes et externes de votre site à la recherche de liens et d'images brisés.

Après avoir installé et activé le plugin, vous pouvez accéder à la page des paramètres du plugin via Settings >> Link Checker .

Le plug-in Broken Link Checker analyse votre site Web à la recherche de liens brisés. S'il y a des problèmes, vous les verrez à partir d'ici ou serez averti par e-mail.

Le plugin vous offre également la possibilité d'empêcher les moteurs de recherche de suivre les liens rompus. Vous pouvez activer cette option afin que l'image brisée n'affecte pas votre classement SEO.

Réparer les images cassées

Plusieurs scénarios peuvent entraîner des images manquantes sur votre site Web WordPress. Dans cette section, nous discuterons des raisons et de la manière de les résoudre.

Chemin de fichier incorrect

Lors de l'ajout d'images à votre site Web, WordPress crée un chemin de fichier qui spécifie l'emplacement des images. Les navigateurs Web utilisent le chemin dans l'attribut image src pour localiser l'image. Si le chemin d'accès à l'image est incorrect, l'image ne se chargera pas et ne s'affichera pas.

Pour résoudre ce problème, localisez simplement la publication ou la page avec l'icône d'image cassée et remplacez-la par une nouvelle image. Pour cela, connectez-vous à votre tableau de bord et accédez à votre page de publication WordPress. Passez ensuite la souris sur la publication avec l'image brisée et sélectionnez Modifier .

Dans l'éditeur de publication, faites défiler jusqu'à la section avec l'image cassée, puis cliquez dessus et sélectionnez Remplacer . Vous pouvez choisir une image dans votre médiathèque ou télécharger une nouvelle image.

Après avoir remplacé l'image cassée, cliquez sur Mettre à jour pour enregistrer vos modifications.

Si vous utilisez l'éditeur classique, cliquez sur l'image, puis sélectionnez l'icône du stylo pour modifier l'image cassée.

Ici, cliquez sur le bouton Remplacer puis choisissez une image dans votre médiathèque. Enfin, cliquez sur Mettre à jour pour remplacer l'image.

Remplacement des images HTML personnalisées

Si vous avez ajouté l'image à l'aide de code HTML ou CSS personnalisé, vous devez vérifier que le chemin est correct. Pour vérifier cela, vous devez vérifier l'emplacement où vous avez ajouté l'image. Cela pourrait être sur le bloc CSS supplémentaire. Si tel est le cas, suivez les étapes ci-dessous.

Note complémentaire : Remplacer des images dans votre modèle peut être technique. Si vous êtes nouveau sur WordPress, vous pouvez demander à nos experts de vous aider à résoudre vos problèmes de modèle.

Tout d'abord, connectez-vous à votre tableau de bord WordPress, puis accédez à Apparence >> Personnaliser.

Après cela, sélectionnez le bloc CSS supplémentaire ou le menu CSS personnalisé.

Dans l'éditeur de code, localisez la ligne de code où l'image a été ajoutée et mettez en surbrillance le chemin d'accès à l'image. Ensuite, faites un clic droit puis sélectionnez Aller au chemin d'accès au fichier ...

Si l'image n'est pas disponible, vous obtiendrez une erreur 404 introuvable. Vous pouvez simplement télécharger à nouveau l'image sur votre site Web, puis copier et coller le lien vers le fichier ici.

Pour télécharger l'image, accédez à Média >> Ajouter un nouveau . Après cela, cliquez sur Sélectionner les fichiers , puis choisissez le fichier image. Une fois le téléchargement terminé, cliquez sur le bouton Copier l'URL dans le presse-papiers .

Revenez maintenant à la page de personnalisation et remplacez le lien d'image cassé par celui que vous venez de télécharger. Enfin, cliquez sur Publier pour enregistrer vos modifications.

Vérifiez les noms de fichiers

Il s'agit d'une cause fréquente de problèmes de chargement d'image. Assurez-vous que l'orthographe de l'image est la même que celle de la médiathèque. L'erreur peut aussi être aussi petite qu'un caractère spécial différent. Taper un trait de soulignement (_) au lieu d'un tiret (-) peut entraîner une image brisée.

Pour résoudre ce problème, vous devez comparer le nom de fichier de la publication ou de la page à l'image d'origine de la médiathèque. Pour cela, connectez-vous à votre tableau de bord WordPress puis rendez-vous dans Média >> Bibliothèque .

Maintenant, utilisez le champ de recherche pour trouver l'image que vous souhaitez comparer. Après cela, survolez l'image, puis sélectionnez Afficher .

Dans la barre d'adresse, vous verrez le chemin vers l'image. La partie en surbrillance est le nom de l'image comme indiqué ci-dessous.

Maintenant, dirigez-vous vers le message avec l'image cassée et vérifiez également le nom du fichier. Pour cela, ouvrez la page sur votre navigateur, puis faites un clic droit sur l'image cassée et sélectionnez Ouvrir l'image dans un nouvel onglet .

S'il y a des divergences entre les deux noms de fichiers, cela pourrait être la cause de l'image qui ne s'affiche pas. Vous finirez par voir une erreur 404 introuvable.

Pour résoudre ce problème, vous devez modifier le message avec l'image cassée et remplacer le mauvais nom de fichier par celui de la médiathèque.

Après avoir corrigé les noms de fichiers, vous devriez voir l'image affichée sur l'éditeur de publication. Sinon, vous pouvez télécharger à nouveau l'image et l'ajouter à votre message. Assurez-vous de mettre à jour la publication pour enregistrer vos modifications.

Extensions de fichier incorrectes

Vous devriez également vérifier les extensions de fichiers. Parfois, le nom du fichier peut être orthographié correctement, mais l'extension du fichier peut être incorrecte. Par exemple, vous pouvez télécharger une image sous forme de fichier .jpg, mais dans le code, il s'agit d'une extension .png. Cela peut causer des problèmes.

Un autre problème courant se produit avec l'extension d'image "jpg" et "jpeg". Bien que les deux formats soient identiques, vous pouvez rencontrer une erreur d'image cassée si vous échangez l'un pour l'autre.

Utiliser un chemin de fichier relatif

Un chemin relatif relie à un fichier par rapport à l'URL de la page d'accueil. Dans WordPress, un chemin relatif supprime le nom de domaine et n'utilise que le chemin après le domaine.

Ainsi dans l'attribut "src", au lieu de "https://example.com/wp-content/uploads/image.png" , la source devient "/wp-content/uploads/image.png" . Et vos images fonctionneront bien avec le lien court.

L'un des avantages d'utiliser un chemin relatif est que vos images fonctionneront même si vous changez de nom de domaine. Ce serait le cas tant que les fichiers sont toujours hébergés sur le même serveur.

Vous pouvez utiliser un plugin tel que le plugin Make Paths Relative pour forcer WordPress à utiliser des chemins relatifs pour vos fichiers multimédias. Le plugin est facile à installer et à configurer.

Après avoir installé et activé le plug-in, accédez à Rendre les chemins relatifs >> Paramètres pour ouvrir la page des paramètres des plug-ins.

Ici, cochez l'option permettant d'activer les chemins relatifs pour les images, puis cliquez sur Enregistrer les modifications pour enregistrer vos modifications. Vous pourrez désormais afficher des images sur une page en utilisant des chemins relatifs.

Assurez-vous que l'image existe

Vous avez peut-être lié à une image hébergée sur un autre site Web. Si ce site tombe en panne ou est transféré sur un autre serveur, les images cesseront d'exister.

De plus, un lien direct vers un autre site augmente l'utilisation du serveur sur le site à partir duquel vous obtenez l'image. Si le site Web hôte désactive le hotlinking, cela empêchera votre image de s'afficher.

Pour éviter que cela ne se produise, il est préférable de télécharger chaque image sur votre site Web avant de les ajouter à la page. Évitez également d'utiliser des images provenant de sites Web tiers, sauf si vous avez l'autorisation de les utiliser.

Problèmes de transfert

Ce n'est pas un problème courant, mais cela arrive. Parfois, votre serveur est débordé et ne peut pas charger tous les éléments de la page assez rapidement avant l'expiration de la demande.

Cela se produit principalement avec des serveurs Web bon marché. Pour résoudre ce problème, vous devez mettre à niveau la capacité de votre serveur ou migrer vers un hébergeur fiable.

Vous pouvez également utiliser un plugin pour activer le chargement différé de vos images. Lorsque vous l'activez, votre serveur ne charge les images que lorsque l'utilisateur fait défiler la section. Cela libérera les ressources de votre serveur et accélérera également votre site Web. Vous pouvez en savoir plus à ce sujet dans notre guide d'optimisation de la vitesse .

Résumé - Correction des images cassées

Il n'est pas rare que les sites Web rencontrent des problèmes avec des images cassées ou manquantes, mais il s'agit d'un problème assez grave qui doit être traité rapidement. Si vous avez une boutique en ligne, vous risquez de perdre des clients potentiels si les utilisateurs ne peuvent pas voir les images des produits sur votre boutique.

Dans ce guide, nous avons expliqué certaines des causes des images cassées ainsi que des conseils sur la façon de les réparer sur les sites Web WordPress.

La réparation des images cassées est un moyen de réduire le taux de rebond sur votre site Web. Vous devez également optimiser vos images pour améliorer les performances de votre site. Pour un tutoriel détaillé à ce sujet, consultez notre guide d'optimisation d'image.