> ## Documentation Index > Fetch the complete documentation index at: https://docs.reelevant.com/llms.txt > Use this file to discover all available pages before exploring further. # Composant Composition d'images > Combinez plusieurs images produits en un seul visuel, avec détourage automatique Le composant Composition d'images construit un visuel unique à partir de plusieurs images, disposées automatiquement et personnalisées par destinataire. **Bêta** — La Composition d'images est en bêta et réservée aux administrateurs techniques. Ses options peuvent encore évoluer. Contactez votre Technical Account Manager si vous ne la voyez pas dans la barre d'outils. Éditeur de Content avec une Composition d'images de trois flacons détourés disposés en arc et son panneau de configuration ## Vue d'ensemble Un [composant Image](/fr/product-guide/contents/components/image) classique affiche une seule image. La Composition d'images prend une liste d'images et les assemble pour vous en un seul visuel. Chaque image peut venir d'un import, d'une URL ou d'une variable de [Datasource](/fr/product-guide/contents/data-binding). La composition change donc par destinataire, par exemple les trois produits qu'il a consultés. | Propriété | Valeur | | ------------------------------- | ------------------------------------------- | | **Bouton de la barre d'outils** | Composition d'images | | **Data binding** | Oui — chaque image, une par une | | **Conditions** | Oui | | **Disponibilité** | Bêta, administrateurs techniques uniquement | Utilisez-la pour des visuels de cross-sell, des rappels de panier abandonné ou une bannière « votre sélection ». Vous choisissez le nombre d'images du visuel, chacune suivant sa propre variable de Datasource. ## Ajouter des images Panneau de configuration avec l'image 1 dépliée : sa source, Détourer l'image, Poids visuel et Transformations Dans l'[Éditeur de Content](/fr/product-guide/contents/editor), choisissez **Composition d'images** dans la barre d'outils, puis tracez-la sur le canvas. Dans la section **Images** du panneau de configuration, cliquez sur **Ajouter une image** pour chaque image du visuel. Ouvrez une image et définissez sa source : importez un fichier, collez une URL ou choisissez une variable de Datasource contenant une adresse d'image. Utilisez **Placer l'image derrière** et **Placer l'image devant** pour décider quelle image recouvre l'autre. Supprimer une image de la liste supprime aussi ses réglages, y compris ses transformations. Il n'y a pas de retour arrière dans le panneau. ## Détourer l'image **Détourer l'image** rend le fond transparent avant la composition. C'est l'option qui transforme de simples packshots catalogue en produits posés naturellement côte à côte. La plateforme le fait pour vous, conserve le résultat et le réutilise la prochaine fois que la même image est composée. Packaging, étiquettes, marques et couleurs sont préservés — seul le fond disparaît. Le détourage donne les meilleurs résultats sur des packshots catalogue sur fond uni. Les photos d'ambiance au fond chargé sont moins prévisibles. ## Transformer chaque image Chaque image a ses propres **Transformations** et **Ajustements**, pour faire ressortir un petit produit à côté d'un grand. | Option | Effet | | ---------------- | -------------------------------------------------------------- | | **Rogner** | Rogne les marges transparentes autour de l'image. | | **Ajustement** | Contenir, Remplir ou Étirer l'image dans son espace. | | **Échelle** | Agrandit ou réduit l'image. | | **Rotation** | Fait tourner l'image. | | **Opacité** | Rend l'image plus ou moins transparente. | | **Miroir** | Inverse l'image horizontalement, verticalement ou les deux. | | **Ombre** | Projette une ombre suivant la forme de l'image. | | **Poids visuel** | Définit la taille relative de cette image dans la composition. | Les ajustements couvrent **Luminosité**, **Contraste**, **Saturation**, **Niveaux de gris**, **Flou** et **Teinte**, pour harmoniser des images venant de catalogues différents. ## Choisir une disposition Panneau de configuration avec la liste de trois images, les options de la disposition Arc, Fond et Équilibrer les tailles La disposition décide de la place des images dans le composant. | Disposition | Idéale pour | Options | | ----------- | --------------------------------------------------- | ----------------------------------- | | **Arc** | Un groupe de produits naturel, légèrement superposé | Chevauchement, Courbure, Alignement | | **Ligne** | Une simple ligne de produits | Espacement, Alignement | | **Grille** | Plusieurs produits en rangées régulières | Colonnes, Espacement | | **Libre** | Un contrôle total de chaque position | Position et taille par image | Deux interrupteurs terminent la composition : * **Fond** ajoute une couleur derrière les images, utile une fois les fonds détourés. * **Équilibrer les tailles** met les images à l'échelle pour un poids visuel équivalent, afin qu'un petit flacon ne soit pas écrasé par une grande boîte. ## Prévisualiser le résultat La composition est construite pour vous et affichée directement sur le canvas : vous voyez le visuel final pendant que vous travaillez. Changer une disposition, une couleur ou une transformation rafraîchit l'aperçu. Le canvas affiche la composition réelle, détourages compris : ce que vous voyez est ce que recevront vos destinataires. ## Et ensuite ? Ajoutez une image unique, statique ou liée aux données. Alimentez chaque image depuis une variable de Datasource. N'affichez la composition qu'à la bonne audience. Découvrez les autres types de composants.