[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fiOpW-fhJzNGAb3_9oIMVGqPx8ebty8ZCn7xQcnf3iKM":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":59,"megamenu":140,"$f1pG3N86B2WVqDmOi6iQBC5gAYi8IpVE9wnVBK71_wpM":196,"footer-db":210,"header-db":228},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"title":23,"slug":24,"metaDescription":25,"category":26,"tags":27,"difficulty":33,"psVersions":34,"content":37,"faq":38,"tldr":54,"readingTime":55,"generatedAt":56,"publishDate":56,"relatedArticles":57,"sourceCategory":58},"PrestaShop augmente le poids de vos images : causes et solutions","prestashop-augmente-poids-images-causes-solutions","Vos images sont plus lourdes après import dans PrestaShop ? Découvrez pourquoi et comment optimiser la compression avec GD, WebP et le lazy loading.","performance",[28,29,30,31,32,26],"optimisation images","compression","GD library","lazy loading","WebP","intermediaire",[35,36],"1.7","8.x","\u003Ch2>Pourquoi PrestaShop alourdit vos images après import\u003C\u002Fh2>\n\u003Cp>Un problème récurrent chez les marchands PrestaShop : vous uploadez une image de 150 Ko et vous la retrouvez à 300 Ko (voire plus) une fois traitée par le back-office. Ce comportement contre-intuitif a des causes techniques précises, et surtout des solutions concrètes.\u003C\u002Fp>\n\u003Ch2>Comprendre le mécanisme de régénération d'images\u003C\u002Fh2>\n\u003Cp>Quand vous importez une image produit, PrestaShop ne se contente pas de la stocker telle quelle. Le CMS :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Décode l'image source** via la librairie graphique PHP (GD ou ImageMagick)\u003C\u002Fli>\n\u003Cli>**Génère toutes les déclinaisons** définies dans **Conception > Images** (miniature, panier, fiche produit, etc.)\u003C\u002Fli>\n\u003Cli>**Réencode chaque déclinaison** au format JPEG avec un niveau de qualité configuré\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>C'est à l'étape 3 que le problème survient. Si votre image source était déjà optimisée avec un algorithme de compression avancé (comme celui de TinyPNG ou Squoosh), le réencodage par GD produit souvent un fichier \u003Cstrong>plus lourd\u003C\u002Fstrong> car la librairie GD utilise une compression JPEG basique, moins efficace que les outils spécialisés.\u003C\u002Fp>\n\u003Ch2>Les causes principales\u003C\u002Fh2>\n\u003Ch3>1. La librairie GD mal configurée ou absente\u003C\u002Fh3>\n\u003Cp>GD est la librairie de traitement d'images par défaut de PHP. Si elle est absente ou mal configurée, PrestaShop peut tomber sur un fallback qui produit des images non compressées.\u003C\u002Fp>\n\u003Cp>Pour vérifier sa présence, créez un fichier temporaire \u003Ccode>info.php\u003C\u002Fcode> à la racine de votre site :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n<?php\nphpinfo(INFO_MODULES);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Accédez-y via \u003Ccode>https:\u002F\u002Fvotre-site.com\u002Finfo.php\u003C\u002Fcode> et recherchez la section \u003Cstrong>gd\u003C\u002Fstrong>. Vous devez voir :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**GD Support** : enabled\u003C\u002Fli>\n\u003Cli>**JPEG Support** : enabled\u003C\u002Fli>\n\u003Cli>**PNG Support** : enabled\u003C\u002Fli>\n\u003Cli>**WebP Support** : enabled (PHP 7.1+)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Sécurité\u003C\u002Fstrong> : supprimez immédiatement ce fichier après vérification. Un \u003Ccode>phpinfo()\u003C\u002Fcode> exposé publiquement révèle des informations sensibles sur votre serveur.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch3>2. Dimensions des presets vs dimensions source\u003C\u002Fh3>\n\u003Cp>Si votre image source fait 800×800 px mais que vous avez un preset configuré à 1200×1200 px, PrestaShop va \u003Cstrong>upscaler\u003C\u002Fstrong> l'image. Le résultat : une image plus grande en pixels, plus lourde en octets, et plus floue visuellement. C'est le pire scénario possible.\u003C\u002Fp>\n\u003Cp>Vérifiez vos presets dans \u003Cstrong>Conception > Images\u003C\u002Fstrong> (PS 1.7) ou \u003Cstrong>Design > Images\u003C\u002Fstrong> (PS 8.x) :\u003C\u002Fp>\n\u003Ctr>\u003Cth>Type\u003C\u002Fth>\u003Cth>Usage\u003C\u002Fth>\u003Cth>Dimensions recommandées\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>cart_default\u003C\u002Fth>\u003Cth>Panier\u003C\u002Fth>\u003Cth>125 × 125 px\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>small_default\u003C\u002Fth>\u003Cth>Listing catégorie\u003C\u002Fth>\u003Cth>250 × 250 px\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>medium_default\u003C\u002Fth>\u003Cth>Fiche produit\u003C\u002Fth>\u003Cth>452 × 452 px\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>home_default\u003C\u002Fth>\u003Cth>Accueil\u003C\u002Fth>\u003Cth>600 × 600 px\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>large_default\u003C\u002Fth>\u003Cth>Zoom\u003C\u002Fth>\u003Cth>800 × 800 px\u003C\u002Fth>\u003C\u002Ftr>\n\u003Cp>\u003Cstrong>Règle d'or\u003C\u002Fstrong> : votre image source doit toujours être \u003Cstrong>au moins aussi grande\u003C\u002Fstrong> que votre plus grand preset.\u003C\u002Fp>\n\u003Ch3>3. Le niveau de qualité JPEG trop élevé\u003C\u002Fh3>\n\u003Cp>Par défaut, PrestaShop encode les images en JPEG qualité 90. C'est élevé. Dans la classe \u003Ccode>ImageManager\u003C\u002Fcode>, le paramètre de qualité impacte directement le poids :\u003C\u002Fp>\n\u003Ctr>\u003Cth>Qualité JPEG\u003C\u002Fth>\u003Cth>Poids relatif\u003C\u002Fth>\u003Cth>Différence visuelle\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>100\u003C\u002Fth>\u003Cth>~300 Ko\u003C\u002Fth>\u003Cth>Imperceptible vs 90\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>90\u003C\u002Fth>\u003Cth>~180 Ko\u003C\u002Fth>\u003Cth>Référence\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>80\u003C\u002Fth>\u003Cth>~120 Ko\u003C\u002Fth>\u003Cth>Quasi invisible\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>75\u003C\u002Fth>\u003Cth>~100 Ko\u003C\u002Fth>\u003Cth>Légère sur zoom ×2\u003C\u002Fth>\u003C\u002Ftr>\n\u003Cp>Sur PrestaShop 8.x, vous pouvez ajuster la qualité dans \u003Cstrong>Design > Images > Qualité des images\u003C\u002Fstrong> ou via un override de la classe \u003Ccode>ImageManager\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F override\u002Fclasses\u002FImageManager.php\nclass ImageManager extends ImageManagerCore\n{\n    public static function quality(): int\n    {\n        \u002F\u002F Réduire de 90 à 80 pour un bon compromis poids\u002Fqualité\n        return 80;\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\u003Cp>Sur PS 1.7, vérifiez qu'il n'existe pas un override hérité d'un ancien module de filigrane (watermark) qui forcerait une qualité à 100 ou désactiverait la compression.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch3>4. Le module Filigrane (Watermark)\u003C\u002Fh3>\n\u003Cp>L'ancien module \u003Ccode>watermark\u003C\u002Fcode> (filigrane) de PrestaShop est connu pour interférer avec la compression d'images. Lors du traitement, il décode l'image, applique le filigrane, puis réencode \u003Cstrong>sans optimisation\u003C\u002Fstrong>. Si ce module est installé (même désactivé), vérifiez qu'il ne laisse pas de override dans \u003Ccode>override\u002Fclasses\u002FImageManager.php\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Solutions pour optimiser vos images\u003C\u002Fh2>\n\u003Ch3>Pré-compression avant upload\u003C\u002Fh3>\n\u003Cp>La meilleure approche est d'optimiser vos images \u003Cstrong>avant\u003C\u002Fstrong> de les importer dans PrestaShop. Outils recommandés :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**TinyPNG \u002F TinyJPG** : compression lossy intelligente, réduction de 50-80% sans perte visible. API disponible pour le traitement par lots.\u003C\u002Fli>\n\u003Cli>**Squoosh** (par Google) : outil en ligne gratuit avec prévisualisation avant\u002Faprès.\u003C\u002Fli>\n\u003Cli>**ImageOptim** (macOS) : traitement local par lots.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Passer au format WebP\u003C\u002Fh3>\n\u003Cp>Depuis PrestaShop 8.0, le support natif du format WebP est intégré. WebP offre une compression \u003Cstrong>25 à 35% meilleure\u003C\u002Fstrong> que JPEG à qualité visuelle équivalente.\u003C\u002Fp>\n\u003Cp>Activation dans \u003Cstrong>Design > Images > Format de génération des images\u003C\u002Fstrong> : cochez \u003Cstrong>WebP\u003C\u002Fstrong> en plus de JPEG pour maintenir la compatibilité avec les anciens navigateurs.\u003C\u002Fp>\n\u003Cp>Sur PrestaShop 1.7, le support WebP nécessite un module tiers ou un override personnalisé.\u003C\u002Fp>\n\u003Ch3>Implémenter le lazy loading\u003C\u002Fh3>\n\u003Cp>Pour les performances perçues, implémentez le chargement différé des images. Depuis PrestaShop 8.x, l'attribut natif \u003Ccode>loading=\"lazy\"\u003C\u002Fcode> est supporté. Pour une solution plus robuste avec support du responsive :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- Dans vos templates Smarty -->\n<img\n  data-src=\"{$image.url}\"\n  data-srcset=\"{$image.small} 250w, {$image.medium} 450w, {$image.large} 800w\"\n  sizes=\"(max-width: 768px) 100vw, 50vw\"\n  class=\"lazyload\"\n  alt=\"{$product.name|escape:'html':'UTF-8'}\"\n  width=\"{$image.width}\"\n  height=\"{$image.height}\"\n\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Combinée avec la librairie \u003Cstrong>lazysizes\u003C\u002Fstrong>, cette approche permet de servir des images adaptées à chaque viewport et de ne charger que les images visibles.\u003C\u002Fp>\n\u003Ch3>Régénérer les miniatures après optimisation\u003C\u002Fh3>\n\u003Cp>Après avoir modifié vos paramètres de qualité ou vos presets, régénérez toutes les miniatures via \u003Cstrong>Design > Images > Régénérer les miniatures\u003C\u002Fstrong>. Attention : sur un catalogue volumineux (5 000+ produits), lancez cette opération en CLI pour éviter les timeouts :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">\nphp bin\u002Fconsole prestashop:image:regenerate --all\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Checklist d'optimisation images PrestaShop\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>[ ] Librairie GD installée et activée (avec support JPEG + WebP)\u003C\u002Fli>\n\u003Cli>[ ] Aucun override parasite dans `override\u002Fclasses\u002FImageManager.php`\u003C\u002Fli>\n\u003Cli>[ ] Module filigrane désinstallé si non utilisé\u003C\u002Fli>\n\u003Cli>[ ] Images source ≥ taille du plus grand preset\u003C\u002Fli>\n\u003Cli>[ ] Qualité JPEG réglée entre 75 et 85\u003C\u002Fli>\n\u003Cli>[ ] Pré-compression systématique avant upload (TinyPNG, Squoosh)\u003C\u002Fli>\n\u003Cli>[ ] Format WebP activé (PrestaShop 8.x)\u003C\u002Fli>\n\u003Cli>[ ] Lazy loading implémenté\u003C\u002Fli>\n\u003Cli>[ ] Miniatures régénérées après chaque changement de configuration\u003C\u002Fli>\n\u003C\u002Ful>",[39,42,45,48,51],{"q":40,"a":41},"Pourquoi mes images sont plus lourdes après import dans PrestaShop ?","PrestaShop décode puis réencode chaque image via la librairie GD pour générer les différentes tailles (miniature, fiche produit, zoom). Si votre image source était déjà optimisée avec un outil comme TinyPNG, le réencodage par GD utilise une compression moins efficace, ce qui peut produire un fichier plus lourd que l'original. La solution est de vérifier le niveau de qualité JPEG dans les paramètres d'images et d'utiliser le format WebP sur PrestaShop 8.x.",{"q":43,"a":44},"Comment vérifier si la librairie GD est activée sur mon serveur PrestaShop ?","Créez un fichier PHP temporaire contenant phpinfo(INFO_MODULES) à la racine de votre site, accédez-y via votre navigateur et cherchez la section 'gd'. Vous devez voir GD Support: enabled, JPEG Support: enabled et idéalement WebP Support: enabled. Supprimez impérativement ce fichier après vérification pour des raisons de sécurité.",{"q":46,"a":47},"Quel niveau de qualité JPEG recommander pour PrestaShop ?","Un niveau de qualité entre 75 et 85 offre le meilleur compromis entre poids de fichier et rendu visuel. La valeur par défaut de PrestaShop (90) est souvent trop élevée. La différence entre 80 et 90 est quasi imperceptible à l'œil nu, mais le gain de poids est significatif (environ 30% de réduction).",{"q":49,"a":50},"Comment activer le format WebP sur PrestaShop 8 ?","Dans le back-office, rendez-vous dans Design > Images > Format de génération des images et cochez WebP en plus de JPEG. PrestaShop servira automatiquement le format WebP aux navigateurs compatibles et le JPEG aux autres. N'oubliez pas de régénérer vos miniatures après activation pour convertir les images existantes.",{"q":52,"a":53},"Le module filigrane peut-il augmenter le poids de mes images PrestaShop ?","Oui, l'ancien module Watermark (filigrane) est connu pour interférer avec la compression. Il décode l'image, applique le filigrane, puis réencode sans optimisation, ce qui alourdit le fichier. Si vous ne l'utilisez plus, désinstallez-le et vérifiez qu'il n'a pas laissé d'override dans le dossier override\u002Fclasses\u002FImageManager.php.","PrestaShop augmente le poids des images car la librairie GD réencode chaque fichier avec une compression basique. Pour corriger : vérifiez GD, réduisez la qualité JPEG à 80, pré-compressez vos images avec TinyPNG et activez le WebP sur PrestaShop 8.x.",5,"2026-03-21T15:07:37.000Z",[],"PrestaShop pour les développeurs",{"columns":60},[61,77,107,128],{"title":62,"links":63},"Plateforme",[64,68,71,74],{"label":65,"href":66,"external":67},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":69,"href":70,"external":67},"Devenir Ambassadeur","\u002Fambassadeur",{"label":72,"href":73,"external":67},"Modules PrestaShop","\u002Fmodules",{"label":75,"href":76,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":78,"links":79},"Le Synedre",[80,83,86,89,92,95,98,101,104],{"label":81,"href":82,"external":67},"L'histoire","\u002Fsynedre",{"label":84,"href":85,"external":67},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":87,"href":88,"external":67},"L'équipe","\u002Fequipe",{"label":90,"href":91,"external":67},"Le réacteur en direct","\u002Freacteur",{"label":93,"href":94,"external":67},"Le Drill (entraînement)","\u002Fdrill",{"label":96,"href":97,"external":67},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":99,"href":100,"external":67},"Les agents IA","\u002Fagents-ia",{"label":102,"href":103,"external":67},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":105,"href":106,"external":67},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":108,"links":109},"Ressources",[110,113,116,119,122,125],{"label":111,"href":112,"external":67},"Blog","\u002Fblog",{"label":114,"href":115,"external":67},"Academy","\u002Facademy",{"label":117,"href":118,"external":67},"Dictionnaire","\u002Fdictionnaire",{"label":120,"href":121,"external":67},"Expertise PrestaShop","\u002Fexpertise",{"label":123,"href":124,"external":67},"Flywheel","\u002Fflywheel",{"label":126,"href":127,"external":67},"Manifeste","\u002Fmanifeste",{"title":129,"links":130},"À propos",[131,134,137],{"label":132,"href":133,"external":67},"Alexandre Carette","\u002Fa-propos",{"label":135,"href":136,"external":67},"Dossier de presse","\u002Fpresse",{"label":138,"href":139,"external":67},"Contact","\u002Fcontact",{"items":141},[142,151,157,163,171,179,184,190],{"id":143,"type":144,"label":145,"href":121,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":148,"children":149,"psChildren":150},41,"link",{"fr":146},"Expertise",null,0,[],[],{"id":152,"type":144,"label":153,"href":112,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":154,"children":155,"psChildren":156},42,{"fr":111},1,[],[],{"id":158,"type":144,"label":159,"href":73,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":160,"children":161,"psChildren":162},43,{"fr":72},2,[],[],{"id":164,"type":144,"label":165,"href":167,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":168,"children":169,"psChildren":170},44,{"fr":166},"Outils IA","\u002Foutils-ia",3,[],[],{"id":172,"type":144,"label":173,"href":66,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":175,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":176,"children":177,"psChildren":178},45,{"fr":174},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":180,"type":144,"label":181,"href":115,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":55,"children":182,"psChildren":183},46,{"fr":114},[],[],{"id":185,"type":144,"label":186,"href":133,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":187,"children":188,"psChildren":189},47,{"fr":129},6,[],[],{"id":191,"type":144,"label":192,"href":139,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":193,"children":194,"psChildren":195},48,{"fr":138},7,[],[],{"academy":197,"blog":198,"expertise":209},[],[199,203,206],{"title":200,"url":201,"score":154,"type":202},"Docker Compose PrestaShop : configuration production prête à déployer","\u002Fblog\u002Fdevops\u002Fdocker\u002Fdocker-compose-prestashop-production","blog",{"title":204,"url":205,"score":154,"type":202},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back",{"title":207,"url":208,"score":154,"type":202},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",[],{"footer":211},{"theme":212,"description":147,"hours":147,"logo":213,"contact":216,"social":217,"bottomBar":227},"dark",{"src":214,"href":215,"alt":132},"\u002Flogo-ac.svg","\u002F",{"email":147,"phone":147,"address":147,"cta":147},[218,221,224],{"platform":219,"href":220,"label":219},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":222,"href":223,"label":222},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":225,"href":226,"label":225},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":147},{"header":229},{"logo":230,"topBar":233,"contactEmail":236,"features":237,"navBar":147},{"src":214,"alt":231,"text":132,"href":215,"class":232},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":147,"showLanguages":67,"align":234,"languages":235},"left",[],"contact@alexandrecarette.fr",{"showSearch":67,"showWishlist":67,"showLogin":20,"showContact":67,"showCart":67,"stickyHeader":20,"headerLayout":238},"inline"]