Pourquoi mes photos se chargent-elles très lentement, voire pas du tout, sur mobile ?

Sur mobile, des photos qui se chargent lentement sont presque toujours des fichiers beaucoup trop lourds pour une connexion de téléphone : c'est la photo qui pose problème, pas le téléphone. Quand une image ne s'affiche pas du tout, la cause est en général un lien cassé, un format que le navigateur du téléphone ne sait pas lire (comme le HEIC envoyé tel quel depuis un iPhone), un lazy-load mal réglé ou un thème qui la masque sur petit écran. Et si les images manquent sur tous les sites, c'est le téléphone ou la connexion qu'il faut vérifier, pas le site.

Vous ouvrez votre site sur votre téléphone, vous attendez, et la photo de votre produit arrive en retard, s'affiche par bandes ou reste un carré vide. Sur l'ordinateur, tout va bien, mais vos clients, eux, sont sur mobile, souvent en 4G ou en 5G, dans la rue, dans les transports ou dans une salle d'attente.

Bonne nouvelle : chacun de ces problèmes a une cause précise, et la plupart se règlent sans refaire le site. Commencez par le tableau ci-dessous pour repérer votre cas, puis lisez la partie qui vous concerne pour vérifier vous-même, même sans être technique.

Diagnostic rapide : ce que vous voyez et ce que cela veut dire

Cause n° 1 : des photos beaucoup trop lourdes

La cause la plus fréquente n'a rien à voir avec le téléphone : c'est la photo. Un appareil photo ou un smartphone récent produit des images de plusieurs mégaoctets. Si vous mettez une de ces photos en ligne telle quelle, le navigateur mobile doit télécharger tout le fichier sur une connexion souvent bien plus lente que le wi-fi de la maison.

Comment vérifier : enregistrez la photo du site sur votre ordinateur et regardez son poids. Si une seule image se compte en mégaoctets et non en kilooctets, elle est trop lourde pour le web.

Ce qu'il faudrait : une photo préparée pour le web pèse en général quelques centaines de kilooctets au maximum, au format WebP ou AVIF, redimensionnée à la largeur à laquelle elle s'affiche vraiment. Le rendu est le même, le chargement bien plus rapide.

Deux détails souvent oubliés :

• Le téléphone reçoit la version pour ordinateur. Un site bien construit garde plusieurs tailles de chaque photo et laisse le navigateur choisir la bonne (c'est le rôle de srcset et de la balise picture). Si le thème n'en a qu'une grande, chaque téléphone télécharge l'image prévue pour un grand écran.
• Ni largeur ni hauteur indiquées. Sans ces dimensions, le navigateur ne peut pas réserver la place de l'image, et le texte saute pendant que les photos arrivent. Google recommande d'ajouter les attributs width et height à chaque image.

La méthode pas à pas est détaillée dans notre article comment optimiser les images pour le web sans perdre en qualité.

Cause n° 2 : l'image « cassée » (mauvais lien, fichier déplacé ou adresse en http)

Carré vide, icône d'image cassée ou simple texte à la place de la photo : ce n'est pas un problème de vitesse, c'est un lien mort. La page demande bien la photo, mais le fichier n'est pas à cette adresse.

Causes typiques :

• Le fichier a été supprimé, renommé ou déplacé dans un autre dossier après la publication.
• La photo était hébergée sur un autre site ou un compte qui n'existe plus, ou ce site interdit l'affichage de ses images ailleurs.
• L'adresse contient des majuscules ou des espaces qui ne correspondent pas au vrai nom du fichier (beaucoup de serveurs considèrent Photo.JPG et photo.jpg comme deux fichiers différents).
• L'adresse de l'image commence par http:// alors que votre site est en https://. Les navigateurs essaient de passer ces images en https automatiquement, mais les bloquent dans certains cas, par exemple quand l'image est déclarée dans une liste de tailles (srcset) ou dans une balise picture, ou quand elle est appelée via une adresse IP au lieu d'un nom de domaine.

Test rapide : sur le téléphone, appuyez longuement sur l'emplacement vide et ouvrez l'image dans un nouvel onglet si l'option apparaît ; sur ordinateur, faites un clic droit. Si une page d'erreur s'affiche à la place de la photo, c'est le lien. Autre indice : une image absente à la fois sur mobile et sur ordinateur, dans tous les navigateurs, c'est presque toujours un lien cassé.

Cause n° 3 : un format que le navigateur du téléphone ne lit pas

Celle-ci déroute souvent, car la photo s'affiche parfaitement sur le téléphone qui a servi à la mettre en ligne.

• Les photos HEIC de l'iPhone. L'iPhone enregistre souvent les photos au format HEIC (HEIF). Safari ne l'affiche que depuis la version 17, et Chrome, Firefox ou Edge ne l'affichent pas du tout. Mise en ligne sans conversion, une photo HEIC reste visible sur votre iPhone, tandis que les visiteurs sous Android voient un vide. Exportez-la en JPEG avant de la charger ou, pour les photos destinées au site, choisissez Réglages > Appareil photo > Formats > Le plus compatible.
• De l'AVIF ou du WebP sans solution de secours. Les formats modernes sont le bon choix, mais Safari ne lit l'AVIF que depuis la version 16 : un ancien iPhone resté sous iOS 15 ou antérieur peut afficher un espace vide. La configuration sûre sert l'AVIF ou le WebP avec un JPEG de secours via la balise picture, ce que font les bons plugins d'optimisation.

Cause n° 4 : un lazy-load trop agressif

Les sites modernes utilisent le chargement différé, ou lazy-load : les images plus bas dans la page ne se téléchargent que lorsque vous en approchez en faisant défiler. Bien réglé, il économise des données et accélère le premier affichage.

Le souci vient d'un mauvais réglage. Sur mobile, on fait défiler vite avec le pouce : la photo n'a pas le temps d'arriver, reste vide une seconde ou deux puis apparaît d'un coup, surtout sur une connexion lente.

La recommandation de Google est claire : ne pas appliquer le lazy-load aux images visibles dès l'ouverture de la page, et surtout pas à la grande image du haut (souvent l'élément sur lequel se mesure le LCP, l'indicateur de vitesse d'affichage du contenu principal). Certains plugins d'optimisation et thèmes l'appliquent à toutes les images, y compris celle du haut, et c'est précisément ce qui provoque ce retard.

Autre point faible : les carrousels et galeries qui chargent leurs photos par script. Si le script échoue ou qu'un plugin d'optimisation en retarde le chargement, ces images peuvent rester vides sur mobile.

La solution n'est pas de désactiver complètement le lazy-load, mais de charger la première image tout de suite (sans lazy-load, en priorité haute) et le reste au fil du défilement.

Cause n° 5 : le thème masque l'image sur mobile, ou le cache montre une ancienne version

• Masquée sur mobile. Beaucoup de thèmes et de constructeurs de pages permettent de masquer une section sur petit écran ou de prévoir une image dédiée au mobile. Si cette image mobile n'a jamais été choisie, ou si l'option « masquer sur mobile » est restée activée, la photo existe sur ordinateur et n'apparaît tout simplement pas sur le téléphone. Vérifiez les réglages responsive (mobile) de la section dans votre éditeur.
• Une ancienne copie en cache. Si vous avez remplacé une photo et voyez encore l'ancienne (ou une image cassée), une copie peut être stockée dans le navigateur, dans un plugin de cache ou sur un CDN. Videz le cache du site depuis le plugin ou l'espace client de votre hébergeur, puis vérifiez en navigation privée.

Si les images ne se chargent sur aucun site, vérifiez d'abord le téléphone

Si les photos manquent partout, pas seulement sur votre site, le site n'y est pour rien. Quelques vérifications :

• Passez du wi-fi aux données mobiles (et inversement) pour écarter une connexion faible ou filtrée.
• Désactivez un instant le VPN, le bloqueur de publicités ou de contenu, puis rechargez la page.
• Le temps du test, écartez les modes d'économie de données. Sur Android, c'est en général Paramètres > Réseau et Internet > Économiseur de données (les intitulés varient selon les marques) ; sur iPhone, le mode Faibles données se trouve dans Réglages > Données cellulaires > Options, ou dans les infos du réseau wi-fi auquel vous êtes connecté.
• Videz le cache du navigateur ou ouvrez la page en navigation privée ; si rien ne change, redémarrez le téléphone.

Comment vérifier votre site en quelques minutes

• Ouvrez le site sur votre téléphone en données mobiles, pas en wi-fi : c'est ce que voit votre vrai client.
• Enregistrez quelques photos et regardez leur poids. Des mégaoctets par image, c'est un signal clair.
• Comparez les appareils : absente aussi sur ordinateur, dans tous les navigateurs, c'est un lien cassé ; présente sur ordinateur mais lente sur mobile, c'est le poids ou le lazy-load ; visible sur iPhone mais pas sur Android, c'est le format.
• Passez la page dans PageSpeed Insights, onglet mobile. Regardez les recommandations sur la diffusion des images (« Improve image delivery » : images trop lourdes, trop grandes ou dans un format ancien) et sur la découverte de la requête LCP (« LCP request discovery » : l'image principale est-elle en lazy-load ou repérée trop tard). Selon la langue de l'interface, ces intitulés peuvent être traduits.

Le plus souvent, ces vérifications suffisent pour savoir, sans deviner, laquelle des causes ci-dessus vous concerne. Si c'est la note qui vous inquiète, voici comment améliorer votre score PageSpeed Insights sans être développeur.

Que faire ensuite

S'il ne s'agit que de quelques photos, vous pouvez les redimensionner, les compresser et les convertir vous-même avec un outil gratuit, puis les remettre en ligne. Si tout le site est chargé d'images lourdes ou que des carrés vides apparaissent à plusieurs endroits, c'est plus qu'une corvée d'une soirée et cela mérite d'être fait proprement.

C'est ainsi que nous travaillons chez MPO Web Studio, un petit studio web basé à Cluj-Napoca : nous préparons les images dans des formats modernes avec une solution de secours, aux bonnes dimensions pour le mobile, et nous réglons le lazy-load pour que la première photo s'affiche tout de suite et que les suivantes arrivent en douceur. Nous travaillons à distance, avec des tarifs annoncés clairement à l'avance, et pour les nouveaux clients nous réalisons d'abord une version démo gratuite, pour que vous voyiez le résultat avant de décider.

Si vous le souhaitez, envoyez-nous un message WhatsApp avec l'adresse de votre site : nous vous dirons honnêtement lequel de ces problèmes vous avez et combien de temps il faudrait pour le régler.