Optimisation Prestashop : Travailler ses images de fiche produit
L’ensemble des images que vous intégrez dans vos pages a un impact sur la performance globale de votre boutique PrestaShop.
Les images des fiches produits sont nombreuses, parfois hétérogènes. Il est important d’en prendre soin pour assurer un rendu visuel professionnel sans prendre de risque sur la qualité du chargement de vos pages.
Plus vos images sont lourdes, plus le temps d’affichage est long et peut engorger l’hébergement de votre site.
Plus le temps de chargement d’une page est long, plus le risque que le visiteur quitte la page est grand.
Pour la plupart des utilisateurs, le fait de réduire le poids d’une image, signifie, réduire aussi considérablement la qualité visuelle de celle-ci. C’est en effet ce qu’il peut se produire, quand on ne connaît pas les bonnes pratiques à mettre en place et qu’on n’a pas une grande expérience dans la gestion de visuels.
Nous allons donc mettre à plat les bases des caractéristiques de vos images produits, sans oublier la gestion des paramètres dans votre Back office PrestaShop pour optimiser l’impact des images produits sur la performance de votre site.
Le choix des images produit
Si vous faites vous même vos prises de vues, les images que vous obtiendrez dépendent de la qualité de résolution de votre appareil photo. Aujourd’hui, de nombreux appareils ou téléphones portables proposent un rendu visuel de haute qualité. C’est en soit très bien mais c’est aussi un élément à contrôler. La taille et la résolution des images prises depuis un appareil photo, sans traitement, sont très souvent beaucoup trop importantes pour un format web ou mobile.
Une fois vos prises de vues faites et chargées sur votre ordinateur, vérifiez les dimensions et résolutions des fichiers.
Les dimensions (en pixel), ou taille, correspondent au nombre total de pixels sur la largeur et la hauteur de l’image.
La résolution (en ppp ou en dpi) exprime la finesse des détails d’une image. Plus le nombre de dpi est grand, plus la résolution est élevée.
Dans tous les cas, une image qui a de grandes dimensions et une grande résolution va avoir un poids très important, surtout pour le web.
Par exemple une image de 2000 pixels de large avec une résolution de 300 dpi atteindra facilement un poids supérieur à plusieurs Mo pouvant entraîner un temps de chargement inutilement trop long.
Si les images de vos produits viennent directement de vos fournisseurs, il y a des chances pour qu’elles soient déjà traitées pour le web. Cependant prenez le temps de vérifier leur taille et poids avant de les intégrer à votre catalogue.
Retouchez vos images
Il existe de nombreux logiciels permettant de réduire la taille des images et aussi leur poids.
Vous devrez réduire le poids d’une image tout en conservant une dimension tout à fait satisfaisante pour mettre en valeur vos produits et conserver une résolution qui donnera un rendu net.
Si vous avez PhotoShop, le plus connu des logiciels de retouche d’images, vous savez qu’il vous permet de procéder à ce type de réglage dans l’enregistrement de vos images.
Nul besoin d’être un expert en retouche d’image cependant, vous pouvez vous tourner vers des solutions moins coûteuses voire gratuites mais tout aussi efficaces pour ce type d’opération (XnvIEW, Photo Filtre, Gimp, Pixlr X…etc…)
Il est possible de configurer les transformations de vos images par lot, pour gagner du temps.
La bonne dimension
Lorsque vous intégrez votre image sur un produit, vous chargez une seule image et PrestaShop se charge de produire les différents formats de miniatures.
En moyenne les images visibles pour présenter un article dans la page fiche produit sont autour de 350 à 450 pixels de large.
Pour avoir un bel effet visuel, vous devez charger une image qui sera de dimension égale ou supérieure à la taille la plus grande affichée sur votre site. Si ce n’est pas le cas, le rendu visuel de votre image ne sera pas de bonne qualité.
Sur votre site PrestaShop les zones d’images sont définies en général en carré.
Si vos images produits ne sont pas carrées, elles vont venir s’intégrer de façon proportionnelle dans la zone d’accueil.
L’image du produit sur fond bleu est de type paysage, sa largeur et hauteur de départ sont de 1000px par 600 px. A l’intégration ces valeurs sont automatiquement re-calculées pour afficher l’image correctement dans le carré sur fond blanc.
Pour un résultat harmonieux, l’idéal est de disposer d’images qui auront toujours les mêmes proportions que ce soit en carré, en portrait ou en paysage, avec des fonds idéalement homogènes.
Le bon format d’image
Il existe un grand nombre de format d’images. Tous ne seront pas acceptés sur votre back office, selon les versions et thèmes que vous utilisez sur PrestaShop.
Sur votre tableau de bord, vous seront proposés l’utilisation des formats PNG ou Jpeg.
Le PNG est souvent utilisé si vous avez besoin d’une transparence dans votre image (un logo par exemple).
Le Jpeg a un très bon taux de compression mais révèle souvent les défauts visuels des images.
Le PNG est moins performant sur la compression mais son rendu sera plus qualitatif.
Pensez également que vous pouvez charger plusieurs images sur une fiche produit et que chaque image est comptabilisée dans le poids de la page. Plus vous veillez à alléger le poids de chacune des images à quelques Ko, plus vous assurez un temps de chargement correct pour votre page produit.
Les réglages du tableau de bord PrestaShop
Dans votre tableau de bord (Menu Préférences > images), vous pouvez gérer les préférences de tailles d’images.
Vous avez un aperçu ici de l’ensemble des types d’image et leurs tailles gérées automatiquement sur PrestaShop : 
Pour les images produits, il y a 5 types d’images existants par défaut :
Small : dans le panier
Medium : dans la fiche produit, dans la zone nouveau produit, déjà-vus
Home : détail d’une catégorie, produits phare en 1ère page de la boutique, ou recherche d’un produit
Large : affichage en grand du produit dans la fiche
Thickbox : affichage détaillé du produit, le zoom.
Les valeurs par défaut peuvent varier selon la version PrestaShop ou le thème que vous utilisez.
Si la valeur de redimensionnement automatique attribuée aux images s’affichant dans les pages produit ne vous convient pas, vous pouvez la modifier.
Et une fois modifié, vous devrez alors régénérer les miniatures en allant sur la dernière rubrique du menu Préférences > Images.
Il est recommandé de choisir le bon format à régénérer en sélectionnant d’abord la catégorie d’image (ici Produits) puis en indiquant le format (c’est à dire le type d’image) ciblé (par exemple “large_defaut” dans la capture ci-dessus).
En fonction du volume d’image à traiter, cette opération peut s’avérer délicate et engendre une forte charge du serveur. Nous vous invitons à vous rapprocher de votre agence ou prestataire pour exécuter cette opération de façon contrôlée.
Gérer les options de génération d’images
Entre les différents types d’images et la possibilité de régénérer les miniatures, vous disposez d’options complémentaires à paramétrer.
C’est ici notamment que nous vous recommandons de sélectionner l’option “Utiliser le PNG uniquement si l’image de base est au format PNG.”
Cela permet de limiter les éventuelles pertes de qualité entraînées par un changement de format.
Toujours dans le souci de conserver une bonne résolution, nous vous conseillons également de choisir une compression jpeg au dessus de 80 et une compression png égale ou inférieure à 7.
Il s’agit de trouver l’équilibre entre un rendu visuel graphiquement attractif et un poids d’image raisonnable pour ne pas surcharger la page. Nous vous invitons à faire quelques essais sur plusieurs tailles et formats d’images pour vous aider à évaluer les différences et vérifier comment les images vont apparaître sur votre site.
Utilisez un CDN (Content Delivery Network)
Au delà du traitement de vos images, pensez à exploiter les possibilités annexes pour optimiser les performances de votre boutique en ligne.
Sur votre tableau de bord PrestaShop, cela s’appelle le serveur de média et requiert l’activation préalable des CCC, à savoir la concaténation, la compression et la mise en cache.
Menu : Paramètres avancés > Performances > Serveurs de média
L’objectif est de permettre à votre navigateur de répartir au mieux le chargement des fichiers, dont les images, à travers 3 sous-domaines du même serveur ou à l’aide de serveurs CDNs externes. En théorie vous devez constater un gain de performance sur le chargement des pages.
La mise en place d’un CDN n’étant pas aussi simple que les autres réglages de PrestaShop, nous vous invitons à passer par nos équipes pour réaliser ce type d’intervention