Optimisation Prestashop : Travailler ses images de fiche produit
[Update : publié initialement le 16 juin 2020, ce billet a été mis à jour le 11 septembre 2023]
La gestion des images au sein de vos pages joue un rôle critique pour l’ensemble de la performance de votre boutique PrestaShop. Les images présentes dans les fiches produits, bien que variées en nombre et en taille, exigent une attention particulière pour garantir un rendu visuel professionnel sans compromettre la vitesse de chargement des pages.
Il est essentiel de comprendre que des images trop lourdes ont un impact direct sur le temps d’affichage des pages, ce qui peut surcharger l’infrastructure d’hébergement de votre site. Un temps de chargement prolongé accroît également le risque que les visiteurs quittent la page avant même qu’elle ne soit entièrement chargée.
Souvent, la réduction du poids d’une image est associée à une perte de qualité visuelle, surtout pour les utilisateurs inexpérimentés en gestion d’images. Cependant, il est possible d’optimiser le poids des images tout en préservant leur qualité, en appliquant les bonnes pratiques et en utilisant les paramètres appropriés disponibles dans le Back office PrestaShop.
Dans cet esprit, nous allons passer en revue les caractéristiques essentielles des images de vos produits, tout en n’omettant pas l’importance de la configuration adéquate dans votre Back office PrestaShop pour maximiser l’impact positif des images sur la performance globale 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
De nombreux logiciels sont disponibles pour travailler sur la taille et le poids des images. L’objectif est de réduire le poids d’une image tout en maintenant des dimensions adéquates pour mettre en valeur vos produits et en conservant une résolution qui garantit un rendu net.
Si vous disposez de Photoshop, l’un des logiciels de retouche d’images les plus populaires, vous savez qu’il offre des fonctionnalités pour effectuer ces ajustements lors de l’enregistrement des images. Toutefois, vous n’avez pas besoin d’être un expert en retouche d’images pour accomplir cette tâche. Il existe des solutions moins coûteuses, voire gratuites, tout aussi efficaces pour ces opérations, telles que XnView, PhotoFiltre, GIMP, Pixlr X, etc.
De plus, il est possible de configurer des transformations en lot pour traiter plusieurs images simultanément, ce qui permet de gagner du temps dans le processus.
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. À 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.
 [Update : Le format WEBP]
Le format WebP est une technologie d’image développée par Google, conçue pour réduire la taille des fichiers image tout en préservant la qualité visuelle. Voici ses caractéristiques clés :
Bien que WebP ne soit pas pris en charge nativement par PrestaShop, il existe des modules qui vous permettent de l’utiliser. Cependant, il est important de noter que certaines conditions doivent être remplies, notamment disposer d’une version PHP égale ou supérieure à 5.6. |
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 conseillé de choisir soigneusement le format à régénérer en commençant par sélectionner la catégorie d’image (dans ce cas, « Produits ») et en précisant ensuite le format spécifique (par exemple, « large_defaut » comme illustré dans la capture d’écran ci-dessus).
Il est important de noter que cette opération peut devenir complexe en fonction du volume d’images à traiter, ce qui peut entraîner une charge significative sur le serveur. Nous vous recommandons donc de vous rapprocher de votre agence ou de votre prestataire pour exécuter cette opération de manière contrôlée et efficace.
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.
Dans le but de maintenir une résolution satisfaisante, il est recommandé de sélectionner une compression JPEG supérieure à 80 et une compression PNG égale ou inférieure à 7.
Il est essentiel de trouver un équilibre entre un rendu visuel esthétiquement attrayant et un poids d’image raisonnable, de manière à éviter de surcharger la page. Nous vous encourageons à effectuer des tests avec diverses tailles et formats d’images afin d’évaluer les différences et de vérifier comment ces images s’afficheront sur votre site. Cette démarche vous aidera à obtenir le meilleur compromis entre qualité visuelle et performance de chargement.
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 ici est d’optimiser le chargement des fichiers, y compris les images, en permettant à votre navigateur de les répartir efficacement à travers 3 sous-domaines du même serveur ou en utilisant des serveurs CDNs externes. En théorie, cette approche devrait se traduire par une amélioration notable des performances de chargement des pages.
Cependant, il est important de noter que la mise en place d’un CDN peut être plus complexe que d’autres ajustements dans PrestaShop. Par conséquent, nous vous recommandons de faire appel à nos équipes pour effectuer ce type d’intervention.
Si vous souhaitez en savoir plus ou si vous avez des questions, n’hésitez pas à NOUS CONTACTER. Notre équipe se fera un plaisir de vous assister.
Contactez-nous !