[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fG6YisvulQjoGhXAQ07JkZFpcopzjYgqtFFgc7ZKpR5g":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":61,"megamenu":142,"$fkDfzI6VlzEjXxp9LqYOB-vKyuytu3zdjSLvoIWTeTjQ":198,"footer-db":212,"header-db":230},{"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":34,"psVersions":35,"content":39,"faq":40,"tldr":56,"readingTime":57,"generatedAt":58,"publishDate":58,"relatedArticles":59,"sourceCategory":60},"Redimensionner les images des modules Produits Vus et Nouveautés PrestaShop","redimensionner-images-modules-produits-vus-nouveautes-prestashop","Comment modifier les dimensions des images dans les modules Déjà Vu et Nouveaux Produits PrestaShop sans pénaliser les performances. Guide complet avec code.","design",[28,29,30,31,32,33],"images","modules","performance","smarty","templates","optimisation","intermediaire",[36,37,38],"1.6","1.7","8.x","\u003Ch1>Redimensionner les images des modules Produits Vus et Nouveautés PrestaShop\u003C\u002Fh1>\n\u003Cp>Les modules natifs \u003Cstrong>Produits déjà vus\u003C\u002Fstrong> (\u003Ccode>blockviewed\u003C\u002Fcode>) et \u003Cstrong>Nouveaux produits\u003C\u002Fstrong> (\u003Ccode>blocknewproducts\u003C\u002Fcode>) affichent par défaut des images au format \u003Ccode>medium_default\u003C\u002Fcode>, souvent surdimensionnées par rapport à l'espace qu'elles occupent réellement dans le layout. Résultat : un temps de chargement inutilement alourdi et une note dégradée sur GTmetrix ou PageSpeed Insights.\u003C\u002Fp>\n\u003Cp>La tentation est forte de redimensionner ces images via CSS (\u003Ccode>width\u003C\u002Fcode>, \u003Ccode>height\u003C\u002Fcode>, \u003Ccode>max-width\u003C\u002Fcode>). C'est une \u003Cstrong>mauvaise pratique\u003C\u002Fstrong> : le navigateur télécharge toujours l'image en pleine résolution, puis la réduit visuellement côté client. Le poids réseau reste identique, et les outils d'audit pénalisent sévèrement ce décalage entre dimensions intrinsèques et dimensions affichées.\u003C\u002Fp>\n\u003Cp>La bonne approche consiste à modifier le \u003Cstrong>type d'image\u003C\u002Fstrong> appelé dans le template Smarty, pour servir directement le bon format depuis le serveur.\u003C\u002Fp>\n\u003Ch2>Pourquoi ne pas redimensionner via CSS\u003C\u002Fh2>\n\u003Cp>Quand vous appliquez un \u003Ccode>width: 98px\u003C\u002Fcode> en CSS sur une image de 300×300 pixels :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Le navigateur télécharge les 300×300 pixels (environ 30-50 Ko au lieu de 5-8 Ko)\u003C\u002Fli>\n\u003Cli>Le rendu est flou sur certains écrans car le navigateur effectue un downscaling approximatif\u003C\u002Fli>\n\u003Cli>GTmetrix et Lighthouse signalent l'erreur **« Serve images that are appropriately-sized »**\u003C\u002Fli>\n\u003Cli>Le cumul sur une page listant 10-20 produits peut représenter plusieurs centaines de Ko superflus\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>La solution performante est de demander à PrestaShop de servir le bon type d'image natif, déjà généré et optimisé à la bonne taille.\u003C\u002Fp>\n\u003Ch2>Les types d'images PrestaShop\u003C\u002Fh2>\n\u003Cp>PrestaShop génère automatiquement plusieurs déclinaisons de chaque image produit. Vous les configurez dans \u003Cstrong>Back-Office → Design → Images\u003C\u002Fstrong> (ou \u003Cstrong>Préférences → Images\u003C\u002Fstrong> en 1.6).\u003C\u002Fp>\n\u003Cp>Les types par défaut :\u003C\u002Fp>\n\u003Ctr>\u003Cth>Type\u003C\u002Fth>\u003Cth>Taille par défaut\u003C\u002Fth>\u003Cth>Usage typique\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`cart_default`\u003C\u002Fth>\u003Cth>125×125 px\u003C\u002Fth>\u003Cth>Panier, mini-panier\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`small_default`\u003C\u002Fth>\u003Cth>98×98 px\u003C\u002Fth>\u003Cth>Listes compactes, widgets latéraux\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`medium_default`\u003C\u002Fth>\u003Cth>452×452 px\u003C\u002Fth>\u003Cth>Fiches catégories, résultats de recherche\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`home_default`\u003C\u002Fth>\u003Cth>250×250 px\u003C\u002Fth>\u003Cth>Page d'accueil, blocs produits\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`large_default`\u003C\u002Fth>\u003Cth>458×458 px\u003C\u002Fth>\u003Cth>Fiche produit principale\u003C\u002Fth>\u003C\u002Ftr>\n\u003Cp>Pour les modules en sidebar (colonne latérale), \u003Ccode>small_default\u003C\u002Fcode> ou \u003Ccode>cart_default\u003C\u002Fcode> sont les formats adaptés.\u003C\u002Fp>\n\u003Ch2>Modifier le template du module Produits Déjà Vus\u003C\u002Fh2>\n\u003Ch3>PrestaShop 1.6\u003C\u002Fh3>\n\u003Cp>Le template se trouve dans votre thème, pas dans le dossier du module :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nthemes\u002Fvotre-theme\u002Fmodules\u002Fblockviewed\u002Fblockviewed.tpl\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Repérez l'appel à \u003Ccode>getImageLink\u003C\u002Fcode> qui utilise \u003Ccode>medium_default\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* AVANT — image surdimensionnée *}\n<img src=\"{if isset($viewedProduct->id_image) && $viewedProduct->id_image}{$link->getImageLink($viewedProduct->link_rewrite, $viewedProduct->cover, 'medium_default')}{else}{$img_prod_dir}{$lang_iso}-default-medium_default.jpg{\u002Fif}\" alt=\"{$viewedProduct->legend|escape:'html':'UTF-8'}\" title=\"{$viewedProduct->legend|escape:'html':'UTF-8'}\"\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Remplacez par \u003Ccode>small_default\u003C\u002Fcode> et ajoutez les attributs \u003Ccode>width\u003C\u002Fcode> et \u003Ccode>height\u003C\u002Fcode> pour éviter le \u003Cstrong>Cumulative Layout Shift (CLS)\u003C\u002Fstrong> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* APRÈS — image optimisée *}\n<img src=\"{if isset($viewedProduct->id_image) && $viewedProduct->id_image}{$link->getImageLink($viewedProduct->link_rewrite, $viewedProduct->cover, 'small_default')}{else}{$img_prod_dir}{$lang_iso}-default-small_default.jpg{\u002Fif}\" alt=\"{$viewedProduct->legend|escape:'html':'UTF-8'}\" width=\"98\" height=\"98\" title=\"{$viewedProduct->legend|escape:'html':'UTF-8'}\"\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Appliquez le même principe au module \u003Cstrong>Nouveaux Produits\u003C\u002Fstrong> (\u003Ccode>blocknewproducts.tpl\u003C\u002Fcode>).\u003C\u002Fp>\n\u003Ch3>PrestaShop 1.7 et 8.x\u003C\u002Fh3>\n\u003Cp>L'architecture a changé. Les modules natifs ont été remplacés par des widgets et le système de templates utilise désormais des fichiers \u003Ccode>.tpl\u003C\u002Fcode> dans le dossier du module ou des overrides dans le thème :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nthemes\u002Fvotre-theme\u002Fmodules\u002Fps_viewedproduct\u002Fviews\u002Ftemplates\u002Fhook\u002Fps_viewedproduct.tpl\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>En 1.7+, l'appel image passe par le tableau \u003Ccode>$product\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* PrestaShop 1.7 \u002F 8.x *}\n<img\n  src=\"{$product.cover.bySize.small_default.url}\"\n  alt=\"{$product.cover.legend}\"\n  width=\"{$product.cover.bySize.small_default.width}\"\n  height=\"{$product.cover.bySize.small_default.height}\"\n  loading=\"lazy\"\n\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Notez l'ajout de \u003Ccode>loading=\"lazy\"\u003C\u002Fcode> qui diffère le chargement des images hors écran — un gain de performance significatif sur les pages longues.\u003C\u002Fp>\n\u003Ch2>Optimiser la qualité sans gonfler le poids\u003C\u002Fh2>\n\u003Cp>Si les images apparaissent floues après le changement de type, ne revenez pas à \u003Ccode>medium_default\u003C\u002Fcode>. Deux approches complémentaires :\u003C\u002Fp>\n\u003Ch3>1. Augmenter la qualité de compression JPEG\u003C\u002Fh3>\n\u003Cp>Dans \u003Cstrong>Back-Office → Design → Images\u003C\u002Fstrong>, réglez la qualité JPEG à \u003Cstrong>90-95%\u003C\u002Fstrong> (pas 100%, qui produit des fichiers disproportionnés sans gain visuel perceptible). Puis régénérez les miniatures.\u003C\u002Fp>\n\u003Ch3>2. Créer un type d'image personnalisé\u003C\u002Fh3>\n\u003Cp>Si aucun type existant ne correspond exactement à votre besoin, créez-en un :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Allez dans **Back-Office → Design → Images**\u003C\u002Fli>\n\u003Cli>Cliquez sur **Ajouter un nouveau type d'image**\u003C\u002Fli>\n\u003Cli>Définissez le nom (ex: `sidebar_default`), la largeur et la hauteur souhaitées\u003C\u002Fli>\n\u003Cli>Cochez les catégories concernées (Produits)\u003C\u002Fli>\n\u003Cli>**Régénérez les miniatures** après la création\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Puis utilisez ce nouveau type dans vos templates :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{$link->getImageLink($product.link_rewrite, $product.cover, 'sidebar_default')}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Vider le cache après modification\u003C\u002Fh2>\n\u003Cp>Après toute modification de template, les changements peuvent ne pas apparaître immédiatement à cause du cache Smarty.\u003C\u002Fp>\n\u003Cp>Pour forcer le rafraîchissement :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Back-Office → Paramètres avancés → Performances**\u003C\u002Fli>\n\u003Cli>Cliquez sur **Vider le cache** (bouton en haut à droite)\u003C\u002Fli>\n\u003Cli>Videz également le **cache de votre navigateur** (Ctrl+Shift+Suppr)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>En développement, activez le mode \u003Cstrong>« Forcer la compilation »\u003C\u002Fstrong> dans les options Smarty pour voir chaque modification en temps réel. Pensez à le désactiver en production (impact notable sur les performances).\u003C\u002Fp>\n\u003Ch2>Récapitulatif des bonnes pratiques\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>**Jamais de redimensionnement CSS** pour réduire des images — utilisez le bon type d'image natif\u003C\u002Fli>\n\u003Cli>**Toujours spécifier `width` et `height`** en attributs HTML pour éviter le CLS\u003C\u002Fli>\n\u003Cli>**Ajoutez `loading=\"lazy\"`** sur les images sous la ligne de flottaison\u003C\u002Fli>\n\u003Cli>**Qualité JPEG entre 85 et 95%** — le 100% est un gaspillage sans bénéfice visible\u003C\u002Fli>\n\u003Cli>**Régénérez les miniatures** après tout changement de type d'image\u003C\u002Fli>\n\u003Cli>**Videz le cache Smarty et navigateur** après chaque modification de template\u003C\u002Fli>\n\u003C\u002Ful>",[41,44,47,50,53],{"q":42,"a":43},"Pourquoi mes modifications de template PrestaShop ne s'affichent pas ?","PrestaShop met en cache les templates Smarty compilés. Après toute modification d'un fichier .tpl, videz le cache depuis Back-Office → Paramètres avancés → Performances, puis videz aussi le cache de votre navigateur. En développement, activez l'option « Forcer la compilation » dans les réglages Smarty pour voir les changements immédiatement.",{"q":45,"a":46},"Quelle taille d'image utiliser pour les modules en sidebar PrestaShop ?","Pour les modules affichés en colonne latérale (produits vus, meilleures ventes, nouveautés), utilisez le type small_default (98×98 px) ou cart_default (125×125 px). Le type medium_default (452×452 px) est surdimensionné pour cet usage et pénalise vos performances. Vous pouvez aussi créer un type personnalisé adapté à votre layout depuis Back-Office → Design → Images.",{"q":48,"a":49},"Comment redimensionner les images produits PrestaShop sans perdre en qualité ?","Ne redimensionnez jamais via CSS, cela ne réduit pas le poids du fichier téléchargé. Utilisez plutôt le type d'image natif correspondant à la taille d'affichage (small_default, home_default, etc.). Si aucun type ne convient, créez un type personnalisé dans Back-Office → Design → Images. Réglez la qualité JPEG entre 85 et 95% puis régénérez toutes les miniatures.",{"q":51,"a":52},"Comment améliorer mon score GTmetrix sur les images PrestaShop ?","Trois actions clés : servir le bon type d'image natif (pas de CSS resize), ajouter les attributs width et height sur chaque balise img pour éviter le Cumulative Layout Shift, et utiliser loading=\"lazy\" sur les images sous la ligne de flottaison. En PrestaShop 8.x, le lazy loading est intégré nativement dans les thèmes modernes.",{"q":54,"a":55},"Où se trouvent les templates des modules natifs PrestaShop ?","En PrestaShop 1.6, les templates sont dans themes\u002Fvotre-theme\u002Fmodules\u002Fnom_module\u002F. En 1.7 et 8.x, ils se trouvent dans modules\u002Fnom_module\u002Fviews\u002Ftemplates\u002Fhook\u002F ou dans l'override du thème themes\u002Fvotre-theme\u002Fmodules\u002Fnom_module\u002Fviews\u002Ftemplates\u002Fhook\u002F. Modifiez toujours la copie dans le thème, jamais le fichier original du module.","Ne redimensionnez jamais les images PrestaShop via CSS : remplacez le type d'image dans le template Smarty (medium_default → small_default) pour servir directement le bon format et améliorer vos performances web.",4,"2026-03-21T15:11:35.000Z",[],"PrestaShop pour les développeurs",{"columns":62},[63,79,109,130],{"title":64,"links":65},"Plateforme",[66,70,73,76],{"label":67,"href":68,"external":69},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":71,"href":72,"external":69},"Devenir Ambassadeur","\u002Fambassadeur",{"label":74,"href":75,"external":69},"Modules PrestaShop","\u002Fmodules",{"label":77,"href":78,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":80,"links":81},"Le Synedre",[82,85,88,91,94,97,100,103,106],{"label":83,"href":84,"external":69},"L'histoire","\u002Fsynedre",{"label":86,"href":87,"external":69},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":89,"href":90,"external":69},"L'équipe","\u002Fequipe",{"label":92,"href":93,"external":69},"Le réacteur en direct","\u002Freacteur",{"label":95,"href":96,"external":69},"Le Drill (entraînement)","\u002Fdrill",{"label":98,"href":99,"external":69},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":101,"href":102,"external":69},"Les agents IA","\u002Fagents-ia",{"label":104,"href":105,"external":69},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":107,"href":108,"external":69},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":110,"links":111},"Ressources",[112,115,118,121,124,127],{"label":113,"href":114,"external":69},"Blog","\u002Fblog",{"label":116,"href":117,"external":69},"Academy","\u002Facademy",{"label":119,"href":120,"external":69},"Dictionnaire","\u002Fdictionnaire",{"label":122,"href":123,"external":69},"Expertise PrestaShop","\u002Fexpertise",{"label":125,"href":126,"external":69},"Flywheel","\u002Fflywheel",{"label":128,"href":129,"external":69},"Manifeste","\u002Fmanifeste",{"title":131,"links":132},"À propos",[133,136,139],{"label":134,"href":135,"external":69},"Alexandre Carette","\u002Fa-propos",{"label":137,"href":138,"external":69},"Dossier de presse","\u002Fpresse",{"label":140,"href":141,"external":69},"Contact","\u002Fcontact",{"items":143},[144,153,159,165,173,180,186,192],{"id":145,"type":146,"label":147,"href":123,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":150,"children":151,"psChildren":152},41,"link",{"fr":148},"Expertise",null,0,[],[],{"id":154,"type":146,"label":155,"href":114,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":156,"children":157,"psChildren":158},42,{"fr":113},1,[],[],{"id":160,"type":146,"label":161,"href":75,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":162,"children":163,"psChildren":164},43,{"fr":74},2,[],[],{"id":166,"type":146,"label":167,"href":169,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":170,"children":171,"psChildren":172},44,{"fr":168},"Outils IA","\u002Foutils-ia",3,[],[],{"id":174,"type":146,"label":175,"href":68,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":177,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":57,"children":178,"psChildren":179},45,{"fr":176},"Offre Starter ✨",{"highlight":20},[],[],{"id":181,"type":146,"label":182,"href":117,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":183,"children":184,"psChildren":185},46,{"fr":116},5,[],[],{"id":187,"type":146,"label":188,"href":135,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":189,"children":190,"psChildren":191},47,{"fr":131},6,[],[],{"id":193,"type":146,"label":194,"href":141,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":195,"children":196,"psChildren":197},48,{"fr":140},7,[],[],{"academy":199,"blog":200,"expertise":211},[],[201,205,208],{"title":202,"url":203,"score":156,"type":204},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":206,"url":207,"score":156,"type":204},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":209,"url":210,"score":156,"type":204},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"footer":213},{"theme":214,"description":149,"hours":149,"logo":215,"contact":218,"social":219,"bottomBar":229},"dark",{"src":216,"href":217,"alt":134},"\u002Flogo-ac.svg","\u002F",{"email":149,"phone":149,"address":149,"cta":149},[220,223,226],{"platform":221,"href":222,"label":221},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":224,"href":225,"label":224},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":227,"href":228,"label":227},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":149},{"header":231},{"logo":232,"topBar":235,"contactEmail":238,"features":239,"navBar":149},{"src":216,"alt":233,"text":134,"href":217,"class":234},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":149,"showLanguages":69,"align":236,"languages":237},"left",[],"contact@alexandrecarette.fr",{"showSearch":69,"showWishlist":69,"showLogin":20,"showContact":69,"showCart":69,"stickyHeader":20,"headerLayout":240},"inline"]