Vous êtes ici :
Dynamic Imaging Service
Avec B2C Commerce Dynamic Imaging Service, il n’est plus nécessaire de télécharger des images de différentes tailles pour répondre aux besoins de votre boutique. Une fois que vous avez téléchargé une image source haute résolution, Dynamic Imaging formate la taille appropriée pour chaque application d’image : votre page produit, votre page de catalogue, vos produits recommandés, vos résultats de recherche, etc. Appliquez des paramètres pour contrôler la taille de l’image, le recadrage, la superposition, le format, la couleur d’arrière-plan et les paramètres de qualité.
Quel produit Salesforce Commerce ai-je à ma disposition ?
Par exemple, vous avez une boutique avec un catalogue de produits de 100 000 articles. Votre conception Web prend en charge les images jusqu’à 150 x 150 pixels et affiche quatre images par ligne des résultats de recherche d’un client. Votre concepteur Web crée une mise en page différente, et maintenant une recherche de produit n’affiche que trois images de 250x250 pixels par ligne. Au lieu de télécharger les images redimensionnées, Dynamic Imaging Service redimensionne les images existantes.
Créer des URL de transformation d’image
Les classes URLUtils et MediaFile génèrent dynamiquement plusieurs ressources d’image à partir d’une seule image haute résolution. Une URL de transformation d’image identifie la ressource pouvant être mise en cache et spécifie comment la transformer.
Utilisez ces classes, car l’API valide les paramètres de transformation et vous protège contre toute modification future du format d’URL de base. Si vous codez l’URL en dur, elle peut cesser de fonctionner si un schéma change.
Le littéral d’objet JavaScript contient des paramètres de transformation. Chaque méthode renvoie une URL dérivée de vos paramètres de transformation. Si vous ne transmettez pas de paramètres au Dynamic Imaging Service, l’image passe dans sa configuration d’origine.
Exemple : Le paramètre d’URL cy remplace le paramètre de transformation cropY.
La classe URLUtils inclut ces méthodes pour générer des URL de transformation d’image.
public URL imageURL( Chemin de chaîne, Transformation d’objet ) ;
URL publique imageURL( Contexte de chaîne, Identifiant de contexte de chaîne, Chemin d’accès rel, Transformation d’objet ) ;
public URL absImage( Chemin de chaîne, Transformation d’objet ) ;
public URL absImage( Contexte de chaîne, ID de contexte de chaîne, Chemin relChemin de chaîne, Transformation d’objet ) ;
public URL : httpImage( Chemin de chaîne, Transformation d’objet ) ;
public URL : httpImage( Contexte de chaîne, ID de contexte de chaîne, Chemin d’accès rel, Transformation d’objet ) ;
public URL : httpsImage( Chemin de chaîne, Transformation d’objet ) ;
URL publique httpsImage( Contexte de chaîne, Identifiant de contexte de chaîne, Chemin d’accès rel, Transformation d’objet ) ;
La classe MediaFile inclut ces méthodes pour générer des URL de transformation d’image.
URL publique getURL( Transformation d’objet ) ;
URL publique getAbsURL( Transformation d’objet ) ;
public URL getHttpURL( Transformation d’objet ) ;
URL publique getHttpsURL( Transformation d’objet ) ;
Transformations prises en charge
| Type | Paramètres de l’objet Transformation (paramètres d’URL entre parenthèses) | Description |
|---|---|---|
| Échelle |
scaleWidth (sw), scaleHeight (sh), scaleMode (sm)
|
Les paramètres Utilisez Le paramètre par défaut de scaleMode est Si vous définissez |
| Superposition |
imageX (ox), imageY (oy), imageURI (oimg)
|
Les paramètres Les formats pris en charge sont GIF, PNG, JPG, JP2. Étant donné qu’un GIF animé peut provoquer des artefacts d’image, conservez les proportions d’un GIF animé. Définissez le paramètre Le chemin d’accès doit prendre en charge les paramètres de chaîne de requête qui prennent en charge le service. Utilisez une image transformée pour l’image superposée. Si l’image superposée s’étend au-delà des limites de l’image principale, l’imagerie dynamique recadre l’image superposée pour qu’elle corresponde aux dimensions de l’image principale. La valeur de superposition ( |
| Court |
cropX (cx), cropY (cy), cropWidth (cw), cropHeight (ch)
|
Les paramètres Les valeurs de La valeur de |
| Format |
Format (
|
Le paramètre de transformation de format spécifie le format cible de l’image. Les formats cibles pris en charge sont AVIF, gif, jp2, jpg, jpeg, jxr, png et WebP. Le chemin d’accès de l’URL générée utilise l’extension de fichier du format cible. Si vous ne spécifiez pas de format cible, la conversion n’est pas effectuée. Le paramètre Indiquez le format de la source dans le paramètre |
| Qualité |
Qualité (Q)
|
Le paramètre de qualité spécifie un paramètre de qualité pour les images JPG et JP2 et le niveau de compression pour les images PNG. Pour les images JPG et JP2, définissez des valeurs de 1 à 100 pour obtenir la meilleure qualité. La valeur par défaut est 80. Omettez cette valeur pour conserver la valeur par défaut. Pour les images PNG, le paramètre de qualité n’a aucun effet sur l’apparence du PNG car la compression est toujours sans perte. Utilisez plutôt le paramètre de qualité pour définir le niveau de compression zlib et le type de filtre sous la forme d’un nombre à deux chiffres. Le premier chiffre définit le niveau de compression zlib (1-9). Le deuxième chiffre définit le type de filtre. Si le paramètre PNG n’est pas fourni ou s’il est défini sur 0, la valeur par défaut est 75. Si ce paramètre est défini sur 100 (un nombre à trois chiffres), il est en fait égal au paramètre de qualité 90. |
| Métadonnées |
Bande
|
Le paramètre de dénudage indique s’il faut supprimer les métadonnées, telles que les profils EXIF et colorimétriques, de l’image pendant la transformation. Les valeurs valides sont |
| Fond |
Bgcolor
|
Le paramètre Par exemple, FF0000 = Rouge ; FF000077 = Rouge avec 50 % de transparence. Si la valeur alpha est omise, la couleur résultante est opaque. Le passage explicite de 00 comme valeur alpha permet d’obtenir le même résultat. Les valeurs alpha ne sont valides que lorsque le format de sortie de l’image est PNG. |
Exemples d’appels
Cet appel à URLUtils.imageURL( Chemin de chaîne, Transformation d’objet ):
URLUtils.imageURL( '/<chemin d’image> statique/image.png', { scaleWidth : 100, format : 'jpg' } ) ;Renvoie l’URL de transformation de l’image.
http://<image server host name>/dw/image/v2/.../on/demandware.static/.../<static image path>/image.jpg?sw=100&sfrm=pngCet appel à MediaFile.getAbsImageURL( Transformation d’objet ):
product.image.getAbsImageURL( { scaleWidth : 100 } ) ;Renvoie l’URL de transformation de l’image.
http://<image server host name>/dw/image/v2/.../on/demandware.static/.../<path to product image>/FG45SDAF.jpg?sw=100Directives relatives aux images
- Taille du fichier : Les images de plus de 6 Mo ne sont pas transformées et sont diffusées dans leur configuration d’origine. La première requête d’une image surdimensionnée renvoie une erreur, mais les requêtes suivantes renvoient les images dans leur configuration d’origine.
- Dimensions : La taille maximale transformable est de 3 000 x 3 000 pixels.
- Temporisation : Si une transformation ne se termine pas dans les 29 secondes, le service renvoie l’erreur 408. Évitez les transformations coûteuses telles que l’augmentation de la taille des GIF animés.
- Blocage du navigateur : Dans les environnements hors production, la protection contre le pistage de Firefox bloque les premières transformations dans certaines circonstances. Pour éviter ce blocage, réglez la protection contre le pistage sur Jamais pendant le test.
Mise en cache dynamique de l’imagerie
Le Dynamic Imaging Service utilise la mise en cache pour envoyer des images aux navigateurs et aux applications.
- Instances de réseau de diffusion de contenu (CDN) : Les images sont mises en cache jusqu’à ce qu’une invalidation du cache soit demandée. Les nouveaux éléments d’image se voient attribuer un identifiant de cache unique et ne nécessitent pas d’invalidation explicite du cache.
- Instances non-CDN : Le Dynamic Imaging Service revalide les images au bout de 10 minutes.
Voir aussi :
Pour obtenir de l’aide sur les URL de transformation d’image, les formats modernes, le projet de communauté et le dépannage, consultez Rubriques connexes de Dynamic Imaging Service .
