Images WebP dans PrestaShop : configuration et pièges à éviter

Qu'est-ce que le WebP et pourquoi c'est important pour PrestaShop

Le WebP est un format d'image moderne développé par Google qui fournit une compression avec et sans perte pour les images web. Par rapport aux formats traditionnels comme JPEG et PNG, le WebP offre typiquement des fichiers 25 à 35 % plus petits à qualité visuelle équivalente. Pour une boutique e-commerce fonctionnant sous PrestaShop, où les pages produits contiennent souvent des dizaines d'images, passer au WebP peut réduire considérablement le poids des pages, améliorer les temps de chargement et augmenter les scores Core Web Vitals — autant de facteurs qui impactent directement le classement SEO et les taux de conversion.

Contrairement aux anciens formats de nouvelle génération qui peinaient à être adoptés, le WebP a atteint un support quasi universel des navigateurs. En 2026, chaque navigateur majeur — Chrome, Firefox, Safari, Edge, Opera et leurs équivalents mobiles — prend entièrement en charge le WebP. Même les derniers récalcitrants comme les anciennes versions de Safari sur macOS Catalina sont désormais statistiquement négligeables, représentant moins de 0,3 % du trafic mondial. Cela signifie que vous pouvez servir en toute confiance des images WebP à la quasi-totalité de vos visiteurs sans vous soucier des problèmes de compatibilité.

Pour les marchands PrestaShop, les gains de performance sont substantiels. Un catalogue produits typique de 1 000 produits avec 5 images chacun peut voir sa charge d'images totale réduite de 500 Mo à moins de 350 Mo. Sur les pages de listing affichant 20 à 40 vignettes, cela se traduit par 200 à 400 Ko économisés par chargement de page — suffisant pour améliorer significativement les métriques Time to First Contentful Paint et Largest Contentful Paint.

Activer le WebP dans PrestaShop 1.7 et 8.x

PrestaShop 1.7.8+ et toutes les versions 8.x incluent un support natif du WebP. La fonctionnalité est intégrée au système de régénération d'images et peut être activée via le back office. Voici comment l'activer :

1. Naviguez vers Apparence > Paramètres des images (dans PS 8.x) ou Préférences > Images (dans PS 1.7).
2. Recherchez la section Options de génération d'images en bas de la page.
3. Trouvez le paramètre Format d'image et sélectionnez l'une des options liées au WebP. PrestaShop propose généralement : JPEG uniquement, PNG uniquement, WebP uniquement, ou JPEG/PNG + WebP (génère les deux formats).
4. Sélectionnez JPEG/PNG + WebP si vous souhaitez une compatibilité de secours, ou WebP uniquement si vous êtes certain que tous vos visiteurs utilisent des navigateurs modernes.
5. Réglez le curseur de qualité WebP. Une valeur entre 80 et 85 offre un excellent équilibre entre taille de fichier et qualité visuelle pour la photographie de produits.
6. Cliquez sur Enregistrer, puis cliquez sur Régénérer les miniatures pour créer les versions WebP de toutes les images existantes.

Le processus de régénération peut prendre un temps considérable sur les catalogues volumineux. Pour une boutique avec plus de 5 000 produits, prévoyez que le processus dure de 30 minutes à plusieurs heures selon les ressources du serveur. Il est fortement recommandé de lancer la régénération pendant les heures creuses ou via la ligne de commande pour éviter les problèmes de timeout PHP.

Régénération en ligne de commande pour les grands catalogues

Pour les boutiques avec des milliers de produits, la régénération via le navigateur va probablement expirer. Utilisez plutôt l'approche en ligne de commande :

php bin/console prestashop:image:regenerate --format=all

Cette commande s'exécute sans les contraintes de timeout du serveur web. Vous pouvez également cibler des types d'images spécifiques :

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

Sur les versions de PrestaShop 1.7 qui ne disposent pas de la commande console, vous pouvez augmenter les limites de timeout PHP et lancer la régénération via le panneau d'administration, ou utiliser un fichier PHP personnalisé qui appelle directement la classe ImageManager.

Configuration serveur : règles Apache .htaccess

Même après avoir activé la génération WebP dans PrestaShop, votre serveur doit être configuré pour servir le bon format. PrestaShop génère les fichiers WebP à côté des fichiers JPEG/PNG originaux, mais le serveur doit savoir quand servir quel format.

Pour les serveurs Apache, ajoutez les règles suivantes à votre fichier .htaccess dans le répertoire racine de PrestaShop ou dans le répertoire img/ :

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Servir les images WebP si le navigateur les supporte et que le fichier existe
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
  RewriteCond %1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=REQUEST_image,L]
</IfModule>

# Définir le type MIME correct pour le WebP
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

# En-tête Vary pour éviter les problèmes de mise en cache
<IfModule mod_headers.c>
  Header append Vary Accept env=REQUEST_image
</IfModule>

Ces règles fonctionnent comme suit : lorsqu'un navigateur demande un fichier JPEG ou PNG, le serveur vérifie si le navigateur envoie un en-tête Accept: image/webp. Si c'est le cas, et qu'une version .webp du fichier existe sur le disque, le serveur sert de manière transparente le fichier WebP à la place. L'en-tête Vary: Accept garantit que les proxies de mise en cache stockent des versions séparées pour les navigateurs compatibles WebP et ceux qui ne le sont pas.

Assurez-vous que mod_rewrite, mod_mime et mod_headers sont activés sur votre installation Apache. La plupart des environnements d'hébergement mutualisé les ont activés par défaut, mais vous pouvez vérifier auprès de votre hébergeur.

Configuration Nginx

Pour les boutiques fonctionnant sur Nginx, la configuration se fait dans votre bloc server ou un bloc location dans votre fichier de configuration de site :

map $http_accept $webp_suffix {
  default "";
  "~*image/webp" ".webp";
}

server {
  # ... configuration existante ...

  location ~* ^(/img/.+)\.(jpe?g|png)$ {
    set $img_path $1;
    add_header Vary Accept;
    try_files $img_path$webp_suffix $uri =404;
  }
}

La directive map au niveau http vérifie si le client envoie un en-tête Accept compatible WebP et définit une variable en conséquence. Le bloc location utilise ensuite try_files pour d'abord tenter de servir la version WebP, avec un repli vers le format original si le fichier WebP n'existe pas.

Après avoir modifié la configuration Nginx, testez toujours avant de recharger :

nginx -t
nginx -s reload

Considérations CDN

Si vous utilisez un CDN comme Cloudflare, KeyCDN ou Bunny.net devant votre boutique PrestaShop, la livraison WebP nécessite une attention supplémentaire.

Cloudflare

Cloudflare offre une conversion WebP intégrée via sa fonctionnalité Polish (disponible sur les plans Pro et supérieurs). Lorsque Polish est activé avec la conversion WebP, Cloudflare convertit automatiquement les images en WebP en périphérie — ce qui signifie que vous n'avez pas besoin de générer des fichiers WebP sur votre serveur. Cependant, soyez conscient de ces mises en garde :

• Polish ne fonctionne que pour les images servies via le proxy de Cloudflare (nuage orange activé).
• Il ne convertit pas les images de plus de 10 Mo ou les images avec certains profils couleur.
• La conversion initiale ajoute de la latence à la première requête ; les requêtes suivantes sont servies depuis le cache.
• Si vous générez également du WebP localement, vous risquez une double conversion, ce qui peut légèrement dégrader la qualité.

Si vous préférez servir vos propres fichiers WebP via Cloudflare, assurez-vous que l'en-tête Vary: Accept est géré correctement. Par défaut, Cloudflare supprime l'en-tête Vary. Vous devrez peut-être créer une Cache Rule ou utiliser un Worker pour assurer une négociation de contenu correcte.

Autres CDN

La plupart des CDN modernes prennent en charge la négociation de contenu basée sur l'en-tête Accept, mais vous devez l'activer explicitement. Consultez la documentation de votre CDN pour « support de l'en-tête Vary » ou « négociation de contenu ». Certains CDN nécessitent d'activer « Mise en cache par en-tête Accept » dans vos règles de cache. Sans cela, le CDN peut mettre en cache la première version qu'il voit (JPEG ou WebP) et la servir à tous les visiteurs indépendamment du support du navigateur.

Paramètres de qualité d'image

Choisir le bon réglage de qualité WebP est crucial. Trop élevé, et vous perdez les avantages en taille de fichier ; trop bas, et les images de produits apparaissent floues ou montrent des artefacts de compression — un problème rédhibitoire pour le e-commerce.

Voici les réglages de qualité recommandés par type d'image :

• Images produits (vues grandes/détaillées) : Qualité 82-88. Les photos de produits doivent être nettes, en particulier pour les articles où la texture et le détail comptent (mode, bijoux, électronique). À une qualité de 85, une image produit typique de 800x800 passe d'environ 120 Ko (JPEG) à environ 80 Ko (WebP) sans perte de qualité visible.
• Bannières de catégories et images héros : Qualité 78-82. Celles-ci sont généralement vues en grande taille mais avec moins d'attention aux détails fins.
• Vignettes et images de listing : Qualité 75-80. À de petites tailles d'affichage, une qualité inférieure est moins perceptible. Une vignette à qualité 75 peut être 50 à 60 % plus petite que son équivalent JPEG.
• Logos et graphiques avec des bords nets : Utilisez le WebP sans perte (lossless) ou gardez le format PNG. La compression avec perte crée des artefacts visibles autour du texte et des graphiques à bords durs.

PrestaShop applique un seul réglage de qualité globalement. Si vous avez besoin de niveaux de qualité différents pour différents types d'images, vous devrez modifier la classe ImageManager ou utiliser un module tiers qui offre un contrôle plus granulaire.

Stratégies de repli

Bien que le support du WebP par les navigateurs soit quasi universel en 2026, implémenter une stratégie de repli est toujours considéré comme une bonne pratique, surtout si votre boutique sert des clients utilisant des appareils anciens ou des environnements d'entreprise restrictifs.

Négociation de contenu côté serveur

Les règles .htaccess et Nginx décrites ci-dessus implémentent la négociation de contenu côté serveur. C'est l'approche recommandée car elle est transparente pour la couche applicative. Le navigateur demande l'URL originale, et le serveur décide quel format livrer en fonction de l'en-tête Accept. Aucune modification des templates ou du code front-end n'est nécessaire.

L'élément HTML Picture

Une approche alternative utilise l'élément <picture> pour laisser le navigateur choisir le meilleur format :

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Nom du produit">
</picture>

Cela nécessite de modifier les templates PrestaShop (Smarty ou Twig selon votre version). Bien que cela vous donne un contrôle explicite, c'est plus intrusif et plus difficile à maintenir lors des mises à jour de thème. La négociation côté serveur est généralement préférée pour les déploiements PrestaShop.

Repli intégré de PrestaShop

Lorsque vous sélectionnez l'option « JPEG/PNG + WebP » dans les paramètres d'images de PrestaShop, le système génère les deux formats. PrestaShop 8.x gère le repli automatiquement dans ses templates de base, en vérifiant si le fichier WebP existe avant de le référencer. Si vous utilisez un thème personnalisé, vérifiez que les templates d'images produits du thème supportent cette approche à double format.

Pièges courants et comment les résoudre

1. Images cassées après activation du WebP

Le problème le plus courant après avoir activé le WebP est des images cassées dans toute la boutique. Cela arrive généralement parce que :

• Les fichiers WebP n'ont pas été générés. Activer le paramètre n'affecte que les images nouvellement téléchargées. Vous devez cliquer sur « Régénérer les miniatures » pour créer les versions WebP des images existantes. Pour les grands catalogues, utilisez la commande en ligne de commande.
• Les permissions de fichiers sont incorrectes. L'utilisateur du serveur web (généralement www-data) doit avoir les permissions d'écriture sur l'arborescence du répertoire img/. Après la régénération, vérifiez les permissions : find img/ -name "*.webp" -exec ls -la {} \;
• Les règles .htaccess sont en conflit. Le .htaccess par défaut de PrestaShop contient des règles de réécriture qui peuvent entrer en conflit avec les règles de réécriture WebP. Placez les règles WebP avant le bloc de réécriture par défaut de PrestaShop pour vous assurer qu'elles sont évaluées en premier.

2. Extensions GD ou Imagick manquantes

La génération WebP nécessite que PHP dispose de la bibliothèque GD ou de l'extension ImageMagick compilée avec le support WebP. Pour vérifier :

php -r "echo gd_info()['WebP Support'] ? 'GD WebP OK' : 'GD WebP MANQUANT';"

Ou pour ImageMagick :

php -r "echo in_array('WEBP', Imagick::queryFormats()) ? 'Imagick WebP OK' : 'Imagick WebP MANQUANT';"

Si le support WebP est manquant, vous devez recompiler PHP avec les flags appropriés ou installer les paquets corrects. Sur Debian/Ubuntu : apt-get install libwebp-dev suivi de la recompilation de l'extension GD, ou installez une version de PHP qui inclut le support WebP (PHP 7.4+ l'inclut généralement par défaut).

Sur un hébergement mutualisé, si votre build PHP ne dispose pas du support WebP, contactez votre hébergeur. La plupart des environnements d'hébergement modernes incluent le support WebP dans les installations PHP 8.x.

3. Problèmes de cache

Les problèmes liés au cache sont parmi les plus frustrants avec le WebP :

• Cache du navigateur : Après avoir activé le WebP, les navigateurs peuvent continuer à afficher les versions JPEG/PNG mises en cache. Conseillez aux utilisateurs de faire un rafraîchissement forcé (Ctrl+Shift+R), mais cela se résout de lui-même à mesure que les images mises en cache expirent.
• Cache côté serveur : Si vous utilisez Varnish, Redis ou toute mise en cache de page complète, le cache doit être purgé après l'activation du WebP. Sinon, les pages mises en cache référenceront les anciennes URL d'images ou les anciens types MIME.
• Cache CDN : Purgez complètement le cache de votre CDN après avoir activé le WebP. Portez une attention particulière aux clés de cache du CDN — si le CDN ne varie pas la mise en cache selon l'en-tête Accept, il peut servir du WebP à des navigateurs qui ne le supportent pas (ou inversement).
• OPcache : Si vous avez modifié des fichiers PHP dans le cadre de l'activation du WebP (par exemple, des surcharges personnalisées d'ImageManager), réinitialisez l'OPcache pour vous assurer que le nouveau code prend effet.
• Cache Smarty de PrestaShop : Videz le cache Smarty depuis le back office (Paramètres avancés > Performance) ou supprimez le contenu du répertoire var/cache/.

4. Types MIME incorrects

Si votre serveur ne reconnaît pas l'extension .webp, les navigateurs ne parviendront pas à afficher les images même si les fichiers sont valides. Assurez-vous que la configuration de votre serveur inclut le bon mappage de type MIME : image/webp pour les fichiers .webp. La directive AddType dans la section Apache ci-dessus gère cela.

5. Problèmes de téléchargement d'images dans le back office

Le back office de PrestaShop valide les formats d'images téléchargées. Dans certaines versions, télécharger une image WebP directement via l'éditeur de produit peut échouer avec une erreur de validation. C'est parce que la liste blanche du validateur de téléchargement peut ne pas inclure le WebP. Vérifiez les extensions autorisées dans Paramètres avancés > Administration ou la configuration correspondante.

6. Incompatibilité avec les modules tiers

Certains modules tiers (en particulier les modules de diaporama, de galerie et de zoom d'images produits) codent en dur les extensions de fichiers d'images ou ne supportent pas le WebP. Après avoir activé le WebP, testez tous les modules qui affichent des images. Les symptômes courants incluent des vignettes manquantes dans les modules de diaporama ou une fonctionnalité de zoom cassée. Contactez le développeur du module pour des mises à jour, ou assurez-vous que votre négociation de contenu côté serveur gère correctement le repli.

Tester la livraison WebP

Après la configuration, vérifiez que les images WebP sont réellement servies. Voici plusieurs méthodes :

Outils de développement du navigateur

1. Ouvrez votre boutique dans Chrome ou Firefox.
2. Ouvrez les DevTools (F12) et allez dans l'onglet Réseau.
3. Filtrez par type Img.
4. Rechargez la page.
5. Cliquez sur n'importe quelle requête d'image et vérifiez les En-têtes de réponse. Le Content-Type devrait être image/webp.
6. Vérifiez également la colonne Type dans la liste réseau — elle devrait afficher « webp » pour les images converties.

Test en ligne de commande

Utilisez curl pour vérifier que la négociation de contenu fonctionne correctement :

# Requête avec support WebP
curl -s -I -H "Accept: image/webp,image/*" https://votreboutique.com/img/p/1/2/3/456-home_default.jpg | grep Content-Type
# Attendu : Content-Type: image/webp

# Requête sans support WebP
curl -s -I -H "Accept: image/jpeg" https://votreboutique.com/img/p/1/2/3/456-home_default.jpg | grep Content-Type
# Attendu : Content-Type: image/jpeg

Outils en ligne

Google PageSpeed Insights et Lighthouse signalent tous deux les images qui ne sont pas servies dans des formats de nouvelle génération. Lancez un audit Lighthouse sur vos pages produits — si le WebP est correctement configuré, vous ne devriez pas voir la recommandation « Servir les images dans des formats de nouvelle génération ».

Impact sur les performances

L'impact réel du WebP sur les performances d'une boutique PrestaShop dépend de la taille du catalogue et de la composition des pages, mais les améliorations typiques incluent :

• Réduction du poids total de la page : 15 à 30 % sur les pages de listing produits et 10 à 20 % sur les pages de détail produit, où les images représentent la majorité des octets téléchargés.
• Largest Contentful Paint (LCP) : Amélioration de 200 à 600 ms en moyenne, car l'image principale du produit se charge plus rapidement. C'est l'un des trois Core Web Vitals et il affecte directement le classement dans les résultats de recherche.
• Time to Interactive (TTI) : Amélioration marginale, car le chargement des images entre en compétition avec l'exécution du JavaScript pour la bande passante mais pas pour le CPU.
• Économies de bande passante serveur : Pour une boutique servant 100 000 pages vues par mois, le WebP peut réduire l'utilisation mensuelle de bande passante de 20 à 50 Go, réduisant potentiellement les coûts d'hébergement.
• Performance mobile : Les gains les plus significatifs se font sur les connexions mobiles, où les tailles d'images réduites se traduisent directement par des temps de chargement plus rapides sur les réseaux 4G/5G. L'indexation mobile-first de Google rend cela particulièrement important.

Gardez à l'esprit que la génération WebP ajoute de la charge CPU pendant le traitement des images (téléchargements et régénération). Sur un hébergement mutualisé sous-dimensionné, la régénération des miniatures pour un grand catalogue peut temporairement ralentir le serveur. Planifiez la régénération pendant les périodes de faible trafic.

Checklist récapitulative

Pour déployer avec succès le WebP sur votre boutique PrestaShop, suivez cette checklist :

1. Vérifiez que PHP dispose de GD ou ImageMagick avec le support WebP.
2. Activez la génération WebP dans les paramètres d'images de PrestaShop (utilisez JPEG/PNG + WebP par sécurité).
3. Réglez la qualité entre 82 et 85 pour un équilibre optimal.
4. Régénérez toutes les miniatures (utilisez la ligne de commande pour les grands catalogues).
5. Ajoutez les règles de négociation de contenu côté serveur (.htaccess ou config Nginx).
6. Configurez votre CDN pour varier le cache selon l'en-tête Accept.
7. Purgez tous les caches (navigateur, serveur, CDN, Smarty, OPcache).
8. Testez la livraison en utilisant les DevTools du navigateur et curl.
9. Vérifiez que les modules tiers affichent correctement les images.
10. Lancez un audit Lighthouse pour confirmer qu'aucun avertissement « formats de nouvelle génération » ne subsiste.

Le WebP n'est plus optionnel pour un e-commerce compétitif. Avec le support intégré de PrestaShop et une configuration serveur simple, il n'y a aucune raison de continuer à servir des fichiers JPEG et PNG surdimensionnés. La configuration prend moins d'une heure, et les bénéfices en termes de performance sont immédiats et mesurables.