Le vieil adage dit que « une image vaut mille mots ». Ce slogan brille sur le web, où l'attention s'étend sont notoirement courts - la bonne image peut faire ou défaire un site en attirant la bonne attention et en engageant la page visiteurs.
Pourtant, lorsqu'un graphique ne se charge pas, le design semble cassé et, dans certains cas, peut dégrader l'expérience utilisateur sur ce site. Les « mille mots » que l'image brisée envoie ne sont certainement pas positifs!
1. Chemins de fichier incorrects
Lorsque vous ajoutez des images à un site HTML ou alors CSS fichier, vous devez créer un chemin vers l'emplacement dans votre structure de répertoires où résident ces fichiers. Il s'agit du code qui indique au navigateur où rechercher et récupérer l'image. Dans la plupart des cas, ce serait dans un dossier nommé images. Si le chemin d'accès à ce dossier et les fichiers qu'il contient sont incorrects, les images ne se chargeront pas correctement car le navigateur ne pourra pas récupérer les bons fichiers. Il suivra le chemin que vous lui avez indiqué, mais il se retrouvera dans une impasse et, au lieu d'afficher l'image appropriée, deviendra vide.
2. Noms de fichiers mal orthographiés
Pendant que vous examinez le chemins de fichiers pour vos fichiers, vérifiez que vous avez correctement orthographié le nom de l'image. Les noms incorrects ou les fautes d'orthographe sont la cause la plus fréquente de problèmes de chargement d'images.
3. Extensions de fichier incorrectes
Dans certains cas, le nom du fichier peut être correctement orthographié, mais l'extension de fichier peut être incorrecte. Si votre image est un fichier .jpg, mais votre code HTML recherche un fichier .png, il y aura un problème. Utilisez le bon type de fichier pour chaque image puis référencez cette même extension dans le code de votre site Web.
Recherchez également la sensibilité à la casse. Si votre fichier se termine par .JPG, avec les lettres en majuscules, mais que votre code fait référence à .jpg, tout minuscules, certains serveurs Web considèrent ces deux éléments comme différents, même s'il s'agit des mêmes ensembles de des lettres. La sensibilité à la casse compte.
Il est recommandé de toujours enregistrer les fichiers avec des lettres minuscules. Cela nous permet de toujours utiliser des minuscules dans notre code, éliminant ainsi un problème possible que nous pourrions avoir avec nos fichiers image.
4. Fichiers manquants
Si les chemins d'accès à vos fichiers image sont corrects et que le nom et extension de fichier sont également sans erreur, vérifiez que les fichiers ont été téléchargés sur le serveur Web. Négliger de télécharger des fichiers sur ce serveur lorsqu'un site est lancé est une erreur courante qui est facile à ignorer.
Téléchargez ces images, actualisez votre page Web et elle devrait immédiatement afficher les fichiers comme prévu. Vous pouvez également essayer de supprimer l'image sur le serveur et de la télécharger à nouveau. Parfois, les fichiers sont corrompus pendant les transferts (par exemple, par texte plutôt que par transfert binaire pendant FTP), donc cette méthode "supprimer et remplacer" est parfois utile.
5. Le site Web hébergeant les images est en panne
Vous hébergerez normalement vous-même les images que votre site utilise serveur, mais dans certains cas, vous pouvez utiliser des images hébergées ailleurs. Si ce site hébergeant l'image tombe en panne, vos images ne se chargeront pas non plus.
6. Problèmes de transfert
Qu'un fichier image soit chargé à partir d'un domaine externe ou du vôtre, il y a toujours un risque qu'il y ait un problème de transfert pour ce fichier lorsqu'il est demandé pour la première fois par le navigateur. Ce problème ne devrait pas être courant (si c'est le cas, vous devrez peut-être chercher un nouveau fournisseur d'hébergement), mais cela peut arriver de temps en temps.
Une raison courante de ce problème est que le serveur est débordé et ne peut pas servir tous les actifs de la page assez rapidement avant que la demande n'expire. Vous verrez ce problème plus fréquemment avec des serveurs Web virtuels provisionnés à moindre coût qui ont du mal à gérer des sites plus complexes et riches en scripts. Si ce problème se produit fréquemment, envisagez de mettre à niveau les capacités du serveur ou de trouver un nouvel hôte.
7. Problèmes de base de données
Les applications Web dynamiques modernes, comme WordPress, reposent sur une base de données pour stocker des informations sur tout sur un site, y compris les images. Si votre site ne parvient pas à charger les images, il est possible que la base de données rencontre un problème.
Les problèmes de base de données peuvent survenir de plusieurs manières. Votre application peut même ne pas être connectée à la base de données, car elle est soit en panne, soit inaccessible sur un autre serveur. Quelque chose a peut-être été corrompu sur la base de données elle-même, ou les informations utilisateur de votre base de données ont changé, vous déconnectant. Même de simples modifications de paramètres peuvent déclencher des conséquences inattendues qui altèrent la base de données ou la rendent inaccessible. Vérifiez les journaux du serveur pour voir si la base de données pourrait être le coupable.
Quelques notes finales
Prendre en compte bonne utilisation des balises ALT et la vitesse de votre site Web et les performances globales.
Les balises ALT, ou « texte alternatif », sont ce qui est affiché par un navigateur si une image ne parvient pas à se charger. Ils sont également un élément important dans la création de sites Web accessibles qui peuvent être utilisés par les personnes ayant certains handicaps. Chaque image en ligne de votre site doit avoir une balise ALT appropriée. Les images appliquées avec CSS n'offrent pas cet attribut.