Nous avons rencontré un problème étrange récemment en créant un nouveau site sous WordPress : Les images s’affichent bien sur Chome, Internet Explorer et Firefox mais pas sur Safari

Le plus étrange, c’est que ce problème ne concerne même pas toutes les images ! Uniquement une partie: Heuresement, nous avons trouvé la cause du problème et nous vous présentons ici une solution

Vous avez probablement le même problème si :

  • Vos images s’affichent correctement sur Chrome, IE & Firefox mais pas sur Safari
  • Le problème ne concerne pas toutes les images, mais une partie seulement

Un example du problème, sur un site wordpress ici sous chrome:

wordpress images chrome

Et ici le même site sous wordpress avec safari :

wordpress images safari

Comme on peut le voir ici, les images ne s’affichent pas sur safari

Comment régler le problème wordpress d’affichage des images sous safari

Pour passer l’explication et voir la solution, rendez-vous directement à la fin de l’article

Pour comprendre la solution, il faut comprendre le problème, en example, prenons l’URL d’une des images ci-dessus qui ne s’affichent pas sous safari :

En inspectant le code dans la console, nous pouvons trouver l’URL de l’image, et voir si le path (dossier ou est stocké l’imge) est correcte

Sous Chrome, l’URL de l’image est la suivante :

/wp-content/uploads/2016/11/Capture-d’écran-2016-11-03-à-17.25.32-1-1024×640.png

Sous Safari, l’URL est la suivante :

/wp-content/uploads/2016/11/Capture-d%E2%80%99%C3%A9cran-2016-11-03-%C3%A0-17.25.32-1-1024×640.png

Et voila la cause de notre problème ! L’URL à laquelle safari essaie de charger l’image n’est pas la bonne, tout simplement. La bonne URL est la première, celle-ci est chargée correctement sous chrome, IE, Edge et Firefox.

Le problème est lié à la manière dont Safari encode les accents dans les URL, ici, le é est remplacé par un d%E2, générant ainsi une URL incorrecte (l’image ne se trouve pas à cette addresse).

Résoudre le problème WordPress : Safari, les images ne s’affichent pas

Maintenant que le problème est déterminé, il ne reste plus qu’à le corriger :

Il suffit de retirer les accents et tous les caractères spéciaux du nom de l’image, dans notre cas, nous avons supprimé les images sur wordpress, modifié le nom des images sur notre machine locale de façon à retirer les caractères spéciaux, et re-uploadé les images sans caractères spéciaux sur WordPress

Il faut retirer tous les accents, % et autres $ ` ect.., le mieux est de ne conserver que des lettres/chiffres pour le nom du fichier.

Il existe probablement un extension WordPress permettant de renommer en ‘Bulk’ le nom des images afin d’en retirer les caractères spéciaux, mais comme nous avions peu d’images, nous l’avons fait à la main.

Si la solution a bien fonctionnée chez vous aussi, n’hésitez pas à laisser un commentaire, et si vous avez trouvé un plugin pour modifier en masse le nom des images, vous pouvez l’ajouter aussi en commentaire !

Conclusion: Pour que vos images s’affichent sur Safari : Il suffit de retirer tous les caractères spéciaux du nom du fichier(de l’image) et tous les accents(ù é à ect..), ainsi que les tirets, et $ %. Idéalement il ne faut conserver que des lettres et chiffres