Pourquoi une image ne s’affiche-t-elle pas sur mon site ?

Une icône d’image cassée, un espace vide et un emplacement réservé qui ne disparaît jamais ne donnent pas les mêmes indices. Le fichier peut manquer, le navigateur peut ne pas savoir l’afficher ou la page peut masquer une image pourtant bien chargée.

Commencez par une seule image concernée. Les premières vérifications se font dans l’éditeur du site et le navigateur. La section technique facultative aborde les requêtes, le HTML, le CSS et les messages de sécurité du navigateur.

Si l’image apparaît dans la page mais pas dans les résultats de recherche, consultez le guide Google Images. Si elle finit par apparaître après une longue attente, examinez les problèmes de chargement lent.

1. Commencez par la page publiée

Ouvrez la page publique, plutôt que l’aperçu de l’éditeur. Dans l’éditeur, confirmez que l’image est sélectionnée, que la modification est enregistrée et que la page est publiée. Notez les images concernées et si le problème a commencé après un envoi, une refonte ou une migration du site.

Essayez également la page publique dans une fenêtre de navigation privée. Un résultat différent fournit un indice utile, mais la connexion au compte, les données enregistrées et les extensions peuvent varier d’une fenêtre à l’autre.

2. Trouvez et testez l’adresse de l’image

Faites un clic droit sur l’image manquante ou son icône et cherchez Ouvrir l’image dans un nouvel onglet ou Copier l’adresse de l’image. Ces options peuvent être absentes pour une image de fond ou un emplacement vide.

Vous pouvez aussi sélectionner l’image dans l’éditeur et ouvrir ses informations dans la médiathèque. Copiez l’URL du fichier, pas celle d’une page de pièce jointe ou de partage dans le cloud. Une page de partage peut afficher l’image dans une interface de téléchargement ou demander une connexion.

La page publique peut utiliser une miniature, un recadrage mobile ou une copie hébergée par un service d’images distinct. Si vous ne trouvez que l’original de la médiathèque, prenez-le comme point de départ. La vérification dans Network identifie la version demandée par la page.

Ouvrez l’adresse de l’image dans une fenêtre privée sans vous connecter, puis choisissez la suite :

• L’image s’ouvre : passez aux vérifications de visibilité dans la page. Si elles ne révèlent rien, examinez la requête réellement effectuée par la page.
• Une erreur, une page de connexion ou un avertissement d’accès apparaît : vérifiez l’emplacement du fichier et son accès.
• Le problème concerne uniquement le téléphone : vérifiez les versions mobiles et le chargement, même si l’original s’ouvre.
• Le navigateur télécharge le fichier : passez à la vérification des en-têtes de réponse. Les paramètres de téléchargement peuvent expliquer ce comportement sans établir si l’image fonctionne dans la page.

Un test réussi dans un nouvel onglet confirme que le fichier peut s’afficher dans ce contexte. La page peut néanmoins demander une autre version ou rencontrer une restriction d’intégration.

3. Rétablissez le fichier ou corrigez son accès

Si le fichier manque ou si l’adresse est incorrecte

1. Retrouvez l’image voulue dans la médiathèque. Comparez l’adresse de son fichier à celle qui échoue. Vérifiez le domaine, le dossier, le nom, l’extension et la casse (majuscules et minuscules). Certains serveurs distinguent Photo.JPG de photo.jpg.
2. Remplacez la sélection défectueuse dans le bloc image ou le widget concerné. Choisissez le fichier existant qui fonctionne, enregistrez et publiez. Si l’original a été supprimé, importez d’abord un remplacement fiable.
3. Rouvrez la page publique. Vérifiez qu’elle référence désormais une image disponible. Si elle demande toujours une miniature manquante, suivez la vérification des tailles générées ci-dessous.

Après une migration, comparez l’hôte de l’image ainsi que son nom. La page peut encore pointer vers l’ancien domaine ou dossier d’envoi. Pour les chemins écrits à la main, consultez les vérifications techniques.

Si l’original fonctionne mais qu’une miniature manque

Un nouvel envoi ne répare pas forcément une page qui référence toujours la version absente. Transmettez à la personne chargée du site l’URL de l’original fonctionnel et celle de la miniature manquante. Demandez de régénérer la taille absente et d’actualiser les listes d’images qui la référencent. Le panneau Network fournit l’URL en échec et son statut.

Par exemple : « L’original s’ouvre, mais cette page demande une version plus petite qui renvoie 404. Merci de rétablir cette taille et de vérifier les références aux images adaptatives de la page. » Vous indiquez ainsi la réparation sans avoir à connaître les outils de génération de la plateforme.

Si l’accès est refusé ou exige une connexion

Déterminez d’abord si l’image doit être publique. Si oui, choisissez un fichier ajouté par le circuit habituel de publication des médias publics de votre site. Une adresse locale file:///C:/..., un aperçu temporaire blob: ou un lien de partage privé dans le cloud n’est pas une adresse publique durable.

Pour une réponse 401 ou 403, envoyez à l’hébergeur l’URL exacte en échec, la page qui l’utilise et l’heure du test. Demandez quelle règle d’authentification ou de diffusion a rejeté la requête. Un lien expirant ou une protection contre le hotlinking, qui limite l’intégration sur d’autres sites, peut être en cause. Corrigez la règle ou utilisez l’URL publique prise en charge par le fournisseur. Conservez les contrôles d’accès prévus pour les fichiers privés.

4. Vérifiez la visibilité de l’image dans la page

Si l’image s’ouvre directement, commencez par ses réglages dans l’éditeur :

• Vérifiez l’image et sa section parente. Cherchez des options comme « Masquer sur mobile » ou « Ordinateur uniquement ». Une section masquée cache également ses images.
• Vérifiez séparément les arrière-plans. Une image de fond a besoin d’un conteneur visible. Donnez à une section vide la hauteur voulue dans l’éditeur, puis vérifiez la position du fond et sa superposition.
• Examinez les visuels transparents sur une autre couleur. Un logo blanc peut se confondre avec une page blanche tout en se chargeant correctement. Consultez le guide sur la transparence si le sujet semble invisible.

Enregistrez la modification utile et examinez la page publique. Si l’image manque encore, les vérifications techniques permettent de distinguer une requête bloquée d’une image masquée par la mise en page.

5. Vérifiez les images mobiles et les emplacements bloqués

Si le problème apparaît uniquement sur téléphone

Ouvrez la vue mobile de l’éditeur et vérifiez si l’image ou sa section est masquée. S’il existe un réglage d’image mobile distinct, assurez-vous qu’il pointe vers un fichier disponible. Testez ensuite la page publique sur le téléphone concerné.

Un site peut générer plusieurs tailles et laisser le navigateur choisir. Un téléphone peut demander une petite version absente alors qu’un ordinateur utilise une grande version disponible. Demandez de comparer les URL sélectionnées aux tailles d’écran où l’image fonctionne et échoue, puis de rétablir la version manquante. Les vérifications techniques expliquent comment identifier ce choix.

Si un emplacement réservé reste à la place d’une image visible

Attendre avant de charger une image plus bas dans la page ou une diapositive de galerie encore fermée peut être volontaire. Enquêtez si l’image reste vide après avoir atteint son emplacement ou ouvert la diapositive et laissé le temps de charger. Une requête échouée et une requête jamais lancée demandent des corrections différentes.

Sur une copie de test, essayez le réglage de galerie ou de chargement différé sur une seule page. Si l’image revient, faites corriger ce composant avant de généraliser la modification. Pour l’image principale visible dès l’ouverture, évaluez si un chargement différé est approprié. Notre guide du lazy loading explique les possibilités.

6. Comparez l’éditeur avec ce que reçoivent les visiteurs

Si l’image apparaît uniquement dans l’éditeur, confirmez que vous avez publié sa modification sur la bonne page. Comparez ensuite son adresse dans la médiathèque à la requête de la page publique. Un aperçu privé dans l’éditeur et un fichier publiquement accessible sont deux choses différentes.

Après avoir corrigé une page ou une référence obsolète, utilisez les commandes documentées de votre système de publication pour actualiser le cache de la page ou du fichier concerné. Un réseau de diffusion de contenu, ou CDN, peut avoir son propre cache. Effacer les données du navigateur n’actualise pas le cache partagé du site.

Si le problème se produit dans un seul profil de navigateur, testez sans extensions et examinez les autorisations du site dans ce profil. La navigation privée ne désactive pas systématiquement les extensions. Relevez la requête échouée avant de décider si le bloqueur de contenu ou le mode de diffusion du site doit être corrigé.

La section technique explique comment tester sans le cache HTTP habituel du navigateur. Le guide MDN sur le cache décrit les caches du navigateur et les caches partagés.

7. Modifiez le fichier si son format ou sa taille est en cause

Vérifiez le type réel du fichier et les exigences de destination avant de choisir un convertisseur. Une conversion peut résoudre une incompatibilité de format ; elle ne peut ni rétablir une adresse manquante ni révéler une section masquée.

• Le fichier est en HEIC ou HEIF et la destination exige du JPG : utilisez HEIC vers JPG pour créer une copie sous forme d’image fixe. Vérifiez le résultat et conservez l’original. Une photo d’iPhone peut déjà être en JPEG : contrôlez d’abord son format.
• La plateforme refuse le SVG mais accepte le PNG : créez une copie PNG aux bonnes dimensions en pixels. Vérifiez le visuel avant de l’envoyer.
• Le fichier ne s’ouvre pas non plus sur votre appareil : récupérez un original fonctionnel ou exportez-le à nouveau depuis l’application qui l’a créé. Changer l’extension ne répare pas des données endommagées.
• Le fichier dépasse une limite annoncée : préparez une copie qui respecte cette limite, puis confirmez que l’envoi est terminé et que la page utilise le fichier envoyé.

Le guide MDN des formats compare la prise en charge par les navigateurs et les possibilités des formats. Si un SVG change d’apparence après export, consultez le guide SVG. Pour une image présente mais peu nette, consultez le guide sur les images floues.

Exemple : une photo de produit disparaît sur mobile

Dans cet exemple fictif, une photo de produit fonctionne sur ordinateur après la migration d’une boutique, mais apparaît cassée sur téléphone. L’original de la médiathèque s’ouvre ; la propriétaire examine donc la requête d’image réelle du téléphone.

Le téléphone sélectionne /media/blue-mug-640.webp, qui renvoie 404. L’ordinateur utilise /media/blue-mug-1280.webp. La migration a copié le grand fichier, mais oublié la petite version.

La personne chargée du site régénère la taille manquante, vérifie les autres versions annoncées et actualise les références obsolètes si nécessaire. La propriétaire recharge la page publique sur son téléphone et confirme que le fichier demandé fournit la bonne image. La cause était un fichier généré absent ; changer le format de l’original ne réparerait pas cette référence.

8. Vérifiez la réparation comme un visiteur

Répétez le test qui échouait sur la même page publique, avec la même taille d’écran et la même diapositive. Vérifiez que la bonne image apparaît et reste disponible après rechargement. Testez sans connexion administrateur si l’image est destinée à tous les visiteurs.

Après une modification de modèle ou de diffusion, vérifiez une autre page utilisant le même composant, sur ordinateur et sur mobile. Notez brièvement la cause et le fichier ou le réglage modifié.

Si quelqu’un d’autre doit terminer la réparation, transmettez l’URL de la page, l’URL de l’image sélectionnée, l’heure de l’échec, le navigateur et l’appareil, ainsi que l’erreur utile. Précisez si l’image fonctionne dans l’éditeur, seule dans un nouvel onglet ou à une autre taille d’écran. Retirez les jetons privés et les données personnelles de tout document partagé publiquement.

Facultatif : vérifications techniques pour la maintenance du site

Choisissez les contrôles correspondant aux indices recueillis. Ils permettent de distinguer un fichier indisponible, une requête échouée et une image chargée mais masquée.

Examinez la requête d’image dans Network

1. Ouvrez la page publique concernée. Dans Chrome, choisissez Plus d’outils → Outils de développement dans le menu, puis Network. Les autres navigateurs proposent des commandes similaires.
2. Laissez l’enregistrement actif et rechargez. Sélectionnez le filtre Img ou cherchez le nom du fichier. Atteignez l’image ou ouvrez sa diapositive si cela déclenche normalement son chargement.
3. Sélectionnez la requête. Dans Headers, relevez Request URL, le statut et les en-têtes de réponse. Utilisez Preview ou Response pour examiner le contenu reçu.
4. Sans résultat, effacez les filtres. L’URL a pu changer, ou un script récupère peut-être l’image via Fetch/XHR.

Pour comparer avec un téléchargement neuf, activez Disable cache, gardez les outils ouverts et rechargez. Cela contourne le cache HTTP habituel du navigateur, pas celui du CDN. Si un service worker intervient, vérifiez séparément ses réponses enregistrées. Voir la référence Network de Chrome.

Un statut oriente la recherche, mais n’identifie pas toutes les causes. MDN explique les codes de statut HTTP et la validation 304 normale. Pour une erreur de nom d’hôte ou de certificat, vérifiez le DNS et le HTTPS de l’hôte de l’image.

Attendez-vous à de vraies données d’image et à un Content-Type adapté, comme image/jpeg ou image/webp. Une URL finissant par .jpg peut renvoyer du HTML, tandis qu’un service d’images peut légitimement fournir un autre format derrière cette même extension.

Si l’ouverture de l’adresse télécharge le fichier

Vérifiez Content-Disposition en plus du type de contenu. Une réponse contenant Content-Disposition: attachment peut déclencher un téléchargement à l’ouverture directe. Cela ne prouve pas que l’image échoue dans une page : examinez aussi la requête intégrée. Si vous avez copié un lien de téléchargement, utilisez l’URL d’affichage prise en charge par l’hébergeur. Voir la référence Content-Disposition.

Trouvez l’URL de l’image adaptative sélectionnée

Dans Chrome ou Edge, faites un clic droit sur l’image et choisissez Inspecter. Dans Elements, sélectionnez le véritable <img>, pas son conteneur ni <picture>. Ouvrez Console et saisissez cette expression en lecture seule :

$0.currentSrc

$0 désigne l’élément sélectionné le plus récemment dans ces outils. Le résultat est l’adresse d’image choisie, pas une garantie de chargement réussi. Vérifiez-la dans Network. La référence Console Utilities explique $0, et MDN documente currentSrc.

Un navigateur peut choisir un fichier dans srcset ou une source <picture> correspondante. Un src fonctionnel ne répare pas un candidat sélectionné manquant. Le repli de picture dépend des conditions des sources et de leur prise en charge ; ne comptez pas dessus pour récupérer une erreur 404 du fichier choisi. Voir la sélection d’images adaptatives et la référence picture.

Résolvez les chemins d’images HTML et CSS

Sur https://example.com/services/kitchens/, si la page ne définit pas une autre URL de base, ces deux sources demandent des emplacements différents :

<img src="images/kitchen.jpg" alt="Cuisine terminée avec des placards en chêne">
<img src="/images/kitchen.jpg" alt="Cuisine terminée avec des placards en chêne">

La première demande /services/kitchens/images/kitchen.jpg ; la seconde, /images/kitchen.jpg sur cet hôte. Choisissez l’adresse correspondant au déploiement réel, y compris un éventuel préfixe de sous-dossier. MDN explique les chemins relatifs et absolus. Dans un fichier CSS externe, une URL d’image relative se résout par rapport à l’adresse de la feuille de style ; voir la référence des URL CSS.

Inspectez la mise en page et le mécanisme de chargement

Dans Elements → Computed, vérifiez l’image et ses parents : display: none, visibility: hidden, opacité nulle, dimensions réduites à zéro, découpage ou superposition. Une image de fond ne donne pas à un conteneur vide la hauteur de la photo. Corrigez la règle responsable dans l’éditeur ou la feuille de style source ; une modification temporaire dans les outils disparaît généralement au rechargement. Voir le guide d’inspection CSS de Chrome et la référence background-image.

Si l’URL réelle existe seulement dans data-src, vérifiez le script qui affecte la source et les erreurs Console associées. Avec le mécanisme natif loading="lazy", fournissez des dimensions adaptées et assurez une place à l’image dans la mise en page avant son chargement. Le guide du chargement différé natif explique ce comportement.

Content Security Policy : vérifiez si l’hôte prévu correspond à img-src, ou à default-src en l’absence de directive propre aux images. Voir la référence CSP sur les sources d’images.

Contenu mixte : une référence d’image HTTP sur une page HTTPS peut être mise à niveau ou bloquée selon son utilisation. Confirmez la disponibilité de l’image en HTTPS et actualisez la référence. Voir les explications MDN sur le contenu mixte.

CORS et politiques d’intégration : afficher une image ordinaire d’une autre origine et lire ses pixels via un canvas répondent à des exigences différentes. Ajouter crossorigin peut faire échouer le chargement si l’hôte ne fournit pas la réponse CORS requise. Vérifiez la documentation CORS des images et toute restriction Cross-Origin Resource Policy signalée.

Questions fréquentes

Pourquoi puis-je voir l’image alors que les visiteurs ne la voient pas ?

L’éditeur peut afficher un aperçu temporaire ou non publié, et votre session connectée peut disposer d’un accès absent pour les visiteurs. Testez la page publique sans cette connexion. Si le fichier doit être public, passez par le circuit des médias publics du site ; sinon, demandez de vérifier son affichage authentifié.

Pourquoi l’image s’ouvre-t-elle dans un nouvel onglet, mais pas dans la page ?

Comparez d’abord les adresses exactes : la page peut demander une autre taille. Si elles correspondent, recherchez une erreur d’accès ou de politique du navigateur dans la requête intégrée. Une requête d’image réussie vous oriente ensuite vers la visibilité et la mise en page.

Une réponse 200 prouve-t-elle que l’image fonctionne ?

Non. Vérifiez le contenu de la réponse. Une page de connexion renvoyée avec le statut 200 n’est pas une image. Si la réponse contient la bonne image, examinez les messages Console pertinents et son affichage dans la page. Le code seul ne confirme pas un résultat visible.

Réduire les dimensions ou compresser l’image réparera-t-il une image cassée ?

Ces actions aident si un envoi dépasse une limite annoncée ou si une image trop lourde se transfère lentement. Un mauvais chemin, une miniature absente ou une section masquée demande une autre correction. Identifiez le problème grâce à l’erreur d’envoi ou à la requête avant de modifier le fichier.

Faut-il renommer le fichier ou changer son extension ?

Renommez-le pour corriger un problème précis de chemin ou de nom, puis actualisez les références à l’ancien nom. Renommer .heic en .jpg ne convertit pas l’image. Utilisez un convertisseur si son format réel n’est pas pris en charge et conservez l’original.

Le texte alternatif, robots.txt ou Search Console feront-ils apparaître l’image ?

Le texte alternatif décrit l’image lorsqu’elle ne peut pas être vue ; il ne récupère pas le fichier. Les instructions robots et Search Console concernent l’exploration et la visibilité dans la recherche. Pour une image absente de la page d’un visiteur, vérifiez d’abord le fichier, la requête et la mise en page.

Résumer avecChatGPT (s’ouvre dans un nouvel onglet)Grok (s’ouvre dans un nouvel onglet)Google (s’ouvre dans un nouvel onglet)Perplexity (s’ouvre dans un nouvel onglet)Claude (s’ouvre dans un nouvel onglet)