Sur un catalogue vélo, les photos produits viennent de sources multiples : shoot studio fond blanc, photos fabricant fond crème, lifestyle extérieur. Résultat dans la grille catégorie : un patchwork de fonds blancs durs, beiges, gris clair, qui casse l’unité visuelle.
Le module Vignettes produit — fond détecté résout ça sans retoucher photo par photo : il extrait la couleur dominante du bord de chaque image et l’applique en fond à la vignette générée.
Côté client : l’impact visuel
La grille catégorie devient harmonieuse, chaque vignette s’intègre avec son fond naturel au lieu d’écraser un fond blanc dur. Les photos fabricant qui mélangent fond crème et fond gris ne créent plus de rupture visuelle. Le rendu se rapproche d’un catalogue print soigné.
Le client peut sélectionner :
- Détection bord-haut, bord-bas, ou coin
- Taille de l’échantillon (1px, 5px, carré 10×10)
- Fallback couleur si la détection rate
Côté technique
Le module s’attache au hook PrestaShop de régénération de miniatures et s’intercale dans la chaîne de traitement des images. Pour chaque image source, il lit un échantillon de pixels en bordure — haut, bas ou coin selon la configuration BO — à l’aide des fonctions GD ou Imagick, puis calcule la couleur médiane de cet échantillon. Le choix de la médiane plutôt que de la moyenne arithmétique est délibéré : la médiane reste stable face aux pixels parasites (anti-aliasing, artefacts de compression JPEG) là où la moyenne serait tirée vers un gris insipide.
La couleur extraite est ensuite appliquée de deux manières au choix. Soit elle est posée directement comme background-color CSS sur la balise <img> rendue dans le catalogue, soit elle est incrustée comme padding de canvas avant l’export en JPG ou WebP de la vignette finale. Les images PNG transparentes héritent du fond détecté, tandis que les images opaques sont laissées intactes pour éviter de double-imprimer un fond.
L’opération est entièrement mise en cache : la détection ne tourne qu’à la première régénération de miniature, et les vignettes suivantes sont servies depuis le disque sans surcoût.
Pourquoi c’est pertinent
Un catalogue vélo, c’est de la photo à grande échelle : un site moyen affiche 50 à 200 produits par page. La cohérence visuelle de la grille pèse directement sur la perception qualité du shop. C’est le genre de détail qu’un client ne remarque pas consciemment, mais qui change la confiance accordée à la marque.
