Images et médias

Rubriques et formats

• Le dossier « Images » contient les images sources et d’autres éléments graphiques tels que des logos et des icônes. Dans les dossiers d’images sous « images-sources », le gestionnaire de fichiers accepte les formats JPG, PNG, GIF et WebP ; dans le dossier principal « Images », il accepte en outre les formats SVG et ICO.
• La rubrique « Fichiers » accepte également les PDF, les documents Office, les MP4 et de nombreux autres formats. Les vidéos de produits doivent être placées dans le sous-dossier « vidéos ».
• « Téléchargements » contient les fichiers des articles téléchargeables.
• Le gestionnaire de fichiers n’accepte pas les photos au format HEIC provenant d’un smartphone, ni les fichiers AVIF et TIFF dans les dossiers d’images. Convertissez-les au préalable au format JPG ou WebP.

Limite de téléchargement et fichiers volumineux

La limite pour un fichier est définie par les paramètres PHP du serveur. C’est la plus petite des deux valeurs qui s’applique pour le téléchargement de fichiers et les données de formulaire. La fonction « Télécharger » ouvre directement la sélection de fichiers de votre ordinateur ; le gestionnaire de fichiers n’affiche pas cette limite. Le service d’assistance vous indiquera quelle est cette limite dans votre boutique.

Pour un fichier PDF très volumineux, trois solutions s’offrent à vous : réduire la taille du fichier (la plupart des logiciels de gestion de PDF permettent d’enregistrer des documents pour le Web), le télécharger via SFTP dans le dossier files ou demander au service d’assistance d’augmenter la limite.

Fichier portant le même nom

Si un fichier portant le même nom existe déjà dans le dossier, le gestionnaire de fichiers vous demande votre choix. « Remplacer » remplace le fichier existant, « Renommer » enregistre le nouveau fichier sous un autre nom. Pour savoir quoi faire après avoir remplacé l’image, consultez la section Remplacer l’image.

Modifier l’image

Le crayon situé à côté d’une image de produit ou d’une image d’attribut (« Modifier l’image source ») ouvre l’éditeur d’images du gestionnaire de fichiers avec les options « Recadrer », « Redimensionner » et « Retourner/Pivoter ». Il prend en charge les formats JPG, PNG et GIF, mais pas les fichiers WebP. Enregistrez ensuite l’article afin que la boutique génère à nouveau les images d’aperçu.

Ce que la boutique modifie automatiquement

• Téléchargement via le gestionnaire de fichiers : le « ü » devient « u », le « ß » devient « sz ». Les espaces et tous les autres caractères, à l’exception des lettres, des chiffres, du tiret et du trait de soulignement, sont remplacés par « _ ».
• Enregistrement d’un article, d’une catégorie ou d’un fabricant : la boutique renomme l’image source (ä → ae, ö → oe, ü → ue, ß → ss, espaces et virgules → « _ ») et saisit le nouveau nom. Les autres caractères spéciaux tels que « é » ou « & » sont conservés.
• Importation avec l’URL de l’image : le Porter écrit le nom en minuscules et remplace les trémas.

Pourquoi les trémas posent-ils quand même problème ?

Les fichiers transférés via FTP ou importés dans un dossier conservent leur nom. Lorsque vous enregistrez ensuite un article, la boutique renomme le fichier. Si une importation ultérieure ou un autre article réintroduit l’ancien nom comportant des trémas, la boutique ne retrouve plus le fichier. Le guide d’utilisation du Porter recommande donc expressément d’utiliser des noms sans trémas ni espaces.

De plus, la distinction entre majuscules et minuscules est importante : Tasse.JPG et tasse.jpg sont, pour le serveur, deux fichiers différents.

Avec un nouveau nom de fichier (recommandé)

1. Téléchargez le nouveau fichier sous un nouveau nom, par exemple tasse-blau-v2.jpg.
2. Sélectionnez-le dans l'article dans le champ « Image du produit » et enregistrez.
3. Comme l'adresse de l'image est nouvelle, tous les visiteurs verront immédiatement la nouvelle image. Vous supprimerez l'ancien fichier plus tard ; voir la section « Nettoyage ».

Sous le même nom de fichier

1. Téléchargez le fichier dans le gestionnaire de fichiers dans le même dossier et sélectionnez « Remplacer ». C’est le nom figurant dans le champ « Image » qui fait foi.
2. Pour les images de produit, ouvrez l’article et enregistrez-le. La boutique supprime alors les vignettes de toutes les images de cet article et les génère à nouveau lors de la prochaine consultation.
3. Pour les images de catégorie et de fabricant, ainsi que pour les petites images d'attribut de la sélection, l'enregistrement ne renouvelle pas les vignettes. Sous Paramètres → Design → Images, sélectionnez l'onglet « Supprimer les vignettes ».
4. Rechargez la page dans votre navigateur sans utiliser le cache : sous Windows avec Ctrl + F5, sur Mac avec Cmd + Maj + R.

Régler la taille

• Les paramètres « Largeur de l'image du produit (haute résolution) » et « Hauteur de l'image du produit (haute résolution) » sont réglables. Les tailles plus petites conservent leur largeur et reprennent automatiquement le rapport hauteur/largeur. Pour les images de catégorie, il en va de même pour la version agrandie.
• Les valeurs autorisées vont de 10 à 5 000 pixels. Une fois les modifications enregistrées, la boutique supprime les vignettes concernées et les génère à nouveau lors de la prochaine consultation.
• Ces valeurs déterminent la résolution des vignettes, et non la taille à laquelle une image s'affiche sur la page. C'est la mise en page qui définit l'espace disponible.

Quelle résolution télécharger ?

• Téléchargez des images de produits dont la taille est au moins égale à la taille haute résolution, soit par défaut 1980 × 1980 pixels, et avec le même rapport hauteur/largeur, par défaut carré. La boutique agrandit les images plus petites, ce qui les rend floues.
• La boutique ne réduit pas les images sources téléchargées. Préparez au préalable vos images directement depuis votre appareil photo avec une longueur de côté d’environ 2 000 pixels ; cela vous permettra d’économiser de l’espace de stockage.
• Enregistrez les photos au format JPG ou WebP, et les graphiques à fond transparent au format PNG ou WebP.

Recadrage ou bordure

Si le format d’une image ne correspond pas à la taille définie, deux possibilités s’offrent à vous. Avec la « fonction de recadrage des images », la boutique effectue un zoom avant et recadre légèrement en haut et en bas ou à gauche et à droite. Par défaut, cette option est activée pour les images de produits, de catégories et de diaporamas.

Sans recadrage, la boutique en ligne affiche l’image dans son intégralité et remplit les marges vides avec la « couleur d’arrière-plan des vignettes », réglée par défaut sur #FFFFFF (blanc). Il est préférable de télécharger directement des images au bon format d’image, afin d’éviter toute marge ou tout recadrage.

Bords noirs

Des bords noirs ou un arrière-plan noir apparaissent lorsque la valeur « products » est sélectionnée sous « Vignettes : transparence » et que les vignettes sont générées au format JPG. Le format JPG ne prend pas en charge la transparence ; les zones transparentes deviennent donc noires.

Solution : désélectionnez « products » ; la couleur d’arrière-plan remplira alors ces zones, ou définissez le format de sortie sur « webp » ou « png » (voir WebP). Vérifiez également si « Thumbnails : Couleur d’arrière-plan » est réglé par inadvertance sur « Noir ». Cliquez ensuite sur « Supprimer les vignettes ».

Voici comment cela fonctionne

• Le paramètre s’appelle Paramètres → Apparence → Images → Chargement différé des images et est réglé par défaut sur true.
• Lors du défilement, le chargement commence environ 400 pixels avant qu’une image ne devienne visible, afin qu’elle soit prête à temps.

Désactiver

Si vous réglez « Chargement différé des images » sur « false », le navigateur chargera immédiatement toutes les images d’une page, y compris celles situées tout en bas. Laissez donc ce paramètre activé, sauf si le service d’assistance vous conseille le contraire.

Changement d’image au survol

Si une vignette de la vue galerie affiche une autre image lorsque vous passez la souris dessus, cela signifie que l’option « Affichage d’images alternatives dans la liste des produits » est activée. C’est la deuxième ligne d’images de l’article qui s’affiche. Les articles ne comportant qu’une seule image ne changent pas d’image.

Ce paramètre se trouve dans le groupe Paramètres → Design → Fiche produit. Si vous ne le voyez pas à cet endroit, cela signifie qu’il est réservé à XONIC ; le service d’assistance l’activera pour vous. Si vous activez la bande d’aperçu dans une section, le changement d’image y est automatiquement désactivé.

Bande d’aperçu

L’option « Afficher d’autres images sous forme de bande d’aperçu dans la liste » affiche jusqu’à quatre petites images de l’article sous l’image principale. Un clic permet de changer l’image principale. Si toutes les images ne tiennent pas, la dernière vignette regroupe les autres sous la forme « +N ».

Vous activez la bande par section : liste des catégories, présentation des produits (blocs de produits sur les pages d’accueil, de catégories et de produits) et liste des options (liste des variantes sur la page du produit), respectivement en mode galerie ou liste. Par défaut, elle est désactivée partout.

Bouton « Galerie »

L’option « Bouton Galerie dans l’image de la liste » affiche un bouton en bas à droite de l’image. Il ouvre toutes les images de l’article en grand format pour les parcourir et les agrandir, sans avoir à accéder à la page du produit. Le bouton n’apparaît que pour les articles comportant plus d’une image.

Masquer les images

« Afficher l’image du produit » masque les images dans les listes, « Afficher l’image du produit (produits de la même gamme) » masque les images de la liste des variantes sur la page du produit. Ce qu’affiche une vignette sans image est décrit dans la section « Sans image ».

Deux sources d'images

• Image de la valeur : sous Produits → Caractéristiques du produit, au niveau de la valeur. Elle s'applique à tous les articles présentant cette valeur.
• Image d’option : dans l’article, dans l’onglet « Caractéristiques », au niveau de la valeur, dans le champ « Image d’option ». Elle s’applique uniquement à cet article.
• Les deux fichiers se trouvent dans le dossier des images d'attribut (Images → Images sources → Options). Le champ « Image d’option » effectue sa recherche uniquement à cet emplacement ; il ne trouve pas les images provenant du dossier des images de produit.

Où l'image s'affiche-t-elle ?

C’est le paramètre « Affichage de l’image d’option » de la caractéristique dans l’article qui le détermine : « directement lors de la sélection », « dans la galerie d’images » ou « combiné (les deux) ».

Seule l’« image d’option » de l’article est ajoutée à la galerie. Les boutons de sélection affichent l’image d’option et, si celle-ci est manquante, l’image de la valeur. Si l’affichage est réglé sur « dans la galerie d’images » ou « combiné (les deux) », la galerie affiche l’image correspondante à la sélection d’une valeur.

Plusieurs images par valeur

À droite du champ « Image d’option », se trouve un bouton avec un chiffre (« Images d’option supplémentaires »). Il apparaît dès que l’affichage de l’image d’option n’est pas réglé sur « directement lors de la sélection ». Dans la fenêtre « Images supplémentaires pour… », ajoutez d’autres images à l’aide de « Nouvelle ligne » et fermez en cliquant sur « Enregistrer et fermer ».

Lorsque le client sélectionne la valeur, la galerie affiche l’image principale et les images supplémentaires associées à cette valeur. Un clic sur l’image principale ramène à la galerie complète, la sélection reste inchangée.

Image incorrecte ou absente

• La galerie ne change pas : l’« image d’option » de la valeur est manquante, ou l’affichage des images d’option est réglé sur « directement lors de la sélection ». La galerie peut éventuellement utiliser l’image de la valeur comme image de remplacement si l’option « Image de la valeur de caractéristique comme image de remplacement dans la galerie d’images » est activée sous Paramètres → Design → Fiche produit. N’activez cette option que si les images des valeurs sont des photos de produits et non des échantillons de couleur. 4.10
• Même fichier pour plusieurs valeurs : la galerie n’affiche chaque fichier qu’une seule fois et l’associe à la première valeur. Attribuez un fichier distinct à chaque valeur.
• Caractéristiques liées telles que la couleur et la taille : l’image est associée à la combinaison. L’affichage dynamique des images est disponible à partir de la version 4.10 ; avant cette version, seul l’affichage legacy est disponible.ab 4.10

Les champs

• « Vidéo du produit » : un fichier MP4 issu du gestionnaire de fichiers (Fichiers → vidéos) ou un lien vers YouTube ou Vimeo. La boutique reconnaît également les vidéos provenant de TikTok et Facebook.
• « Aperçu de la vidéo » : une image provenant du dossier des images du produit. La boutique y superpose une icône de lecture. Selon le texte d’aide, cela est obligatoire pour les appareils Apple ; veillez donc à toujours la renseigner.
• « Description » pour chaque langue.

Confidentialité

La boutique ne charge les vidéos provenant de YouTube, Vimeo, TikTok et Facebook qu’après que le visiteur a confirmé la notification relative au contenu externe ; YouTube est intégré via youtube-nocookie.com. Veillez néanmoins à mentionner ces services dans votre déclaration de protection des données. Un fichier MP4 propre à votre boutique est hébergé sur votre site et ne nécessite aucun fournisseur tiers.

Image de catégorie

• Sous Produits → Catégories / Produits, modifiez la catégorie dans le champ « Image de catégorie ». Le fichier se trouve dans Images → Images sources → Catégories.
• L'image apparaît comme image d'en-tête de la page de catégorie, sur les vignettes des sous-catégories et de la page d'accueil, dans le menu et dans le menu de navigation de gauche sur smartphone.
• Dimensions : « Largeur de l’image de catégorie (grande) » et « Hauteur de l’image de catégorie (grande) » sous Paramètres → Design → Images; par défaut 840 × 355 pixels, soit environ 2,4 : 1. Le recadrage est activé par défaut pour les catégories : La boutique recadre les images présentant un rapport de largeur/hauteur différent.
• Recommandation : format JPG ou WebP, au moins 840 × 355 pixels, avec le même rapport hauteur/largeur.

Image du fabricant

• Sous Produits → Fabricant, modifiez les informations du fabricant dans le champ « Image du fabricant ». Le fichier se trouve dans Images → Images sources → Fabricant.
• Le logo apparaît sur la page du fabricant, dans l’encadré du fabricant, dans le diaporama du fabricant et sur la page du produit.
• Dimensions : « Largeur de l’image du fabricant (grande) » et « Hauteur de l’image du fabricant (grande) », par défaut 300 × 150 pixels, soit un rapport de 2 : 1. Par défaut, la boutique en ligne ne recadre pas les images du fabricant ; elle remplit les marges libres avec la couleur d’arrière-plan.
• Recommandation : logo au format PNG ou WebP avec un rapport d’aspect de 2 : 1, d’au moins 300 × 150 pixels. Une deuxième image, telle qu’une bannière de marque, doit figurer dans la description du fabricant ; voir le guide « Créer et gérer des produits ».

Images de produits

• Dans les colonnes d’images figure le nom de fichier relatif au dossier contenant les images des produits. Vous devez au préalable télécharger les fichiers dans le gestionnaire de fichiers ou via SFTP.
• Grâce à l’option d’importation « path=catch », le Porter télécharge les images à partir d’une adresse Internet. Il accepte les fichiers aux extensions JPG, JPEG, PNG, GIF et WebP, voir Import & Export.
• Le Porter par défaut « Mise à jour des images » contient les images des produits accompagnées de leur description.

Images pour de nombreuses catégories

1. Téléchargez les images dans le dossier Images → images-source → catégories.
2. Exportez à l’aide du « Porter » standard « Mise à jour des catégories ». Celui-ci contient la colonne dédiée à l’image de catégorie et est désactivé par défaut ; voir le guide Importation et exportation.
3. Saisissez le nom de fichier pour chaque catégorie, puis réimportez le fichier.
4. L'option « path=catch » ne convient pas ici : elle enregistre toujours les images téléchargées dans le dossier des images de produits.

Bouton par image

Chaque image comporte le bouton « Généré par IA – Afficher la mention » : sur chaque ligne d’image dans l’onglet « Images », sur l’image d’option et les images supplémentaires dans l’onglet « Caractéristiques », sur l’image de la valeur, sur l’image de catégorie, sur l’image du fabricant ainsi que dans les actualités, les diaporamas, les bannières et dans xoContentEditor.

Dans la boutique

Lorsque cette option est activée, l’image porte une discrète mention « Généré par IA ». Il s’agit de texte réel, que les lecteurs d’écran lisent à voix haute. Pour les images de produits, la boutique marque également l’image dans les données structurées destinées aux moteurs de recherche. Vous définissez la position et l’affichage (clair ou foncé) dans Paramètres → Design → Marquage IA.

Quand est-ce obligatoire ?

Conformément à l’article 50 du règlement sur l’IA (UE) 2024/1689, applicable à compter du 2 août 2026, les deepfakes doivent être signalés : il s’agit d’images artificielles qui ressemblent à des personnes, des objets ou des lieux réels et qui pourraient paraître authentiques. C’est à vous de décider si une image relève de cette catégorie. En cas de doute, consultez votre conseiller juridique.

« Supprimer les vignettes » : sans risque

Supprime toutes les vignettes. La boutique les recrée lors du prochain chargement d’une page ; les premiers chargements prendront alors un peu plus de temps. Vos images sources restent intactes. Cela vaut particulièrement la peine après une migration vers le format WebP ou après une modification des dimensions des images.

« Nettoyer le dossier des images sources » : uniquement avec une sauvegarde

Vous sélectionnez les dossiers Fabricants, Catégories, Options, Produits et Sliders. La boutique supprime tous les fichiers qui ne sont associés à aucun fabricant, aucune catégorie, aucun article, aucune caractéristique ou aucun slider en tant qu’image. Dans le dossier « Produits », elle supprime également les vidéos de produits non utilisées. Les fichiers supprimés ne peuvent pas être restaurés.

Lorsque vous supprimez des articles, l’option « Supprimer les images du serveur » supprime également leurs images ; voir le guide Créer et gérer des produits.