Images produit trop lourdes dans PrestaShop : tailles, miniatures et chargement différé

Vous ouvrez sur votre mobile une catégorie de quarante produits et la page met du temps à s'afficher. Dans la plupart des boutiques, le coupable n'est ni le serveur ni PHP : ce sont les images. Des photos envoyées à la résolution de l'appareil, des miniatures générées dans une taille que le thème n'utilise plus, des formats lourds et toutes les images téléchargées en même temps alors que le client ne voit que les quatre premières.

Cet article explique comment PrestaShop traite les images produit et ce que vous pouvez ajuster.

Comment PrestaShop génère les images

Quand vous ajoutez une photo à un produit, PrestaShop conserve l'original et génère à partir de lui une copie pour chaque type d'image défini pour les produits : la miniature de la liste, celle du panier, la grande de la fiche, celle de la galerie, etc. Le thème demande à chaque endroit la taille qui lui correspond.

Les tailles se configurent dans le back-office, dans les paramètres des images (dans le menu Apparence des versions récentes). Chacune a un nom, une largeur, une hauteur et les types de contenu auxquels elle s'applique : produits, catégories, marques, fournisseurs ou magasins.

Cela a deux conséquences :

• Le poids reçu par le client dépend de la taille générée, et non de la photo originale. Une photo énorme ne pèse rien dans la liste si la miniature est petite.
• Si une taille ne correspond pas à l'espace que le thème lui donne à l'écran, le navigateur télécharge une image plus grande que nécessaire et la réduit, ou une plus petite et l'agrandit (et elle paraît floue).

Des tailles en trop et des tailles qui manquent

Au fil des ans, une boutique accumule des types d'image provenant d'anciens thèmes, de modules qui ne sont plus là ou de tests. Chaque taille en trop signifie :

• Un fichier de plus pour chaque photo de produit, qui occupe de l'espace disque et des sauvegardes.
• Plus de temps à l'envoi d'une image et lors de la régénération.

Vérifiez quelles tailles votre thème utilise réellement (ses templates et son fichier de configuration les nomment) et lesquelles vos modules utilisent. Celles que personne n'utilise peuvent être supprimées, mais vérifiez d'abord sur une copie : un module qui demande une taille qui n'existe plus affiche des images cassées.

Et inversement : si le thème affiche les miniatures de la liste dans une taille supérieure à la taille générée, par exemple après une refonte, les photos paraissent floues. Ajustez la taille à l'espace réel, en tenant compte des écrans haute densité.

Quand faut-il régénérer les miniatures

Les miniatures existantes ne changent pas d'elles-mêmes lorsque vous modifiez une taille. Il faut les régénérer, depuis le même écran des paramètres des images. C'est nécessaire quand :

• Vous modifiez les dimensions d'une taille.
• Vous ajoutez une nouvelle taille (par exemple en changeant de thème).
• Vous changez le format de sortie ou la qualité de compression.
• Vous restaurez des images depuis une sauvegarde et des miniatures manquent.

La photo originale compte aussi

Même si le client ne télécharge pas l'original, celui-ci a un impact :

• Sur le disque et les sauvegardes. Des photos de plusieurs mégaoctets multipliées par des milliers de produits, ce sont des gigaoctets copiés chaque nuit.
• Sur le temps de génération. Redimensionner une image énorme consomme de la mémoire et du CPU ; avec des photos très grandes, le processus peut échouer faute de mémoire.
• Sur le zoom de certaines fiches, qui servent bien l'image en grand format.

Une bonne pratique consiste à envoyer des photos déjà réduites à une taille raisonnable pour l'usage le plus grand qu'en fait la boutique (le zoom de la fiche), plutôt que directement depuis l'appareil photo.

Formats

• JPEG pour les photographies. Avec une qualité bien choisie, le gain par rapport à la qualité maximale est important et la différence se voit à peine.
• PNG uniquement si vous avez besoin de transparence ou s'il s'agit d'un graphique en aplats de couleur. Pour des photos de produit, il pèse beaucoup plus qu'un JPEG.
• WebP et d'autres formats modernes offrent un poids moindre à qualité égale, et les versions récentes de PrestaShop peuvent les générer. Vérifiez que votre thème et vos modules les prennent en charge avant de les activer.

Changer de format est une autre raison de régénérer, avec les mêmes précautions que ci-dessus.

Chargement différé

Dans une longue catégorie, le client voit d'abord quelques images. Les autres sont plus bas et il ne les verra peut-être jamais. Le chargement différé (lazy loading) fait que le navigateur ne télécharge les images que lorsqu'elles approchent de l'écran.

• Les navigateurs modernes le font seuls avec l'attribut loading="lazy" sur la balise de l'image. Beaucoup de thèmes l'incluent déjà dans les listes de produits.
• N'appliquez pas le chargement différé à la première image visible : la photo principale de la fiche ou les premières miniatures de la catégorie. Les retarder allonge le temps d'affichage de l'élément le plus important de la page.
• Indiquez la largeur et la hauteur des images (ou réservez l'espace en CSS), pour que la page ne saute pas quand elles finissent de charger.

Une vérification rapide

1. Ouvrez une catégorie et une fiche avec les outils de développement du navigateur et regardez combien pèsent les images par rapport au reste de la page.
2. Comparez la taille en pixels des miniatures téléchargées avec celle qu'elles occupent à l'écran.
3. Passez en revue la liste des types d'image et supprimez ceux que personne n'utilise (d'abord sur une copie).
4. Vérifiez que les images hors écran sont en chargement différé et que l'image principale ne l'est pas.
5. Si vous modifiez quelque chose, régénérez en dehors des heures de pointe et vérifiez qu'il ne reste pas d'images cassées.

Comment le résoudre dans PrestaShop

Les images ne sont qu'une partie ; le reste du poids de la page se trouve généralement dans le CSS et le JavaScript. RKR OptiMatters dresse l'inventaire des CSS et JS chargés par chaque type de page, avec leur poids et le module dont ils proviennent, et vous permet de retirer ceux qui sont superflus, d'appliquer defer ou async, de retarder les scripts tiers jusqu'à la première interaction et de servir les Google Fonts depuis votre serveur ; il dispose d'un mode test pour comparer la page avec et sans optimisation. All In One Cache inclut, dans son cache de page, un allègement optionnel avec minification du HTML, du JS et du CSS en ligne et chargement différé des images, en plus du cache de page complète, du cache des requêtes dans Redis et de la gestion d'OPcache.