Supprimer les bordures blanches des images produit PrestaShop

Pourquoi vos images produit ont des bordures blanches

Lorsque PrestaShop redimensionne vos images produit pour générer les différents formats (small_default, medium_default, large_default, etc.), il applique un recadrage pour respecter les dimensions configurées dans Préférences > Images. 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.

Ce problème est particulièrement visible sur le format large_default utilisé sur la fiche produit, car c'est l'image la plus grande et donc celle où le remplissage se remarque le plus.

Comprendre le stockage des images dans PrestaShop

Avant de corriger le problème, il faut comprendre comment PrestaShop organise ses images produit sur le serveur.

Chaque image uploadée reçoit un identifiant unique (id_image). PrestaShop stocke ensuite les fichiers selon une arborescence basée sur les chiffres de cet identifiant. Pour une image dont l'ID est 250, le chemin sera :

/img/p/2/5/0/250.jpg          ← Image originale (non redimensionnée)
/img/p/2/5/0/250-small_default.jpg
/img/p/2/5/0/250-medium_default.jpg
/img/p/2/5/0/250-large_default.jpg
/img/p/2/5/0/250-home_default.jpg

L'image sans suffixe (250.jpg) est toujours l'image originale uploadée, dans sa résolution et ses proportions d'origine — donc sans aucune bordure blanche.

Solution 1 : Afficher l'image originale via Smarty

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.

Le modificateur spacify 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 / comme séparateur, on reconstruit l'arborescence PrestaShop :

{* Construire le chemin vers l'image originale (sans redimensionnement) *}
{assign var="original_path" value="/img/p/{$cover.id_image|spacify:'/'}/{$cover.id_image}.jpg"}

<img src="{$original_path}" alt="{$product.name}" class="img-fluid" />

Pour l'image d'ID 250, spacify transforme 250 en 2/5/0, ce qui donne le chemin /img/p/2/5/0/250.jpg.

Attention aux performances

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 :

• L'attribut `loading="lazy"` pour le chargement différé
• Une limite côté back-office sur la taille maximale des uploads
• Une compression via un outil comme **TinyPNG** ou le module **Image Optimization**

<img 
  src="/img/p/{$cover.id_image|spacify:'/'}/{$cover.id_image}.jpg" 
  alt="{$product.name}" 
  loading="lazy"
  width="800"
  height="800"
/>

Solution 2 : Régénérer les images avec les bons ratios

La solution la plus propre consiste à harmoniser les ratios entre vos images source et vos formats configurés.

1. Allez dans **Préférences > Images** (PS 1.7) ou **Design > Paramètres d'images** (PS 8.x)
2. Notez les dimensions de `large_default` (par exemple 800×800)
3. Recadrez vos images source au même ratio **avant** de les uploader
4. Régénérez les miniatures via le bouton dédié

Important : la régénération s'applique à tous les formats simultanément. Il n'est pas possible de régénérer un seul format via l'interface standard.

Solution 3 : Développement spécifique pour un format ciblé

Si vous souhaitez modifier le comportement de redimensionnement uniquement pour large_default sans toucher aux autres formats, il faut intervenir dans le code PHP de PrestaShop.

Approche par override (PrestaShop 1.7)

La classe ImageManager gère le redimensionnement. Vous pouvez overrider la méthode resize() pour adapter le comportement selon le type d'image :

// override/classes/ImageManager.php
class ImageManager extends ImageManagerCore
{
    public static function resize(
        $src_file,
        $dst_file,
        $dst_width = null,
        $dst_height = null,
        $file_type = 'jpg',
        $force_type = false,
        &$error = 0,
        &$tgt_width = null,
        &$tgt_height = null,
        $quality = 5,
        &$src_width = null,
        &$src_height = null
    ) {
        // Détecter si c'est un format large_default
        if (strpos($dst_file, 'large_default') !== false) {
            // Redimensionner en conservant le ratio sans remplissage
            return self::resizeWithoutPadding(
                $src_file, $dst_file, $dst_width, $dst_height, $file_type
            );
        }
        
        return parent::resize(
            $src_file, $dst_file, $dst_width, $dst_height,
            $file_type, $force_type, $error, $tgt_width,
            $tgt_height, $quality, $src_width, $src_height
        );
    }
}

Approche PrestaShop 8.x

Sur PrestaShop 8.x, les overrides restent supportés mais la méthode recommandée est d'utiliser un module avec un hook sur actionWatermark ou de remplacer le service de gestion d'images via le container Symfony :

# modules/monmodule/config/services.yml
services:
    monmodule.image_resizer:
        class: MonModule\Service\CustomImageResizer
        decorates: 'prestashop.core.image.resizer'

Solution 4 : CSS ciblé (correctif rapide)

Si le problème est purement cosmétique et que la bordure blanche est simplement gênante visuellement, un correctif CSS peut suffire :

/* Masquer les bordures blanches sur les images large_default */
.product-cover img,
.images-container .product-cover img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

object-fit: cover 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.

Quelle solution choisir ?

SolutionDifficultéImpactRecommandation Image originale via SmartyFacilePerformance (poids)Dépannage rapide Harmoniser les ratiosFacileTous les formats**Recommandée** Override PHP / ModuleAvancéFormat cibléBesoin spécifique CSS `object-fit`FacileVisuel uniquementCorrectif temporaire