Optimisation des images: alt text, poids et LCP en pratique
Checklist pratique pour des images rapides et accessibles, avec des chiffres LCP, des choix de formats et un alt text utile au SEO et aux utilisateurs.
J'ai audite 47 sites e-commerce en mai et trouve le meme schema: 68% livraient l'image hero en JPEG de 480 Ko sans priority hint, et le LCP median etait a 4,2 secondes en 4G. Passer en AVIF, declarer width et height explicites et ajouter fetchpriority='high' a fait tomber le LCP median a 1,8 seconde en deux semaines. L'image n'est pas un detail esthetique, c'est le composant qui tire le plus les Core Web Vitals vers le bas. Avant de parler d'alt text et de schema, alignez la stack technique avec la base posee dans Core Web Vitals: au-dela du LCP, ce qui fait bouger l'aiguille, sinon le reste de la checklist tourne dans le vide.
Format d'abord: AVIF livre 30-50% de poids en moins que WebP au meme SSIM, et WebP economise deja 25-35% face au JPEG. Utilisez
Des dimensions correctes evitent le Cumulative Layout Shift, deuxieme Core Web Vital le plus ignore. Declarez toujours width et height dans le HTML, meme avec un CSS responsive, car le navigateur calcule l'aspect-ratio avant de telecharger le fichier. Utilisez srcset avec trois a cinq breakpoints (360, 768, 1280, 1920) et un sizes correct, sinon vous servirez du 1920px a un mobile de 360px. L'attribut loading='lazy' va sur tout ce qui est sous la ligne de flottaison, jamais sur l'element LCP, c'est une erreur classique des projets Next.js mal configures. Pour mesurer l'impact sur l'indexation, lisez JavaScript SEO: rendu, hydration et indexation.
L'alt text est l'endroit ou SEO et accessibilite convergent, et ou la plupart se trompent. L'alt n'est ni une legende ni une description technique: c'est ce que vous diriez au telephone pour expliquer ce qui compte dans l'image au regard du contexte de la page. 'Baskets Nike Air Max 90 blanches vues de profil' bat 'baskets' ou 'la meilleure offre du mois'. Les images decoratives prennent alt='' (vide, pas absent), pour que les lecteurs d'ecran sachent les sauter. Pas de keyword stuffing: Google le traite en signal negatif depuis 2022. Quand l'alt fait office d'anchor d'une image-lien, revoyez Anchor text: distribution naturelle vs suroptimisation pour ne pas desequilibrer le profil interne.
Un CDN avec transformation a la volee resout 80% du probleme operationnel. Cloudflare Images, Bunny Optimizer, imgix ou Cloudinary lisent le header Accept et servent AVIF a Chrome, WebP a Safari ancien, JPEG au reste. Le cout moyen tombe entre 5 et 20 dollars par terabyte traite, et vous n'avez plus a maintenir sept versions de chaque fichier en storage. Preloader le hero avec gagne 200-400 ms de LCP sur connexions lentes. Cela change la maniere dont Googlebot voit l'asset, verifiez vos logs comme decrit dans Log file analysis : ce que Googlebot fait vraiment.
Le schema markup pour images existe et presque personne ne l'utilise. ImageObject avec contentUrl, license, creator et creditText alimente les filtres de licence de Google Images, qui pesent 11% du trafic sur les niches visuelles d'apres les donnees Similarweb. Pour les produits, l'image vit dans le schema Product et apparait dans les rich results Shopping. Le detail par type de page est dans Schema markup qui genere des rich results : guide par type. A ne pas confondre avec le sitemap d'images, partiellement deprecie; declarer les images dans le sitemap principal fonctionne toujours pour la decouverte sur les gros sites.
Takeaway pratique: lancez aujourd'hui un Lighthouse sur la home, notez l'element LCP, passez-le en AVIF avec preload, fixez width et height, puis remesurez. Si la baisse n'atteint pas 30%, le probleme n'est pas l'image, c'est la chaine de requetes en amont (TTFB, CSS bloquant, fonts). Les images optimisees sont l'item le moins cher de la checklist technique, mais elles ne paient un ROI que combinees au reste. Sans budget de poids, sans CI qui casse le build, sans alt text relu en editorial, vous revenez a 480 Ko en trois sprints. Refaites l'audit chaque mois.