[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":22,"megamenu":103,"$f28408RLMxAOHO1hLWVVtIpXkgrjt9ra9p6O2QC9pbWE":160,"footer-db":196,"header-db":214,"$fzZ8rf4z-f1fwsgswevype4nK2vFCc_wA62lnxyg9MWE":225},{"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",{"columns":23},[24,40,70,91],{"title":25,"links":26},"Plateforme",[27,31,34,37],{"label":28,"href":29,"external":30},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":32,"href":33,"external":30},"Devenir Ambassadeur","\u002Fambassadeur",{"label":35,"href":36,"external":30},"Modules PrestaShop","\u002Fmodules",{"label":38,"href":39,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":41,"links":42},"Le Synedre",[43,46,49,52,55,58,61,64,67],{"label":44,"href":45,"external":30},"L'histoire","\u002Fsynedre",{"label":47,"href":48,"external":30},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":50,"href":51,"external":30},"L'équipe","\u002Fequipe",{"label":53,"href":54,"external":30},"Le réacteur en direct","\u002Freacteur",{"label":56,"href":57,"external":30},"Le Drill (entraînement)","\u002Fdrill",{"label":59,"href":60,"external":30},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":62,"href":63,"external":30},"Les agents IA","\u002Fagents-ia",{"label":65,"href":66,"external":30},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":68,"href":69,"external":30},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":71,"links":72},"Ressources",[73,76,79,82,85,88],{"label":74,"href":75,"external":30},"Blog","\u002Fblog",{"label":77,"href":78,"external":30},"Academy","\u002Facademy",{"label":80,"href":81,"external":30},"Dictionnaire","\u002Fdictionnaire",{"label":83,"href":84,"external":30},"Expertise PrestaShop","\u002Fexpertise",{"label":86,"href":87,"external":30},"Flywheel","\u002Fflywheel",{"label":89,"href":90,"external":30},"Manifeste","\u002Fmanifeste",{"title":92,"links":93},"À propos",[94,97,100],{"label":95,"href":96,"external":30},"Alexandre Carette","\u002Fa-propos",{"label":98,"href":99,"external":30},"Dossier de presse","\u002Fpresse",{"label":101,"href":102,"external":30},"Contact","\u002Fcontact",{"items":104},[105,114,120,126,134,142,148,154],{"id":106,"type":107,"label":108,"href":84,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":111,"children":112,"psChildren":113},41,"link",{"fr":109},"Expertise",null,0,[],[],{"id":115,"type":107,"label":116,"href":75,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":117,"children":118,"psChildren":119},42,{"fr":74},1,[],[],{"id":121,"type":107,"label":122,"href":36,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":123,"children":124,"psChildren":125},43,{"fr":35},2,[],[],{"id":127,"type":107,"label":128,"href":130,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":131,"children":132,"psChildren":133},44,{"fr":129},"Outils IA","\u002Foutils-ia",3,[],[],{"id":135,"type":107,"label":136,"href":29,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":138,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":139,"children":140,"psChildren":141},45,{"fr":137},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":143,"type":107,"label":144,"href":78,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":145,"children":146,"psChildren":147},46,{"fr":77},5,[],[],{"id":149,"type":107,"label":150,"href":96,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":151,"children":152,"psChildren":153},47,{"fr":92},6,[],[],{"id":155,"type":107,"label":156,"href":102,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":157,"children":158,"psChildren":159},48,{"fr":101},7,[],[],{"title":161,"slug":162,"metaDescription":163,"category":164,"tags":165,"difficulty":171,"psVersions":172,"content":175,"faq":176,"tldr":192,"readingTime":139,"generatedAt":193,"publishDate":193,"relatedArticles":194,"sourceCategory":195},"Supprimer les bordures blanches des images produit PrestaShop","supprimer-bordures-blanches-images-produit-prestashop","Apprenez à éliminer les bordures blanches sur vos images produit PrestaShop en accédant à l'image source originale via Smarty ou en ciblant un format spécifique.","design",[166,167,168,169,170],"images produit","smarty","large_default","qualité visuelle","template","intermediaire",[173,174],"1.7","8.x","\u003Ch2>Pourquoi vos images produit ont des bordures blanches\u003C\u002Fh2>\n\u003Cp>Lorsque PrestaShop redimensionne vos images produit pour générer les différents formats (\u003Ccode>small_default\u003C\u002Fcode>, \u003Ccode>medium_default\u003C\u002Fcode>, \u003Ccode>large_default\u003C\u002Fcode>, etc.), il applique un recadrage pour respecter les dimensions configurées dans \u003Cstrong>Préférences > Images\u003C\u002Fstrong>. Si le ratio de votre image source ne correspond pas exactement au ratio du format cible, PrestaShop compense la différence en ajoutant un remplissage blanc — ces fameuses bordures qui dégradent le rendu visuel de votre catalogue.\u003C\u002Fp>\n\u003Cp>Ce problème est particulièrement visible sur le format \u003Ccode>large_default\u003C\u002Fcode> utilisé sur la fiche produit, car c'est l'image la plus grande et donc celle où le remplissage se remarque le plus.\u003C\u002Fp>\n\u003Ch2>Comprendre le stockage des images dans PrestaShop\u003C\u002Fh2>\n\u003Cp>Avant de corriger le problème, il faut comprendre comment PrestaShop organise ses images produit sur le serveur.\u003C\u002Fp>\n\u003Cp>Chaque image uploadée reçoit un identifiant unique (\u003Ccode>id_image\u003C\u002Fcode>). PrestaShop stocke ensuite les fichiers selon une arborescence basée sur les chiffres de cet identifiant. Pour une image dont l'ID est \u003Cstrong>250\u003C\u002Fstrong>, le chemin sera :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\n\u002Fimg\u002Fp\u002F2\u002F5\u002F0\u002F250.jpg          ← Image originale (non redimensionnée)\n\u002Fimg\u002Fp\u002F2\u002F5\u002F0\u002F250-small_default.jpg\n\u002Fimg\u002Fp\u002F2\u002F5\u002F0\u002F250-medium_default.jpg\n\u002Fimg\u002Fp\u002F2\u002F5\u002F0\u002F250-large_default.jpg\n\u002Fimg\u002Fp\u002F2\u002F5\u002F0\u002F250-home_default.jpg\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>L'image \u003Cstrong>sans suffixe\u003C\u002Fstrong> (\u003Ccode>250.jpg\u003C\u002Fcode>) est toujours l'image originale uploadée, dans sa résolution et ses proportions d'origine — donc sans aucune bordure blanche.\u003C\u002Fp>\n\u003Ch2>Solution 1 : Afficher l'image originale via Smarty\u003C\u002Fh2>\n\u003Cp>Si votre objectif est d'afficher l'image produit sans aucun redimensionnement (et donc sans bordure), vous pouvez construire dynamiquement le chemin vers l'image source dans vos templates Smarty.\u003C\u002Fp>\n\u003Cp>Le modificateur \u003Ccode>spacify\u003C\u002Fcode> de Smarty permet de séparer chaque caractère d'une chaîne par un délimiteur. En l'appliquant à l'identifiant de l'image avec \u003Ccode>\u002F\u003C\u002Fcode> comme séparateur, on reconstruit l'arborescence PrestaShop :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* Construire le chemin vers l'image originale (sans redimensionnement) *}\n{assign var=\"original_path\" value=\"\u002Fimg\u002Fp\u002F{$cover.id_image|spacify:'\u002F'}\u002F{$cover.id_image}.jpg\"}\n\n<img src=\"{$original_path}\" alt=\"{$product.name}\" class=\"img-fluid\" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Pour l'image d'ID \u003Cstrong>250\u003C\u002Fstrong>, \u003Ccode>spacify\u003C\u002Fcode> transforme \u003Ccode>250\u003C\u002Fcode> en \u003Ccode>2\u002F5\u002F0\u003C\u002Fcode>, ce qui donne le chemin \u003Ccode>\u002Fimg\u002Fp\u002F2\u002F5\u002F0\u002F250.jpg\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch3>Attention aux performances\u003C\u002Fh3>\n\u003Cp>Afficher l'image originale résout le problème des bordures, mais présente un inconvénient : le fichier sera potentiellement très lourd (plusieurs Mo si le marchand a uploadé une photo haute résolution). Il est recommandé de combiner cette approche avec :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>L'attribut `loading=\"lazy\"` pour le chargement différé\u003C\u002Fli>\n\u003Cli>Une limite côté back-office sur la taille maximale des uploads\u003C\u002Fli>\n\u003Cli>Une compression via un outil comme **TinyPNG** ou le module **Image Optimization**\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n<img \n  src=\"\u002Fimg\u002Fp\u002F{$cover.id_image|spacify:'\u002F'}\u002F{$cover.id_image}.jpg\" \n  alt=\"{$product.name}\" \n  loading=\"lazy\"\n  width=\"800\"\n  height=\"800\"\n\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Solution 2 : Régénérer les images avec les bons ratios\u003C\u002Fh2>\n\u003Cp>La solution la plus propre consiste à harmoniser les ratios entre vos images source et vos formats configurés.\u003C\u002Fp>\n\u003Col>\n\u003Cli>Allez dans **Préférences > Images** (PS 1.7) ou **Design > Paramètres d'images** (PS 8.x)\u003C\u002Fli>\n\u003Cli>Notez les dimensions de `large_default` (par exemple 800×800)\u003C\u002Fli>\n\u003Cli>Recadrez vos images source au même ratio **avant** de les uploader\u003C\u002Fli>\n\u003Cli>Régénérez les miniatures via le bouton dédié\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Important :\u003C\u002Fstrong> la régénération s'applique à \u003Cstrong>tous les formats\u003C\u002Fstrong> simultanément. Il n'est pas possible de régénérer un seul format via l'interface standard.\u003C\u002Fp>\n\u003Ch2>Solution 3 : Développement spécifique pour un format ciblé\u003C\u002Fh2>\n\u003Cp>Si vous souhaitez modifier le comportement de redimensionnement uniquement pour \u003Ccode>large_default\u003C\u002Fcode> sans toucher aux autres formats, il faut intervenir dans le code PHP de PrestaShop.\u003C\u002Fp>\n\u003Ch3>Approche par override (PrestaShop 1.7)\u003C\u002Fh3>\n\u003Cp>La classe \u003Ccode>ImageManager\u003C\u002Fcode> gère le redimensionnement. Vous pouvez overrider la méthode \u003Ccode>resize()\u003C\u002Fcode> pour adapter le comportement selon le type d'image :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F override\u002Fclasses\u002FImageManager.php\nclass ImageManager extends ImageManagerCore\n{\n    public static function resize(\n        $src_file,\n        $dst_file,\n        $dst_width = null,\n        $dst_height = null,\n        $file_type = 'jpg',\n        $force_type = false,\n        &$error = 0,\n        &$tgt_width = null,\n        &$tgt_height = null,\n        $quality = 5,\n        &$src_width = null,\n        &$src_height = null\n    ) {\n        \u002F\u002F Détecter si c'est un format large_default\n        if (strpos($dst_file, 'large_default') !== false) {\n            \u002F\u002F Redimensionner en conservant le ratio sans remplissage\n            return self::resizeWithoutPadding(\n                $src_file, $dst_file, $dst_width, $dst_height, $file_type\n            );\n        }\n        \n        return parent::resize(\n            $src_file, $dst_file, $dst_width, $dst_height,\n            $file_type, $force_type, $error, $tgt_width,\n            $tgt_height, $quality, $src_width, $src_height\n        );\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Approche PrestaShop 8.x\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 8.x, les overrides restent supportés mais la méthode recommandée est d'utiliser un \u003Cstrong>module\u003C\u002Fstrong> avec un hook sur \u003Ccode>actionWatermark\u003C\u002Fcode> ou de remplacer le service de gestion d'images via le container Symfony :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-yaml\">\n# modules\u002Fmonmodule\u002Fconfig\u002Fservices.yml\nservices:\n    monmodule.image_resizer:\n        class: MonModule\\Service\\CustomImageResizer\n        decorates: 'prestashop.core.image.resizer'\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Solution 4 : CSS ciblé (correctif rapide)\u003C\u002Fh2>\n\u003Cp>Si le problème est purement cosmétique et que la bordure blanche est simplement gênante visuellement, un correctif CSS peut suffire :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Masquer les bordures blanches sur les images large_default *\u002F\n.product-cover img,\n.images-container .product-cover img {\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>object-fit: cover\u003C\u002Fcode> force l'image à remplir son conteneur en recadrant les bords excédentaires plutôt qu'en affichant du blanc. C'est la solution la plus rapide à mettre en place, bien qu'elle masque le problème plutôt qu'elle ne le corrige.\u003C\u002Fp>\n\u003Ch2>Quelle solution choisir ?\u003C\u002Fh2>\n\u003Ctr>\u003Cth>Solution\u003C\u002Fth>\u003Cth>Difficulté\u003C\u002Fth>\u003Cth>Impact\u003C\u002Fth>\u003Cth>Recommandation\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Image originale via Smarty\u003C\u002Fth>\u003Cth>Facile\u003C\u002Fth>\u003Cth>Performance (poids)\u003C\u002Fth>\u003Cth>Dépannage rapide\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Harmoniser les ratios\u003C\u002Fth>\u003Cth>Facile\u003C\u002Fth>\u003Cth>Tous les formats\u003C\u002Fth>\u003Cth>**Recommandée**\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Override PHP \u002F Module\u003C\u002Fth>\u003Cth>Avancé\u003C\u002Fth>\u003Cth>Format ciblé\u003C\u002Fth>\u003Cth>Besoin spécifique\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>CSS `object-fit`\u003C\u002Fth>\u003Cth>Facile\u003C\u002Fth>\u003Cth>Visuel uniquement\u003C\u002Fth>\u003Cth>Correctif temporaire\u003C\u002Fth>\u003C\u002Ftr>",[177,180,183,186,189],{"q":178,"a":179},"Comment PrestaShop stocke-t-il les images produit sur le serveur ?","PrestaShop attribue un identifiant unique à chaque image. Le fichier est stocké dans \u002Fimg\u002Fp\u002F suivi de chaque chiffre de l'ID séparé par des dossiers. Par exemple, l'image 250 se trouve dans \u002Fimg\u002Fp\u002F2\u002F5\u002F0\u002F250.jpg pour l'originale, et \u002Fimg\u002Fp\u002F2\u002F5\u002F0\u002F250-large_default.jpg pour le format large.",{"q":181,"a":182},"Pourquoi la régénération des miniatures ajoute des bordures blanches ?","Lorsque le ratio de l'image source ne correspond pas au ratio du format cible configuré dans Préférences > Images, PrestaShop ajoute un remplissage blanc (padding) pour combler la différence. La solution est d'uploader des images dont le ratio correspond à celui de vos formats configurés.",{"q":184,"a":185},"Peut-on régénérer les miniatures pour un seul format d'image PrestaShop ?","Non, l'outil de régénération natif de PrestaShop traite tous les formats simultanément. Pour cibler un format spécifique comme large_default, il faut développer un script personnalisé ou un module qui appelle ImageManager::resize() uniquement pour le format souhaité.",{"q":187,"a":188},"Comment accéder à l'image originale d'un produit dans un template Smarty ?","Utilisez le modificateur spacify de Smarty pour reconstruire le chemin : \u002Fimg\u002Fp\u002F{$cover.id_image|spacify:'\u002F'}\u002F{$cover.id_image}.jpg. Ce modificateur sépare chaque chiffre de l'ID par un slash, reproduisant l'arborescence de stockage de PrestaShop.",{"q":190,"a":191},"La propriété CSS object-fit est-elle une bonne solution pour les bordures blanches ?","C'est un correctif rapide et efficace visuellement : object-fit: cover force l'image à remplir son conteneur en recadrant les bords. Cependant, cela masque le problème sans le résoudre à la source. Pour une solution durable, harmonisez les ratios de vos images source avec les dimensions configurées dans PrestaShop.","Les bordures blanches sur les images produit PrestaShop apparaissent quand le ratio de l'image source ne correspond pas au format cible. La solution recommandée est d'harmoniser les ratios avant upload ; pour un correctif immédiat, utilisez object-fit: cover en CSS ou affichez l'image originale via le modificateur Smarty spacify.","2026-03-21T15:23:10.000Z",[],"PrestaShop pour les développeurs",{"footer":197},{"theme":198,"description":110,"hours":110,"logo":199,"contact":202,"social":203,"bottomBar":213},"dark",{"src":200,"href":201,"alt":95},"\u002Flogo-ac.svg","\u002F",{"email":110,"phone":110,"address":110,"cta":110},[204,207,210],{"platform":205,"href":206,"label":205},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":208,"href":209,"label":208},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":211,"href":212,"label":211},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":110},{"header":215},{"logo":216,"topBar":219,"contactEmail":222,"features":223,"navBar":110},{"src":200,"alt":217,"text":95,"href":201,"class":218},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":110,"showLanguages":30,"align":220,"languages":221},"left",[],"contact@alexandrecarette.fr",{"showSearch":30,"showWishlist":30,"showLogin":20,"showContact":30,"showCart":30,"stickyHeader":20,"headerLayout":224},"inline",{"academy":226,"blog":227,"expertise":238},[],[228,232,235],{"title":229,"url":230,"score":117,"type":231},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":233,"url":234,"score":117,"type":231},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":236,"url":237,"score":117,"type":231},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[]]