Vous ouvrez votre site : le texte s'affiche, les blocs se dessinent… mais les photos restent des rectangles gris pendant trois, cinq, parfois huit secondes. Sur mobile en 4G, c'est pire. Des images qui mettent trop de temps à apparaître dégradent directement votre LCP, votre taux de rebond et la confiance de vos visiteurs — surtout en e-commerce où le visuel déclenche l'achat.
Chez Apresta, nous voyons ce symptôme chaque semaine chez des PME lilloises : catalogues exportés en JPEG 4000 px, sliders hero non optimisés, lazy loading mal configuré sur l'image principale. La correction est rarement « refaire toutes les photos » : c'est une question de formats, de dimensions, de priorités de chargement et parfois de CDN.
Symptômes : reconnaître un problème d'images, pas de « connexion lente »
Les signaux typiques sont faciles à repérer une fois qu'on sait où regarder. PageSpeed Insights indique LCP element = image avec un délai supérieur à 2,5 s. Le texte et le menu apparaissent immédiatement, mais les photos produit ou hero arrivent en dernier. Un effet « pop-in » progressif au scroll révèle que les images below the fold mettent aussi du temps. Le site est fluide en Wi-Fi bureau, très lent en 4G sur le trajet Métro lillois. Le poids images dépasse 1 Mo par page sur une vitrine ou fiche produit. Les Core Web Vitals LCP restent en orange ou rouge malgré un hébergement correct.
Ce qui n'est pas un problème d'images : si tout le site met du temps à répondre (TTFB élevé), c'est plutôt hébergement ou cache — voir CDN et hébergement. Une lenteur uniquement au premier clic pointe vers INP et JavaScript — voir INP expliqué. Des images rapides mais une page qui « saute » signale un problème CLS (dimensions non définies).
Si PageSpeed nomme explicitement votre hero ou photo produit comme élément LCP avec un temps de chargement réseau élevé, commencez par les images — pas par le SEO éditorial.
Causes fréquentes : pourquoi vos visuels traînent
Fichiers surdimensionnés en pixels et en poids
Une vignette affichée à 300 px de large exportée en 3000 px : le navigateur télécharge 10× trop de données. Fréquent sur les catalogues e-commerce alimentés par des photos studio haute résolution.
Formats obsolètes (JPEG/PNG non compressés)
JPEG qualité 100 %, PNG pour des photos complexes, absence de WebP ou AVIF. Un hero à 2,5 Mo en JPEG peut descendre à 180 Ko en AVIF sans perte visible.
Pas de responsive images (srcset)
Le mobile télécharge la même image 1920 px que le desktop. Sur smartphone, c'est du gaspillage direct.
Lazy loading appliqué à l'image LCP
Erreur classique post-optimisation : loading="lazy" sur le hero ou la photo produit principale. Le navigateur retarde volontairement le chargement de l'élément le plus important.
Absence de preload sur l'image critique
Le navigateur découvre l'image LCP tard dans le parsing HTML, après le CSS et parfois après du JavaScript bloquant.
CDN absent ou mal configuré
Images servies depuis un serveur distant sans compression à la volée ni cache edge. Chaque visiteur en Hauts-de-France télécharge depuis un datacenter mal géolocalisé.
Scripts ou carrousels qui retardent le rendu
Sliders JavaScript qui n'affichent l'image qu'après initialisation du plugin. Le LCP attend le JS.
La cause la plus fréquente chez nos clients : une combinaison de fichiers surdimensionnés et de lazy loading mal appliqué sur l'image hero. Corrigez ces deux points avant de toucher au reste.
Diagnostic : trouver les images coupables en 30 minutes
Commencez par identifier le LCP. PageSpeed Insights affiche la section « Améliorer l'affichage des images » et « Détection du LCP ». Chrome DevTools → Network → filtrer Images → trier par Taille permet de repérer les 10 fichiers les plus lourds et leur temps de chargement.
Ensuite, vérifiez la configuration : l'image LCP a-t-elle loading="lazy" ? (à retirer). Les dimensions width/height ou aspect-ratio CSS sont-elles définies ? (CLS). Quels formats sont servis : WebP/AVIF ou JPEG brut ? Un preload est-il présent sur l'image hero ?
Pour un audit catalogue complet (plus tard) : crawler les URLs produit (Screaming Frog) et lister le poids média par page, comparer poids mobile vs desktop (DevTools throttling 4G), vérifier si le CMS génère automatiquement les tailles intermédiaires.
Ordre de grandeur : sur un site e-commerce moyen, 20 % des images représentent 80 % du poids total. Commencez par elles.
Corrections : plan par priorité
Étape 1 — Optimiser l'image LCP (gain immédiat sur Core Web Vitals)
Identifiez l'élément LCP sur accueil, catégorie et fiche produit. Redimensionnez à 2× la taille d'affichage CSS max (Retina). Convertissez en WebP ou AVIF avec fallback JPEG. Ajoutez <link rel="preload" as="image"> sur le hero. Retirez le lazy loading de cette image. Compressez à qualité 75–85 % — test visuel obligatoire.
Gain typique : 1 à 3 secondes de LCP en moins.
Étape 2 — Déployer les formats modernes sur tout le site
Activez la conversion automatique WebP/AVIF (ShortPixel, Imagify, Cloudflare Polish, CDN image). Utilisez <picture> avec sources multiples si conversion manuelle. Gardez JPEG comme fallback pour compatibilité.
Guide complet : images optimisées pour le web.
Étape 3 — Responsive images avec srcset
Générez 3 à 5 tailles par image (mobile, tablette, desktop, Retina). L'attribut sizes doit correspondre au layout CSS. Ne servez jamais une image 1600 px sur un viewport 375 px.
Étape 4 — Lazy loading intelligent below the fold
Appliquez loading="lazy" sur toutes les images sauf LCP. Réservez l'espace avec width/height pour éviter le CLS. Limitez le nombre de miniatures chargées d'un coup sur mobile (pagination ou infinite scroll raisonnable).
Étape 5 — CDN images et compression à la volée
Cloudflare, BunnyCDN Optimizer, Imgix ou équivalent : redimensionnement et conversion automatiques via URL params, cache long sur assets versionnés. Budget indicatif PME : 0 à 30 €/mois selon volume — souvent rentabilisé en bande passante dès le premier mois.
Étape 6 — Remplacer les carrousels lourds
Un hero statique optimisé bat un slider 5 slides non lazy-loadées. Si slider indispensable : charger uniquement la première slide en eager, les autres en lazy. Évitez les plugins jQuery carousel sur mobile.
Cas récent en MEL : fiche produit textile, photo principale 3,8 Mo JPEG. Conversion AVIF 1600 px + preload + retrait lazy : LCP passé de 5,1 s à 1,9 s. Travail : 2 heures sur le template + batch conversion catalogue.
Prévention : ne plus accumuler de visuels lourds
Intégrez dès maintenant une charte export photo (largeur max, format, qualité, nommage), une compression automatique à l'upload dans le CMS, une revue mensuelle des 20 pages les plus visitées (poids images), et un test LCP après chaque changement de hero ou bannière promo.
Pièges à éviter : uploader les fichiers bruts du photographe sans pipeline, activer un plugin « optimisation » qui lazy-load tout sans exception, utiliser des images Unsplash 5000 px en pleine largeur, oublier les images Open Graph et favicons haute résolution dans les audits.
Pour le lien qualité visuelle / conversion : photos et vidéos produits : impact sur les ventes.
FAQ
Mes images sont belles — optimiser ne va-t-il pas les dégrader ?
Non, si c'est bien fait. WebP/AVIF à qualité 80 % est visuellement identique au JPEG 95 % pour le web. Ce qui dégrade la confiance, c'est une photo qui met 6 secondes à apparaître — pas une compression imperceptible.
Faut-il retraiter tout mon catalogue de 3 000 produits ?
Pas manuellement une par une. Utilisez un batch (ShortPixel, TinyPNG API, script Sharp) sur les images les plus lourdes d'abord, puis une règle automatique à l'upload pour les nouveautés. Priorisez les 50 fiches produit les plus vendues.
Le lazy loading natif suffit-il ?
Oui pour 90 % des cas — à condition de ne pas l'appliquer au LCP et de définir les dimensions. Les scripts JS de lazy load custom ajoutent souvent plus de poids qu'ils n'en retirent.
Shopify ou PrestaShop gèrent-ils ça nativement ?
Shopify génère des tailles responsive automatiquement — mais les uploads originaux lourds restent un problème si le thème charge la taille max partout. PrestaShop/WooCommerce demandent souvent un plugin ou une configuration thème explicite.
Combien de temps pour corriger un site vitrine de 15 pages ?
Comptez 1 à 3 jours pour optimiser templates + hero + images clés. Un catalogue e-commerce complet : 1 à 3 semaines selon volume, surtout si batch automatisé.
Et maintenant ?
Des images lentes ne sont pas un mal nécessaire — c'est un pipeline de production à corriger. Commencez par identifier votre LCP, optimisez cette image en priorité, puis généralisez formats modernes et lazy loading intelligent.