Images PrestaShop : formats, légendes, chargement différé et réparation

Ce que nous ferions

Nous mesurerions une page lente avant de choisir un convertisseur ou de modifier tous les types d'images. L'approche dépend de votre version de PrestaShop, de la compilation de PHP, du thème, des modules d'images et de cache existants, du CDN, des originaux du catalogue et des intégrations d'import. Vérifiez quelles langues et quels marchés nécessitent des descriptions, et qui les maintiendra lorsque les produits changeront.

Pour modifier la génération ou les modèles, utilisez une copie de préproduction avec ses propres fichiers d'images et des intégrations isolées de la production. Répétez le changement sur des produits représentatifs, y compris le zoom, les déclinaisons et les mises en page mobiles. Gardez les anciens modèles, réglages et fichiers générés disponibles, puis planifiez la bascule en production avec une personne chargée de vérifier le résultat et un retour arrière testé. Une copie partageant le stockage d'images de la production ne permet pas de tester sans risque une suppression ou une régénération.

Si vous souhaitez nous confier le diagnostic du goulot d'étranglement, le service PrestaShop Speed & Core Web Vitals Audit fournit un plan de corrections mesuré et hiérarchisé, dont la mise en œuvre fait l'objet d'un périmètre distinct.

Choisir la première correction selon les constats

Auditer les types d'images et les téléchargements réels

Ouvrez Apparence > Images. Les anciennes installations PrestaShop 1.6 utilisent Préférences > Images. Les types d'images définissent les dimensions générées utilisées par les thèmes et les modules ; leurs noms ne garantissent pas des dimensions identiques d'une boutique à l'autre.

Examinez une page d'accueil, une catégorie bien remplie et une galerie produit dans le navigateur. Identifiez les téléchargements les plus lourds, la taille réellement affichée, les dimensions intrinsèques, la source sélectionnée et l'image LCP probable. Les images peuvent représenter l'essentiel d'une page, mais ne présumez pas d'une part fixe du poids transféré.

Une image de 1200 px de large dans un emplacement CSS de 300 px a une largeur quatre fois supérieure, pas nécessairement quatre fois plus d'octets. À proportions identiques, sa surface en pixels est seize fois plus grande. Le rapport entre pixels physiques et pixels CSS de l'appareil compte aussi : un emplacement de 300 pixels CSS sur un écran 2x peut utiliser environ 600 pixels source. Comparez la taille des fichiers encodés et leur qualité visible.

• Conservez des originaux suffisamment grands pour le plus grand affichage prévu en galerie ou en zoom, sans mégapixels inutiles.
• Comparez les types de panier, de liste, de galerie, de catégorie et de bannière à leurs emplacements réels.
• Générez un type réellement plus grand lorsque le zoom ou les écrans haute densité l'exigent.
• Conservez une sauvegarde des originaux avant une régénération ou un redimensionnement destructifs.

Compressez et examinez visuellement les photographies et les illustrations transparentes séparément. Des outils tels que Squoosh peuvent vous aider à comparer les résultats, mais aucune valeur de qualité fixe ne convient à toutes les images. Ne recompressez pas plusieurs fois le seul original.

Examiner une liste mobile aux images surdimensionnées

Supposons qu'une fiche de portefeuille occupe 300 pixels CSS sur un écran 2x, mais que les outils Réseau montrent une source de 1200 px. Comparez une véritable copie de 600 px au fichier actuel avec le même recadrage. Si cette copie convient visuellement, ajoutez-la comme source candidate et vérifiez la source sélectionnée après une nouvelle navigation. Si le navigateur choisit encore le plus gros fichier, comparez sizes à la disposition réelle de la fiche avant de réduire la qualité de compression. Vérifiez séparément l'affichage sur ordinateur et le zoom pour qu'une correction de liste ne réduise pas les détails de la galerie.

Vérifier la prise en charge des formats et leur diffusion

PrestaShop 1.7.8 ne fournit pas le processus natif actuel de génération WebP/AVIF. PrestaShop 8.0 a ajouté la génération WebP. PrestaShop 8.1 a introduit AVIF et la génération multiformat comme fonctionnalités expérimentales ; AVIF n'a pas été introduit pour la première fois dans PrestaShop 9. Consultez l'annonce de la version 8.1.

Sur les versions compatibles, vérifiez les formats et la qualité de génération dans Images. L'encodage natif dans PrestaShop 9.1 via ImageManager appelle les fonctions GD imagewebp() et imageavif(). La prise en charge d'Imagick seule ne satisfait pas ce chemin d'exécution. Vérifiez l'environnement PHP qui effectue réellement la régénération :

php -r '$gd = extension_loaded("gd") ? gd_info() : [];
var_export([
  "gd" => extension_loaded("gd"),
  "webp" => function_exists("imagewebp")
    && !empty($gd["WebP Support"]),
  "avif" => function_exists("imageavif")
    && !empty($gd["AVIF Support"])
]); echo PHP_EOL;'

Vérifiez la prise en charge des formats par GD ainsi que les fonctions d'encodage, puis générez et examinez un échantillon réel. La CLI et le web/FPM peuvent utiliser des configurations différentes. Vérifiez les deux lorsque les envois passent par le navigateur et que la régénération passe par la CLI.

1. Activez les formats pris en charge par votre version exacte et votre compilation de GD.
2. Générez un petit échantillon représentatif et examinez la transparence, les couleurs et les détails.
3. Examinez les URL d'image rendues ou les sources picture, les types de contenu des réponses et les fichiers réellement téléchargés.
4. Testez le comportement de repli avec le système de diffusion utilisé.
5. Régénérez les miniatures existantes et purgez les couches de cache HTML et d'images concernées.

Ne supposez pas que tous les processus natifs utilisent une négociation par l'en-tête Accept. Un modèle peut demander un format précis ou utiliser picture ; un serveur ou un module peut négocier une autre réponse. Si les réponses varient selon Accept, configurez correctement les variantes de cache pour qu'un cache partagé ne serve pas la mauvaise représentation.

Performance Revolution inclut la conversion d'images lorsque les exigences de ses encodeurs sont satisfaites ; consultez l'aide de Performance Revolution. Vérifiez les fichiers générés, le comportement du cache, le zoom, les carrousels et la diffusion par le CDN. Des hypothèses .jpg codées en dur peuvent provoquer des fichiers manquants.

Rédiger des légendes et des textes alternatifs exacts

Les légendes des images produit sont stockées par image et par langue dans image_lang.legend. Modifiez-les dans la zone Images du produit. Le présentateur natif peut utiliser le nom du produit ou le méta-titre en repli lorsqu'une légende est absente, et le thème détermine comment cela devient un attribut alt.

Une légende vide ne signifie donc pas automatiquement un texte alternatif vide. Examinez le HTML rendu. Des noms de produits génériques répétés peuvent être améliorés, mais ils sont différents d'attributs manquants.

Décrivez ce que l'image montre réellement et son intérêt dans le contexte. Distinguez les angles de vue lorsque c'est utile, localisez le texte et n'inventez ni matériaux ni caractéristiques. Laissez les textes alternatifs des images décoratives vides lorsque cela convient, au lieu de remplir chaque image d'arguments commerciaux.

Garder des descriptions de catalogue utiles à grande échelle

Utilisez les données du catalogue comme base, puis améliorez les descriptions des images de produits importants lorsque la photo apporte des informations absentes du nom du produit. Un modèle de texte ne peut pas distinguer de manière fiable un portefeuille ouvert de son coffret cadeau si cette information manque dans les données utilisées. Vérifiez un produit avec plusieurs vues, une photo propre à une déclinaison et chaque langue de vente avant d'appliquer une règle générale. Attribuez la responsabilité des images importées et nouvellement ajoutées pour éviter le retour des mêmes lacunes.

Automatic SEO Images Alt Tags génère du texte à l'affichage à partir des données du catalogue ; consultez l'aide d'Automatic SEO Images Alt Tags. Son comportement par défaut, limité aux champs vides, peut laisser intactes les légendes de repli déjà fournies par le cœur. Examinez le résultat réel avant de décider si remplacer une valeur de repli l'améliorerait, et préservez les meilleures descriptions manuelles.

Afficher de véritables fichiers adaptatifs et réserver leur espace

Dans Classic, commencez par catalog/_partials/product-cover-thumbnails.tpl pour la galerie et catalog/_partials/miniatures/product.tpl pour les fiches de liste. Examinez les inclusions et les données du thème actif avant toute modification. Conservez les modifications dans un thème enfant ou une extension prise en charge.

Utilisez des fichiers générés distincts et leurs véritables largeurs intrinsèques dans srcset. Ne déclarez jamais le même grand fichier à la fois comme 600w et 1200w. Cet exemple utilise les dimensions du présentateur sans présumer de la signification des noms des types d'images :

<img
  src="{$product.default_image.bySize.large_default.url|escape:'htmlall':'UTF-8'}"
  srcset="{$product.default_image.bySize.medium_default.url|escape:'htmlall':'UTF-8'} {$product.default_image.bySize.medium_default.width|intval}w,
          {$product.default_image.bySize.large_default.url|escape:'htmlall':'UTF-8'} {$product.default_image.bySize.large_default.width|intval}w"
  sizes="(max-width: 768px) 100vw, 600px"
  width="{$product.default_image.bySize.large_default.width|intval}"
  height="{$product.default_image.bySize.large_default.height|intval}"
  alt="{$product.default_image.legend|escape:'htmlall':'UTF-8'}"
  loading="eager"
  fetchpriority="high">

Cet exemple de galerie utilise product.default_image ; les fiches de liste utilisent normalement product.cover. Utilisez-le uniquement si ces deux types existent, ont des largeurs différentes et correspondent à des recadrages compatibles. Remplacez les valeurs sizes de l'exemple par la disposition réelle de l'emplacement. Pour une source plus grande, ajoutez un type réellement généré avec sa propre URL et sa propre largeur.

La largeur et la hauteur permettent au navigateur de réserver un rapport d'aspect. Le CSS adaptatif peut toujours utiliser max-width: 100% et height: auto. Réserver délibérément un rapport d'aspect est une autre option. Vérifiez les recadrages spécifiques à la mise en page et les conteneurs afin que la forme réservée corresponde à l'affichage.

fetchpriority="high" peut augmenter la priorité relative de récupération d'une image. Cela ne garantit pas son téléchargement avant chaque feuille de style ou script. Réservez-le à l'image probablement critique plutôt que de marquer toute une grille comme prioritaire. Consultez la référence de l'élément image.

Appliquer le chargement différé selon la visibilité

L'attribut natif loading="lazy" d'une image permet au navigateur de différer une ressource hors écran. Le navigateur choisit son seuil de distance. Cela fonctionne avec les images adaptatives et les éléments img insérés dynamiquement lorsque l'attribut et la source sont présents. Une bibliothèque JavaScript peut nécessiter séparément une initialisation pour le contenu inséré.

• Chargez immédiatement le visuel principal initialement visible, le logo et les images produit visibles.
• Différez le chargement des images hors écran des listes, des produits associés et du contenu lorsque cela convient.
• Identifiez la rangée visible selon la véritable fenêtre d'affichage et la mise en page ; aucun nombre fixe ne convient à tous les écrans.
• Préservez les dimensions des images et une URL source utilisable.

L'image LCP doit être découvrable tôt. Différer son chargement peut retarder le contenu visible. Réduire le nombre de téléchargements d'images simultanés ne garantit pas un meilleur INP : le décodage, le rendu et le travail JavaScript doivent aussi être mesurés.

Le chargement différé des images et des iframes a connu des historiques de prise en charge différents selon les navigateurs. Firefox 121 a ajouté le chargement différé des iframes. Vérifiez les tableaux de compatibilité actuels pour les navigateurs de votre public ; consultez les notes de Firefox et la compatibilité du chargement des médias.

Pour les arrière-plans, observez les éléments proches de la fenêtre d'affichage, appliquez une source d'image de confiance lorsque c'est nécessaire, puis cessez d'observer l'élément chargé. Pour les replis vidéo, retardez l'affectation des sources jusqu'au moment nécessaire, appelez la méthode de chargement du média appropriée et conservez les commandes utilisateur. Évitez de différer les médias principaux visibles. Ce sont des choix d'implémentation, pas des raisons d'installer automatiquement un module.

Le HTML enregistré des pages CMS ou descriptions peut inclure manuellement des attributs de chargement si l'éditeur les conserve. Un éditeur, un filtre de contenu ou un module permet aussi de les gérer. Automatic SEO Images Lazy Tags enrichit les données d'images produit et filtre les contenus HTML pris en charge, avec un réglage facultatif decoding="async". Les modèles produit doivent utiliser les clés fournies. Le décodage est distinct du moment du téléchargement ; ce réglage ne remplace donc pas la politique de chargement immédiat ou différé. Il n'identifie pas automatiquement toutes les images principales à exclure. Consultez l'aide d'Automatic SEO Images Lazy Tags. Vérifiez les attributs après rendu et vidage du cache avant d'affirmer que le module a modifié la page.

Vérifiez si le thème, un carrousel ou un autre module d'optimisation modifient déjà le chargement des images avant d'ajouter une règle. Après un filtrage, un changement de page ou de déclinaison, examinez les attributs des nouvelles images rendues et observez les fichiers demandés. Une page initiale correcte ne prouve pas que le contenu de remplacement fonctionne. Vérifiez aussi l'aperçu rapide et l'agrandissement de la galerie : une miniature bien affichée peut masquer une source grand format manquante.

Régénérer les miniatures avec une commande adaptée à la version

Régénérez après avoir modifié les dimensions des types d'images, les formats ou les exigences du thème, ou lorsque des miniatures manquent. Vous avez besoin d'originaux intacts ; la reconstruction ne peut pas récupérer un original qui n'a jamais été copié.

1. Sauvegardez les images originales et les réglages concernés.
2. Confirmez l'espace disque disponible, la prise en charge PHP/GD, la propriété des fichiers et la boutique et le type sélectionnés.
3. Utilisez Apparence > Images > Régénérer des miniatures pour un test contrôlé.
4. Choisissez le domaine d'images et les types requis. Comprenez les options de suppression avant de retirer les anciennes miniatures.
5. Vérifiez les nouveaux fichiers et les URL de la boutique, puis traitez les images restantes.

Planifiez la régénération par navigateur selon le nombre d'images, les dimensions sources, les formats, la mémoire et les délais d'expiration. La CLI évite le délai d'expiration de la requête HTTP mais conserve ses propres limites de mémoire, de permissions et d'exécution.

La commande console de PrestaShop 9.1 nécessite un argument de domaine d'images. Depuis la racine de la boutique :

php bin/console prestashop:thumbnails:regenerate --help
php bin/console prestashop:thumbnails:regenerate products
# For every supported image domain:
php bin/console prestashop:thumbnails:regenerate all

Exécutez-la avec la version PHP prévue et un utilisateur qui crée des fichiers lisibles par le processus web. Planifiez les tâches lourdes lorsque la capacité est disponible et examinez leur code de sortie et leurs erreurs. Ne présentez pas cette commande exacte pour les versions où elle n'existe pas ; vérifiez leurs outils de régénération pris en charge.

Répéter la régénération et la bascule en production

1. Consignez les types d'images actuels, formats, qualités, modifications du thème et règles de cache. Choisissez des exemples avec transparence, détails fins, plusieurs vues et images propres aux déclinaisons.
2. En préproduction, générez les types convenus et suivez chaque échantillon de l'envoi ou de l'import jusqu'à la réponse de la boutique. Vérifiez le circuit d'import autant que l'envoi manuel : leurs traitements peuvent différer.
3. Convenez du traitement des images ajoutées pendant la répétition. Appliquez les réglages et fichiers testés sans remplacer la base de données de production par une ancienne copie de préproduction.
4. Planifiez les changements de génération et de modèles pour que chaque URL demandée par la boutique dispose d'un fichier utilisable ou d'un repli testé. Conservez les anciennes copies jusqu'à validation du changement ; si une exécution s'arrête, examinez ses erreurs et les options de reprise prévues avant de choisir de supprimer et reconstruire.
5. Après la bascule, vérifiez les produits existants et nouvellement ajoutés par le circuit de diffusion public. Consignez les éléments à restaurer si la génération, le zoom ou la diffusion échoue.

Diagnostiquer les images cassées après un changement de serveur

1. Examinez l'URL défaillante, le statut et le type de réponse dans les outils Réseau.
2. Si elle pointe vers l'ancien hôte, vérifiez les réglages d'URL de la boutique dans Trafic et SEO, le domaine SSL et l'URI de base dans le bon contexte de boutique.
3. Si l'hôte est correct, vérifiez que l'original et la miniature demandée existent dans l'arborescence d'images attendue.
4. Vérifiez les règles de réécriture du serveur web et la lisibilité des fichiers avant de tout régénérer.
5. Vérifiez les droits d'écriture de l'utilisateur d'exécution pour la régénération. Un contrôle de permissions avec votre utilisateur shell n'est pas un contrôle avec l'utilisateur web.
6. Redirigez les origines du CDN et du proxy inverse vers la bonne cible, et purgez les caches concernés. Résolvez les incohérences HTTP/HTTPS.
7. Régénérez uniquement les miniatures manquantes ou incompatibles une fois les originaux et la configuration corrects.

image_url='https://example.com/1-home_default/product.jpg'
curl -sI "$image_url"
find img/p -type f -name '*.jpg' -print | head

Cette URL est illustrative ; utilisez-en une copiée depuis la page défaillante. Une réponse 200 contenant du HTML n'est pas une image valide. Ne rendez pas toute la boutique accessible en écriture de manière récursive pour résoudre un problème de propriétaire sur un seul répertoire.

Vérifier la découverte des images et mesurer le résultat

Vérifiez que l'image et sa page d'arrivée peuvent être découvertes et récupérées, que les règles robots ne bloquent pas les ressources requises et que la page est admissible à l'indexation. Utilisez un texte environnant utile, un texte alternatif pertinent et une qualité d'image suffisante.

Un sitemap d'images peut faciliter la découverte mais ne garantit pas l'indexation. Incluez des emplacements d'image valides avec l'espace de noms image. Cet exemple montre la structure ; remplacez les deux URL par des ressources réelles accessibles :

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/navy-wallet</loc>
    <image:image>
      <image:loc>https://example.com/img/p/1/1-large_default.webp</image:loc>
    </image:image>
  </url>
</urlset>

Ne vous appuyez pas sur les champs obsolètes de titre ou de légende d'image des sitemaps. Suivez les consignes de Google pour les images. Advanced SEO Sitemap Builder peut générer les entrées d'images du catalogue ; consultez l'aide d'Advanced SEO Sitemap Builder.

Testez une page d'accueil, une catégorie bien remplie et une fiche produit sur mobile et ordinateur avec PageSpeed Insights. Utilisez les outils du navigateur pour des chargements contrôlés avec cache vide puis alimenté, la découverte des images visibles, le téléchargement sous la ligne de flottaison, le défilement, le zoom et la sélection de sources adaptatives. Suivez les tendances de terrain dans le rapport Core Web Vitals de Search Console. Les versions actuelles de Lighthouse regroupent les diagnostics de diffusion d'images et de LCP dans des insights ; les anciens intitulés d'audit peuvent différer de votre interface.

Conserver des mesures avant/après comparables

Répétez dans les mêmes conditions au lieu de retenir la meilleure exécution. Si le poids baisse sans amélioration du LCP, examinez la réponse serveur, la découverte des ressources et le rendu avant de convertir davantage de fichiers. Consultez le guide des performances PrestaShop lorsque les images n'expliquent pas le délai.

Distinguez les diagnostics en laboratoire des mesures de terrain. Core Web Vitals utilise une évaluation au 75e percentile, pas une simple moyenne. Les données de terrain de l'API CrUX et de PageSpeed Insights utilisent une fenêtre glissante de 28 jours ; un déploiement ne remplace donc pas immédiatement toutes les observations historiques. Examinez les segments d'appareils et les pages comparables, puis mesurez les véritables changements de LCP, CLS et INP. Consultez les recommandations Web Vitals.

Questions à poser à votre développeur ou agence

• Quels modèles, types d'images et modules contrôlent la galerie, les listes et les images des descriptions dans cette boutique ?
• Quelle version exacte et quels environnements PHP ont été vérifiés, et pouvez-vous montrer l'échantillon généré à côté de sa réponse publique ?
• Quel composant gère la conversion, les attributs de chargement et l'invalidation du cache, et que se passe-t-il après un changement de filtre ou de déclinaison ?
• Où sont sauvegardés les originaux et les anciens réglages, et comment les images ajoutées pendant les travaux rejoindront-elles la configuration finale ?
• Pouvez-vous montrer des mesures comparables, des contrôles visuels et les étapes répétées de bascule et de restauration ?

Questions des responsables de boutique

Faut-il mettre toute la boutique à niveau pour diffuser du WebP ?

Consultez la section sur les formats pour votre version. Une boutique plus ancienne peut utiliser une conversion compatible ou un traitement serveur ; la pertinence de ce choix dépend de son état de maintenance et de sa configuration de diffusion. Répétez l'approche choisie avant de vous engager dans un changement plus large.

Faut-il un module distinct pour chaque tâche liée aux images ?

Vérifiez ce que le thème et les modules installés couvrent déjà. Légendes, politique de chargement, conversion et découverte par sitemap répondent à des problèmes différents ; ajoutez un outil uniquement pour une lacune démontrée.

Pourquoi un nouvel envoi fonctionne-t-il alors que les anciennes photos échouent ?

Comparez les types et formats demandés pour chacun. Avec de nouveaux réglages de génération, certains fichiers dérivés des anciennes images peuvent manquer, mais un original absent ou une migration incomplète doit être réparé avant que la régénération puisse aider.

Puis-je supprimer les originaux une fois les petites copies créées ?

Conservez des originaux récupérables. Un autre thème, recadrage ou besoin de zoom peut les nécessiter, et une miniature compressée ne peut pas restituer les détails d'origine.

Un meilleur texte alternatif accélère-t-il la page ou garantit-il du trafic image ?

Le texte alternatif apporte du contexte ; il ne réduit pas le téléchargement de l'image. Mesurez séparément la diffusion et évaluez la découverte avec les vérifications ci-dessus, sans promettre d'indexation ni de trafic.