Redimensionner les images des modules Produits Vus et Nouveautés PrestaShop

Les modules natifs Produits déjà vus (blockviewed) et Nouveaux produits (blocknewproducts) affichent par défaut des images au format medium_default, 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.

La tentation est forte de redimensionner ces images via CSS (width, height, max-width). C'est une mauvaise pratique : 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.

La bonne approche consiste à modifier le type d'image appelé dans le template Smarty, pour servir directement le bon format depuis le serveur.

Pourquoi ne pas redimensionner via CSS

Quand vous appliquez un width: 98px en CSS sur une image de 300×300 pixels :

• Le navigateur télécharge les 300×300 pixels (environ 30-50 Ko au lieu de 5-8 Ko)
• Le rendu est flou sur certains écrans car le navigateur effectue un downscaling approximatif
• GTmetrix et Lighthouse signalent l'erreur **« Serve images that are appropriately-sized »**
• Le cumul sur une page listant 10-20 produits peut représenter plusieurs centaines de Ko superflus

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.

Les types d'images PrestaShop

PrestaShop génère automatiquement plusieurs déclinaisons de chaque image produit. Vous les configurez dans Back-Office → Design → Images (ou Préférences → Images en 1.6).

Les types par défaut :

TypeTaille par défautUsage typique `cart_default`125×125 pxPanier, mini-panier `small_default`98×98 pxListes compactes, widgets latéraux `medium_default`452×452 pxFiches catégories, résultats de recherche `home_default`250×250 pxPage d'accueil, blocs produits `large_default`458×458 pxFiche produit principale

Pour les modules en sidebar (colonne latérale), small_default ou cart_default sont les formats adaptés.

Modifier le template du module Produits Déjà Vus

PrestaShop 1.6

Le template se trouve dans votre thème, pas dans le dossier du module :

themes/votre-theme/modules/blockviewed/blockviewed.tpl

Repérez l'appel à getImageLink qui utilise medium_default :

{* AVANT — image surdimensionnée *}
<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{/if}" alt="{$viewedProduct->legend|escape:'html':'UTF-8'}" title="{$viewedProduct->legend|escape:'html':'UTF-8'}"/>

Remplacez par small_default et ajoutez les attributs width et height pour éviter le Cumulative Layout Shift (CLS) :

{* APRÈS — image optimisée *}
<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{/if}" alt="{$viewedProduct->legend|escape:'html':'UTF-8'}" width="98" height="98" title="{$viewedProduct->legend|escape:'html':'UTF-8'}"/>

Appliquez le même principe au module Nouveaux Produits (blocknewproducts.tpl).

PrestaShop 1.7 et 8.x

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 .tpl dans le dossier du module ou des overrides dans le thème :

themes/votre-theme/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl

En 1.7+, l'appel image passe par le tableau $product :

{* PrestaShop 1.7 / 8.x *}
<img
  src="{$product.cover.bySize.small_default.url}"
  alt="{$product.cover.legend}"
  width="{$product.cover.bySize.small_default.width}"
  height="{$product.cover.bySize.small_default.height}"
  loading="lazy"
/>

Notez l'ajout de loading="lazy" qui diffère le chargement des images hors écran — un gain de performance significatif sur les pages longues.

Optimiser la qualité sans gonfler le poids

Si les images apparaissent floues après le changement de type, ne revenez pas à medium_default. Deux approches complémentaires :

1. Augmenter la qualité de compression JPEG

Dans Back-Office → Design → Images, réglez la qualité JPEG à 90-95% (pas 100%, qui produit des fichiers disproportionnés sans gain visuel perceptible). Puis régénérez les miniatures.

2. Créer un type d'image personnalisé

Si aucun type existant ne correspond exactement à votre besoin, créez-en un :

1. Allez dans **Back-Office → Design → Images**
2. Cliquez sur **Ajouter un nouveau type d'image**
3. Définissez le nom (ex: `sidebar_default`), la largeur et la hauteur souhaitées
4. Cochez les catégories concernées (Produits)
5. **Régénérez les miniatures** après la création

Puis utilisez ce nouveau type dans vos templates :

{$link->getImageLink($product.link_rewrite, $product.cover, 'sidebar_default')}

Vider le cache après modification

Après toute modification de template, les changements peuvent ne pas apparaître immédiatement à cause du cache Smarty.

Pour forcer le rafraîchissement :

1. **Back-Office → Paramètres avancés → Performances**
2. Cliquez sur **Vider le cache** (bouton en haut à droite)
3. Videz également le **cache de votre navigateur** (Ctrl+Shift+Suppr)

En développement, activez le mode « Forcer la compilation » dans les options Smarty pour voir chaque modification en temps réel. Pensez à le désactiver en production (impact notable sur les performances).

Récapitulatif des bonnes pratiques

• **Jamais de redimensionnement CSS** pour réduire des images — utilisez le bon type d'image natif
• **Toujours spécifier `width` et `height`** en attributs HTML pour éviter le CLS
• **Ajoutez `loading="lazy"`** sur les images sous la ligne de flottaison
• **Qualité JPEG entre 85 et 95%** — le 100% est un gaspillage sans bénéfice visible
• **Régénérez les miniatures** après tout changement de type d'image
• **Videz le cache Smarty et navigateur** après chaque modification de template