Optimisation des Images PrestaShop : Balises Alt, Lazy Loading et Vitesse de Chargement

Les images constituent la charge la plus lourde sur pratiquement toutes les boutiques PrestaShop avec lesquelles j'ai travaille. Photographies de produits, bannieres de categories, visuels promotionnels — sur une page type de listing produits, les images representent 50 a 70 % du poids total de la page. Selon les donnees de HTTP Archive, le poids median des images sur les pages mobiles a ete multiplie par plus de dix entre 2011 et 2025 (source : NitroPack). Ce n'est pas une tendance — c'est une course aux armements contre la vitesse de chargement.

Et la vitesse de chargement ne concerne plus uniquement l'experience utilisateur. Les images sont responsables de l'element Largest Contentful Paint (LCP) sur 85 % des pages desktop et 76 % des pages mobiles (source : MDN). Votre image principale de produit est presque certainement votre element LCP, ce qui signifie que votre strategie d'optimisation des images determine directement si Google considere vos Core Web Vitals comme « bons », « a ameliorer » ou « mediocres ».

Ce guide couvre tout ce que j'ai appris en optimisant les images sur des dizaines de boutiques PrestaShop : selection du format avec des donnees reelles de taille de fichier, reglages de qualite de compression, implementation du lazy loading natif, l'attribut fetchpriority que la plupart des boutiques n'utilisent toujours pas, l'impact sur les Core Web Vitals, la regeneration des images PrestaShop, et des chiffres avant/apres issus de boutiques en production.

Formats d'image : JPEG vs. WebP vs. AVIF — avec des chiffres reels

Mettons fin au debat sur les formats avec des donnees concretes. J'ai fait passer la meme photo produit de 800x800 (un portefeuille en cuir sur fond blanc — un cliche e-commerce typique) dans chaque format a qualite visuelle comparable :

Les chiffres parlent d'eux-memes. Mais le choix du format ne se resume pas aux taux de compression — il s'agit de savoir quel format utiliser a quel endroit.

JPEG : la reference

Le JPEG reste le choix par defaut le plus sur. Support universel par les navigateurs, rendu previsible et comportement de compression bien maitrise. Pour les boutiques qui ne peuvent pas mettre en place la negociation de format (servir differents formats a differents navigateurs), le JPEG a une qualite de 80-85 est tout a fait acceptable. Au-dessus de 85, la taille du fichier augmente considerablement avec des gains de qualite quasi imperceptibles — la plupart des gens ne distinguent pas un JPEG 85 d'un JPEG 100 sur une photo de produit.

WebP : le gagnant pragmatique

Le WebP offre une reduction de taille de 25 a 35 % par rapport au JPEG a qualite visuelle equivalente. Avec 97 % de support navigateur en 2026 — tous les navigateurs modernes y compris Safari — il n'y a plus de raison valable d'eviter le WebP comme format principal. Le reglage de qualite optimal pour le WebP se situe entre 75 et 85, ou vous obtenez le meilleur equilibre entre compression et fidelite visuelle.

Pour les boutiques PrestaShop, le WebP est le format que je recommande comme standard de production aujourd'hui. L'ecart de compatibilite navigateur est negligeable, et les gains sont substantiels.

AVIF : le leader de la performance

L'AVIF produit des fichiers jusqu'a 50 % plus petits que le JPEG — soit environ le double des gains du WebP. A bas debit (images fortement compressees), l'AVIF maintient une qualite nettement superieure au JPEG et au WebP, produisant moins d'artefacts de compression. Le reglage de qualite recommande est de 60 a 70, ce qui produit generalement un resultat equivalent au JPEG 85 (source : Two Row Studio).

Le bémol : le support navigateur se situe a environ 92 % en 2026. Cela signifie qu'environ 1 visiteur sur 12 pourrait ne pas supporter l'AVIF. La solution est l'element <picture> avec des formats de repli :

<picture>
  <source srcset="product-image.avif" type="image/avif">
  <source srcset="product-image.webp" type="image/webp">
  <img src="product-image.jpg" alt="Portefeuille en cuir bleu - vue de face avec emplacements pour cartes"
       width="800" height="800" loading="lazy">
</picture>

Le navigateur selectionne le premier format qu'il prend en charge. Les navigateurs compatibles AVIF obtiennent le fichier le plus petit. Les navigateurs compatibles WebP obtiennent la meilleure option suivante. Tous les autres se rabattent sur le JPEG. Zero probleme de compatibilite, compression maximale pour chaque visiteur.

PNG : uniquement pour les graphiques

Le PNG utilise une compression sans perte et produit des fichiers considerablement plus volumineux pour les photographies. N'utilisez jamais le PNG pour les photos de produits — il est 3 a 5 fois plus lourd que le JPEG sans aucun benefice visible en termes de qualite. Le PNG est adapte aux logos, icones et graphiques contenant du texte, des bords nets ou des arriere-plans transparents. Pour tout le reste, utilisez le WebP ou l'AVIF.

La compression en pratique : avant et apres

Voici a quoi ressemble l'optimisation des images sur une vraie page de categorie PrestaShop affichant 20 produits :

Avant optimisation

• 20 images produit en PNG (imports originaux) : 11,6 Mo au total
• Banniere de categorie : 1,8 Mo (PNG 4000x1000)
• Charge totale des images : 13,4 Mo
• Temps de chargement : 6,2 secondes (mobile 4G)
• LCP : 4,8 secondes

Apres optimisation

• 20 images produit en WebP (qualite 80, redimensionnees a 600x600) : 1,4 Mo au total
• Banniere de categorie en WebP (redimensionnee a 1920x480) : 95 Ko
• Charge totale des images : 1,5 Mo
• Temps de chargement : 1,8 seconde (mobile 4G)
• LCP : 1,6 seconde

C'est une reduction de 89 % du poids des images et une amelioration de 67 % du LCP — passant de « mediocre » a « bon » sur l'echelle des Core Web Vitals de Google, rien qu'avec les images.

Les deux gains les plus importants n'avaient rien d'exotique : redimensionner aux dimensions d'affichage reelles (personne n'a besoin d'une image de 4000 px affichee a 600 px), et convertir du PNG au WebP. La compression reduit la taille des fichiers de 50 a 80 % grace a l'optimisation avec perte (source : NitroPack).

Balises alt : bien plus qu'une case SEO a cocher

Chaque image de votre boutique a besoin d'un attribut alt descriptif. Ce n'est pas optionnel — il remplit trois fonctions distinctes :

1. Accessibilite : Les lecteurs d'ecran utilisent le texte alt pour decrire les images aux utilisateurs malvoyants. Dans de nombreuses juridictions (UE, USA, Royaume-Uni), l'accessibilite web est une obligation legale. Une boutique e-commerce avec des balises alt vides est potentiellement non conforme.
2. SEO : Les moteurs de recherche ne voient pas les images. Le texte alt est la facon dont Google comprend ce que represente une image, ce qui determine si elle apparait dans les resultats de Google Images. Pour les images de produits, la recherche d'images peut generer 10 a 15 % du trafic organique total.
3. Solution de repli : Lorsqu'une image ne se charge pas (connexion lente, panne CDN, chemin casse), le texte alt s'affiche a la place, maintenant le contexte pour l'utilisateur.

Rediger des balises alt qui fonctionnent vraiment

J'ai audite des centaines de boutiques PrestaShop, et les memes erreurs de balises alt reviennent partout :

Mauvais :

alt=""                          — Vide, n'apporte aucune information
alt="image1"                    — Nom de fichier sans signification
alt="product"                   — Trop generique
alt="buy cheap blue leather wallet best price free shipping" — Bourrage de mots-cles

Bon :

alt="Portefeuille en cuir bleu pliant, vue de face avec emplacements pour cartes"
alt="Portefeuille en cuir cousu main en bleu marine, ouvert montrant 6 poches pour cartes"
alt="Emballage du portefeuille — coffret cadeau avec fermeture magnetique"

La formule : nom du produit + caractéristique distinctive + contexte. Restez sous les 125 caracteres. Decrivez ce que l'image montre reellement — pas ce pour quoi vous voulez vous positionner.

Pour un produit avec 5 images, chaque balise alt doit etre unique, decrivant cet angle ou cette vue specifique. Pas cinq copies du nom du produit.

Automatiser les balises alt dans PrestaShop

Rediger manuellement des balises alt pour 5 000 produits avec 3 a 5 images chacun n'est pas realiste. Cela represente 15 000 a 25 000 balises alt individuelles. Utilisez un module comme Automatic SEO Images Alt Tags pour generer des balises alt a partir des donnees produit — nom du produit, categorie, attributs cles — puis revisez et ameliorez manuellement les produits a plus fort trafic.

Les balises alt automatisees ne sont pas parfaites, mais elles sont infiniment meilleures que des attributs alt vides sur l'ensemble de votre catalogue.

Lazy loading : le gain rapide le plus important pour la vitesse de chargement

Le lazy loading differe le telechargement des images jusqu'a ce qu'elles soient sur le point d'entrer dans le viewport (la zone visible de l'ecran). Sur une page de categorie affichant 40 produits, seuls les 4 a 8 premiers sont visibles sans defiler — le lazy loading signifie que les 32 a 36 autres images ne consomment pas de bande passante tant que l'utilisateur ne fait pas defiler jusqu'a elles.

Lazy loading natif : l'approche moderne

Comme le HTML prend desormais en charge le lazy loading nativement, l'implementation se resume a un attribut :

<img src="product.webp" alt="Portefeuille en cuir bleu"
     width="600" height="600" loading="lazy">

C'est tout. Pas de bibliotheque JavaScript, pas de configuration, pas de polyfill. L'attribut loading="lazy" est supporte par 95 % des navigateurs en 2026. Les navigateurs qui ne le supportent pas chargent simplement l'image normalement — une degradation elegante sans aucun inconvenient.

L'erreur critique : appliquer le lazy loading a votre image LCP

C'est l'erreur de performance la plus courante que je constate, et l'equipe MDN Web Docs la signale specifiquement : 16 % des pages appliquent le lazy loading a leur image LCP, ce qui constitue l'un des schemas de performance les plus penalisants sur le web (source : MDN).

Votre image LCP — generalement l'image principale du produit sur une page produit, ou la premiere image produit visible sur une page de categorie — doit se charger le plus rapidement possible. Lui appliquer le lazy loading ajoute un delai artificiel : le navigateur doit d'abord rendre la mise en page, puis calculer que l'image est dans le viewport, puis commencer a la telecharger. Cela ajoute 200 a 500 ms a votre temps LCP.

L'approche correcte pour votre image LCP :

<img src="hero-product.webp" alt="Portefeuille en cuir bleu - image principale du produit"
     width="800" height="800"
     loading="eager"
     fetchpriority="high">

L'attribut loading="eager" (le comportement par defaut du navigateur) assure un chargement immediat. L'attribut fetchpriority="high" indique au navigateur de prioriser cette image par rapport aux autres ressources comme les feuilles de style et les scripts. En 2026, fetchpriority est supporte par tous les navigateurs modernes, et pourtant seulement 17 % des pages l'utilisent sur leur image LCP (source : Two Row Studio). C'est une optimisation massivement sous-exploitee.

La regle : eager au-dessus de la ligne de flottaison, lazy en dessous

• Image principale de la page produit : loading="eager" fetchpriority="high"
• Premiere ligne de produits en page categorie (generalement 3-4 images) : loading="eager"
• Tout le reste : loading="lazy"
• Logo et images de navigation : loading="eager" (toujours visibles)

Implementer ce schema sur une boutique PrestaShop necessite generalement de modifier le template produit et le template de listing categorie. Un module comme Automatic SEO Images Lazy Tags gere cela automatiquement, appliquant le lazy loading aux images sous la ligne de flottaison tout en gardant les images critiques en eager.

Lazy loading base sur JavaScript : quand vous avez besoin de plus de controle

Le lazy loading natif couvre 95 % des cas d'usage. Les 5 % restants — les cas ou vous avez besoin d'animations de fondu, de chargement progressif avec des espaces reserves flous, ou d'un controle specifique du seuil — necessitent une approche JavaScript. Des bibliotheques comme lazysizes ou lozad.js fournissent ces fonctionnalites tout en maintenant de bonnes performances.

Cependant, le lazy loading base sur JavaScript ajoute sa propre surcharge (telechargement, analyse et execution du script). Pour la plupart des boutiques PrestaShop, le lazy loading natif est suffisant et preferable.

Prevenir le decalage de mise en page (CLS) avec des dimensions d'image appropriees

Le Cumulative Layout Shift (CLS) mesure a quel point le contenu de la page se deplace de maniere inattendue pendant le chargement. Les images sans attributs width et height explicites sont la cause principale du CLS sur les sites e-commerce — a mesure que chaque image se charge, le navigateur recalcule la mise en page, deplacant le contenu.

La solution est simple : incluez toujours les attributs width et height sur chaque balise <img> :

<img src="product.webp" alt="Portefeuille en cuir bleu"
     width="600" height="600" loading="lazy">

Avec le CSS, vous pouvez toujours rendre les images responsives tout en evitant le decalage de mise en page :

img {
  max-width: 100%;
  height: auto;
}

Le navigateur utilise les attributs width et height pour calculer le ratio d'aspect avant le chargement de l'image, reservant l'espace correct dans la mise en page. Ajouter les attributs width et height elimine la plupart des problemes de CLS entierement (source : NitroPack).

Images responsives : servir la bonne taille a chaque appareil

Une image produit de 1200 px affichee a 300 px sur un telephone mobile gaspille 75 % des octets telecharges. Les images responsives resolvent ce probleme en fournissant plusieurs tailles et en laissant le navigateur choisir la plus appropriee :

<img srcset="product-300w.webp 300w,
             product-600w.webp 600w,
             product-900w.webp 900w,
             product-1200w.webp 1200w"
     sizes="(max-width: 576px) 300px,
            (max-width: 768px) 600px,
            900px"
     src="product-900w.webp"
     alt="Portefeuille en cuir bleu"
     width="900" height="900"
     loading="lazy">

L'attribut srcset liste les fichiers image disponibles avec leurs largeurs. L'attribut sizes indique au navigateur quelle taille d'affichage attendre a differentes largeurs de viewport. Le navigateur combine ces informations avec la densite de pixels de l'appareil pour selectionner le fichier optimal.

PrestaShop genere plusieurs tailles d'image via sa configuration des types d'images (Back Office → Design → Parametres d'images). Assurez-vous d'avoir des types d'images configures pour les tailles que votre theme utilise reellement. Tailles courantes pour les images produit :

• Petite miniature : 125x125 (panier, mini-panier)
• Moyenne : 300x300 (listings categorie sur mobile)
• Grande : 600x600 (listings categorie sur desktop)
• Tres grande : 1200x1200 (image principale produit, zoom)

Regeneration des images PrestaShop

Apres avoir modifie les dimensions des types d'images ou ajoute de nouveaux types, vous devez regenerer toutes les images produit. PrestaShop doit creer de nouvelles miniatures aux tailles mises a jour.

Via le Back Office

Rendez-vous dans Design → Parametres d'images et cliquez sur « Regenerer les miniatures » en bas de la page. Selectionnez les types d'images a regenerer (produits, categories, marques) et si vous souhaitez supprimer les anciennes miniatures inutilisees.

Pour les gros catalogues, ce processus peut expirer dans le navigateur. L'approche via le back office fonctionne pour les boutiques avec moins de 2 000 produits.

Via la ligne de commande (gros catalogues)

Pour les boutiques avec des milliers de produits, utilisez la commande CLI qui n'a pas de limitation de timeout navigateur :

php bin/console prestashop:image:regenerate --type=products

Options disponibles :

• --type=products — regenerer uniquement les images produit
• --type=categories — regenerer les images de categories
• --type=manufacturers — regenerer les images de marques/fabricants
• Omettre --type pour regenerer tous les types d'images

Pour les tres gros catalogues (10 000+ produits avec plusieurs images chacun), ce processus peut prendre des heures. Lancez-le pendant les heures creuses et surveillez les ressources serveur — le traitement d'images est intensif en CPU.

Conversion en WebP

PrestaShop 1.7.8+ et 8.x supportent la generation d'images WebP nativement. Activez-la dans Design → Parametres d'images → Options de generation d'images. Une fois active, PrestaShop genere des versions WebP en parallele des originaux JPEG/PNG lors de la regeneration.

Si votre version de PrestaShop ne supporte pas la generation native de WebP, des solutions au niveau serveur comme mod_pagespeed (Apache) ou des CDN d'images comme la fonctionnalite Polish de Cloudflare peuvent convertir les images a la volee. Un module dedie d'optimisation d'images comme Performance Revolution peut gerer la conversion de format, la compression et le lazy loading dans un seul package.

Suppression des metadonnees EXIF

Les photos de produits prises avec des appareils photo ou des smartphones contiennent des metadonnees EXIF — modele de l'appareil, coordonnees GPS, horodatages, profils colorimétriques. Ces donnees ajoutent 50 a 200 Ko par image et n'apportent aucune valeur a vos visiteurs. Supprimer les donnees EXIF est une reduction gratuite de la taille des fichiers qui ne necessite aucun changement visible de qualite.

La plupart des outils de compression d'images suppriment automatiquement les donnees EXIF. Si vous traitez les images manuellement avant l'import, des outils comme ImageOptim (Mac), FileOptimizer (Windows), ou l'outil en ligne de commande exiftool permettent de supprimer les metadonnees en lot sur l'ensemble de votre bibliotheque d'images.

Note : PrestaShop ne supprime pas les donnees EXIF a l'import par defaut. Les metadonnees que contiennent vos images originales seront conservees dans toutes les miniatures generees.

Core Web Vitals : comprendre les chiffres

Les Core Web Vitals de Google sont les metriques de performance qui impactent directement votre positionnement dans les recherches. L'optimisation des images affecte deux des trois metriques :

Largest Contentful Paint (LCP)

Le LCP mesure le temps necessaire pour que le plus grand element visible s'affiche — presque toujours une image sur les pages e-commerce. Les seuils de Google :

• Bon : Moins de 2,5 secondes
• A ameliorer : De 2,5 a 4,0 secondes
• Mediocre : Plus de 4,0 secondes

Optimiser votre image LCP — format correct, taille appropriee, fetchpriority="high", pas de lazy loading, preload si necessaire — est l'action la plus impactante que vous puissiez entreprendre pour les Core Web Vitals de votre boutique. Des etudes de cas montrent des resultats spectaculaires : NDTV a ameliore son LCP de 55 %, ce qui a entraine une diminution de 50 % du taux de rebond (source : NitroPack).

Cumulative Layout Shift (CLS)

Le CLS mesure la stabilite visuelle. Les seuils de Google :

• Bon : Moins de 0,1
• A ameliorer : De 0,1 a 0,25
• Mediocre : Plus de 0,25

Pour les images, la solution est toujours la meme : inclure les attributs width et height. Avec ceux-ci en place, les images ne contribuent essentiellement a aucun CLS.

L'impact commercial

Si les metriques techniques vous semblent abstraites, considerez les donnees business :

• Walmart : 1 seconde d'amelioration du temps de chargement = 2 % d'augmentation des conversions
• Zitmaxx Wonen : Score PageSpeed parfait + temps de chargement inferieur a 4 secondes = 50,2 % d'augmentation des conversions mobiles
• Google : Les pages respectant tous les seuils des Core Web Vitals constatent 24 % d'abandons de page en moins

L'optimisation des images n'est pas qu'une tache SEO — c'est une tache d'optimisation du taux de conversion qui impacte directement le chiffre d'affaires.

Mesurer vos progres avec PageSpeed Insights

Avant et apres tout travail d'optimisation, passez vos pages cles dans Google PageSpeed Insights. Concentrez-vous sur :

1. Score LCP — Votre image principale se charge-t-elle assez rapidement ?
2. Score CLS — Les images causent-elles des decalages de mise en page ?
3. Audit « Dimensionner correctement les images » — Servez-vous des images surdimensionnees ?
4. Audit « Diffuser des images dans des formats nouvelle generation » — Utilisez-vous le WebP/AVIF ?
5. Audit « Encoder efficacement les images » — Les niveaux de compression sont-ils optimaux ?
6. Audit « Differer les images hors ecran » — Le lazy loading fonctionne-t-il correctement ?

Lancez les tests mobile et desktop. Le mobile est ce qui compte pour le positionnement (Google utilise l'indexation mobile-first), mais les resultats desktop sont importants pour l'experience utilisateur de votre trafic reel.

Consultez egalement votre rapport Core Web Vitals dans Google Search Console (Experience → Signaux Web essentiels). Ce rapport montre les donnees terrain des vrais utilisateurs — plus precises que les tests en laboratoire, mais avec une moyenne glissante sur 28 jours, ce qui signifie que les ameliorations mettent du temps a se refleter dans le rapport.

Integration du sitemap d'images

L'optimisation des images ne s'arrete pas a la compression et a la strategie de chargement. Pour que vos images apparaissent dans Google Images, il faut une bonne decouverte. Incluez vos images produit dans un sitemap d'images (ou utilisez les extensions d'images dans votre sitemap produits). Le module Advanced SEO Sitemap Builder peut generer automatiquement des sitemaps d'images a partir de votre catalogue produits PrestaShop.

Pour plus de details sur la syntaxe et la structure des sitemaps d'images, consultez notre guide complet sur les sitemaps XML.

La checklist complete d'optimisation des images pour PrestaShop

Voici la checklist priorisee que je suis pour chaque boutique PrestaShop que j'optimise :

1. Redimensionner les images source a la taille d'affichage maximale — Aucune image ne devrait depasser 1200 px sur son cote le plus long pour les images produit (2x la taille d'affichage de 600 px pour les ecrans Retina).
2. Convertir en WebP — Activez la generation WebP dans les parametres d'images PrestaShop et regenerez toutes les miniatures.
3. Regler la qualite de compression a 80 — Pour le JPEG comme pour le WebP. Une qualite au-dessus de 85 ajoute de la taille de fichier avec un benefice visuel imperceptible.
4. Ajouter width et height a toutes les balises img — Empeche le CLS. Les templates de votre theme doivent inclure ces attributs.
5. Implementer le lazy loading — loading="lazy" sur toutes les images sauf la premiere ligne visible et les images de navigation.
6. Ajouter fetchpriority="high" a l'image LCP — Votre image principale produit et la premiere image produit en page categorie.
7. Rediger des balises alt descriptives — Automatisez avec un module, puis ameliorez manuellement les 100 produits les plus visites.
8. Supprimer les metadonnees EXIF — Utilisez un outil de compression qui supprime automatiquement les metadonnees.
9. Implementer les images responsives (srcset) — Servir des tailles appropriees au mobile, a la tablette et au desktop.
10. Envisager l'AVIF avec des solutions de repli — Pour les boutiques ou la compression maximale compte et ou l'implementation de l'element <picture> est faisable.
11. Inclure les images dans le sitemap — Generer un sitemap d'images pour la decouverte via Google Images.
12. Tester avec PageSpeed Insights — Verifier que tous les audits lies aux images passent sur mobile et desktop.

Conclusion

L'optimisation des images est cette rare tache SEO qui beneficie a toutes les parties prenantes. Les utilisateurs obtiennent des pages plus rapides et une meilleure accessibilite. Google obtient des signaux clairs pour la recherche d'images et l'evaluation des Core Web Vitals. Votre serveur gere moins de bande passante. Votre taux de conversion s'ameliore parce que les pages se chargent plus vite. Et votre facture d'hebergement peut meme diminuer.

Commencez par les gains les plus importants : redimensionnez les images surdimensionnees, convertissez en WebP, et implementez le lazy loading avec le bon decoupage eager/lazy. Ces trois changements seuls peuvent reduire le poids de vos pages de 70 % ou plus. Ensuite, ajoutez les raffinements — fetchpriority, images responsives, AVIF avec solutions de repli, balises alt structurees, sitemaps d'images.

Les boutiques que je vois les mieux performer sur PageSpeed ne font rien d'exotique. Elles font les fondamentaux correctement et de maniere coherente sur chaque page du catalogue. C'est tout le secret.