Configuration de l’image du produit

Si vous envisagez de charger des images volumineuses pour les afficher sur la page Product Details, vous pouvez envisager de définir une taille maximale en pixels (largeur et hauteur) et de redimensionner automatiquement les fichiers lors du chargement. Pour prendre en charge ce type de chargement d’images de produit, vous avez la possibilité d’activer le redimensionnement automatique des fichiers image plus volumineux au fur et à mesure du chargement. Pour les produits que vous souhaitez ajouter à votre catalogue, mais pour lesquels vous ne disposez pas encore d’une ressource d’image à afficher, vous pouvez configurer une image d’espace réservé.

Redimensionnement de l’image du produit

Lors du chargement des images du produit, vous pouvez ajouter des images plus grandes et de tailles variables afin de fournir des zooms détaillés et de haute qualité sur la page Product Details. Pour vous assurer que toutes les images ont une taille et un aspect similaires, il existe une option de redimensionnement de l’image permettant de s’assurer que toutes les images correspondent à une taille en pixels spécifique. Cette option redimensionne automatiquement toutes les images du produit à l’aide des paramètres de configuration, ce qui peut contribuer aux performances du zoom, à un chargement plus rapide des images et à un aspect uniforme des images de votre produit.

NOTE
Pour une meilleure compatibilité, il est recommandé de charger toutes les images du produit avec le profil colorimétrique sRGB. Tous les autres profils de couleurs sont automatiquement convertis en profil de couleurs sRGB lors du chargement de l’image du produit, ce qui peut entraîner une incohérence des couleurs dans l’image chargée.

La définition d’une largeur et d’une hauteur maximales en pixels redimensionne l’image aux dimensions physiques par pixel. Commerce redimensionne l’image en fonction de la valeur la plus élevée (largeur ou hauteur) tout en conservant les proportions. La réduction de la quantité de qualité des images JPG réduit la taille du fichier.

Par exemple, un JPG de 3 000 x 2 100 pixels à 100 % peut être un fichier image de 5 Mo ou plus. Le redimensionnement de cette image réduirait la largeur à 1 920 pixels, en conservant les proportions et la qualité à 80 % afin de fournir une taille de fichier beaucoup plus petite avec une qualité élevée.

Activer le redimensionnement de l’image

  1. Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, développez Advanced et choisissez System.

  3. Développez Sélecteur d’extension la section Configuration du chargement d’images.

    Pour modifier les paramètres par défaut, désélectionnez la case Use system value si nécessaire.

    Configuration du chargement d’images {width="600" modal="regular"}

    Pour obtenir la liste détaillée de ces paramètres de configuration, voir Configuration du téléchargement d’images dans le Guide de référence de configuration.

  4. Pour l’activer, assurez-vous que Enable Frontend Resize est défini sur Yes.

  5. Saisissez un paramètre de Quality compris entre 1 et 100 %.

    Un paramètre compris entre 80 et 90 % est recommandé pour une taille de fichier réduite et une qualité élevée.

  6. Définissez la Maximum Width en pixels pour l’image.

    Lorsque l’image est redimensionnée, elle ne dépasse pas cette largeur et conserve les proportions.

  7. Définissez la Maximum Height en pixels pour l’image.

    Lorsque l’image est redimensionnée, elle ne dépasse pas cette hauteur et conserve les proportions.

  8. Cliquez ensuite sur Save Config.

Descriptions des champs

Champ
Portée
Description
Quality
Global
Détermine la qualité JPG de l’image redimensionnée. Une qualité inférieure réduit la taille du fichier. 80 à 90 % est recommandé pour réduire la taille du fichier avec une qualité élevée. Valeur par défaut : 80
Enable Frontend Resize
Global
Permet à Commerce de redimensionner les images volumineuses et surdimensionnées que vous pouvez charger pour la page Product Details. Commerce redimensionne les fichiers image à l’aide de JavaScript lors du chargement du fichier. Lorsque l’image est redimensionnée, elle conserve les proportions exactes afin de respecter et de ne pas dépasser la plus grande taille pour la Largeur maximale ou la Hauteur maximale. Valeur par défaut : Yes
Maximum Width
Global
Détermine la largeur maximale en pixels de l’image. Lorsque l’image est redimensionnée, elle ne dépasse pas cette largeur. Valeur par défaut : 1920
Maximum Height
Global
Détermine la hauteur maximale en pixels de l’image. Lorsque l’image est redimensionnée, elle ne dépasse pas cette hauteur. Valeur par défaut : 1200

Espaces réservés d’image

Adobe Commerce et Magento Open Source utilisent des images temporaires comme espaces réservés jusqu’à ce que les images de produit permanentes soient disponibles. Un espace réservé différent peut être chargé pour chaque rôle. L’image d’espace réservé initiale est un exemple de logo, que vous pouvez remplacer par l’image de votre choix.

Espace réservé pour image {width="600" modal="regular"}

Pour charger des images d’espace réservé:

  1. Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, développez Catalog et choisissez Catalog en dessous.

  3. Développez icône de développement dans la section Product Image Placeholders .

    Espaces réservés d’image de produit {width="600" modal="regular"}

    Pour obtenir la liste détaillée de ces paramètres de configuration, voir espaces réservés d’image de produit dans le Guide de référence de configuration.

  4. Pour chaque rôle d’image, cliquez sur Choose File, recherchez l’image sur votre ordinateur et chargez le fichier.

    Vous pouvez utiliser la même image pour les trois rôles, ou vous pouvez charger une image d’espace réservé différente pour chaque rôle.

  5. Cliquez ensuite sur Save.

Pour plus d’informations sur les rôles d’image et les tailles recommandées, voir Charger une image.

recommendation-more-help
commerce-admin-help-catalog