Les médias jouent un rôle crucial dans l'amélioration de l'attrait visuel et de l'efficacité de votre site Web. L'utilisation appropriée des images, des vidéos et d'autres types de médias peut impliquer les visiteurs, transmettre des informations plus efficacement et créer une expérience utilisateur plus dynamique.
-
Images, icônes, clips audio et fichiers : jusqu'à 15 000 images, clips audio et fichiers combinés par site. Des fichiers supplémentaires peuvent générer un message d'erreur. Chaque fichier ne doit pas dépasser 50 Mo
Notez que si vous souscrivez à un plan de boutique natif Elite, la limite de fichiers est augmentée à 20 000.
-
Vidéos : jusqu'à 100 par site. Des fichiers supplémentaires peuvent entraîner l'affichage d'un message d'erreur. Chaque fichier ne doit pas dépasser 200 Mo. Les fichiers plus volumineux peuvent générer un message d'erreur ou ne pas terminer le chargement. Si des vidéos supplémentaires sont nécessaires, YouTube ou Vimeo peuvent être des options possibles
-
Les espaces dans les noms de fichiers ne sont pas pris en charge. Les fichiers contenant des espaces peuvent être chargés, mais cela peut entraîner un comportement inattendu avec le fichier.
-
[en] After you delete a file, its name may stay cached for a while. Give new uploads a different name, or you may see the error Name already exists, or the deleted file may keep showing.
-
Type de fichier SVG : Les SVG sont des fichiers image contenant du code HTML, ce qui signifie que lorsque vous ajoutez une icône SVG à votre site, vous ajoutez également des lignes de code. Plusieurs fichiers SVG complexes peuvent ajouter des milliers de lignes de code et ralentir le chargement de votre site. Si vous devez utiliser plusieurs icônes SVG sur la même page, nous vous recommandons de transformer certaines d'entre elles en images classiques (.png, .jpeg, etc.) pour éviter des problèmes de chargement ou de fonctionnalité
-
Aucun type de fichier ne peut être chargé dans le dossier racine d'un domaine.
-
Les métadonnées des fichiers (y compris les données EXIF) ne sont pas prises en charge et seront supprimées lors du téléchargement.
rapport hauteur/largeur est la relation entre la largeur et la hauteur du support et représente la valeur numérique de sa forme (généralement, le rapport hauteur/largeur est le plus important dans les images et les vidéos). La taille du support ne modifie pas nécessairement son format d'image. Par exemple, les formats 1280x720px et 3840x2160px
Si le rapport hauteur/largeur d'un fichier multimédia est sensiblement différent de la forme de la section ou de l'élément dans lequel il sera utilisé, il peut sembler coupé. Selon le widget ou l'élément, modifier le format d'image du fichier peut être le meilleur moyen de le corriger. Pour les images, l'éditeur d'images intégré peut être utilisé pour modifier le rapport hauteur/largeur en le recadrant. Si une vidéo doit être éditée, il faudra le faire à l'aide d'un outil externe.
Note
-
La taille maximale des fichiers est de 50 Mo par image.
-
Les fichiers image contribuent à la limite de 15 000 fichiers.
Les types de fichiers image suivants sont pris en charge :
png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp
L'éditeur optimise les images à la demande, en les adaptant à l'appareil utilisé et à la taille visible sur le site.
Notez que la taille de l'image téléchargée n'est jamais augmentée et que seules les images affichées sur le site plus petites que l'original sont optimisées. Par exemple, si vous téléchargez une image d'une largeur de 2 000 pixels mais qu'elle est utilisée dans une zone ne nécessitant que 1920 pixels, l'image sera optimisée à 1920 pixels. Toutefois, si vous téléchargez une image d'une largeur de 100 pixels, elle ne sera pas optimisée et risque d'apparaître pixélisée si elle est affichée dans une
Bien que l'éditeur puisse optimiser les images de n'importe quelle taille, il est recommandé de télécharger des images proches de la taille maximale à laquelle elles apparaîtront sur le site. Par exemple, si l'image doit être une miniature d'une largeur de 160 pixels, envisagez de télécharger une image d'une largeur maximale d'environ 200
Outre l'optimisation, toutes les images du site sont diffusées au format WebP. Ce format permet de réduire la taille des fichiers tout en préservant la qualité de l'image, ce qui contribue à accélérer les performances du site sans sacrifier la clarté visuelle
Note
DudaL'optimisation des images ne fonctionne que sur les images JPG et PNG. Si vous chargez un fichier TIFF, GIF ou un autre format d'image Duda pourrait ne pas être en mesure de l'optimiser.
L'optimisation peut être désactivée pour les images d'arrière-plan, le widget Image et le widget Galerie de photos.
Pour plus d'informations, consultez les articles suivants :
Avertissement
La désactivation de l'optimisation des images peut avoir un impact sur la vitesse et/ou les performances des pages.
rapport hauteur/largeur est le rapport entre les attributs de largeur et de hauteur d'une image et est essentiellement associé à la forme de l'image. Un format d'image 16:9 peut être une image de 16 x 9 px ou une image de 1600 x 900 px. Il s'agit essentiellement de n'importe quelle résolution d'image dont le ratio est de 16:9.
Visualisation des deux formats d'image les plus courants :
La résolution d'une image fait référence à la quantité de détails qu'une image contient, en particulier au nombre de pixels qui la composent. Il s'agit essentiellement des détails et de la clarté de l'image.
Bien que les images soient optimisées sur votre site, cela ne redimensionne pas réellement la conception des images de votre site. Si vous utilisez sur le bureau une image au format 16:9, elle sera parfaite sur le bureau car un appareil de bureau est large. Un appareil mobile étant toutefois beaucoup plus petit, un format 16:9 peut parfois sembler petit
Pour compenser, vous pouvez soit utiliser la fonction de masquage sur l'appareil pour créer des versions spécifiques pour ces appareils, soit redimensionner les dimensions de l'image dans la zone de conception du widget. Les modifications de taille sont indépendantes de l'appareil pour la plupart des éléments.
Le rapport hauteur/largeur recommandé dépend de l'endroit où il sera utilisé et de la manière dont vous souhaitez qu'il soit affiché.
Si une image doit être utilisée en orientation paysage, un exemple de ratio recommandé pourrait être 16:9, car cela indiquerait qu'elle sera plus large que haute. Ce serait le contraire pour un portrait, 9:16.
Pour les recommandations de taille, il est généralement préférable de maintenir la largeur de l'image égale ou légèrement supérieure à la taille optimisée. Par exemple, si l'image doit être utilisée dans un widget d'image sur ordinateur, la largeur maximale recommandée est de 1920 pixels ou légèrement plus grande. Les images plus grandes nécessitent une optimisation plus poussée, ce qui peut affecter la qualité de l'image. Si l'optimisation est désactivée, les images plus grandes n'en pâtiront pas en qualité mais ralentiront le site en raison de leur taille.
Ratios et tailles courants
Quand une image sera affichée sur toute la largeur du site :
-
Rapports d'aspect courants pour les ordinateurs de bureau : 16:9, 3:4,
-
Tailles de résolution courantes (px) pour les ordinateurs de bureau : 1600 x 900, 1280 x 720, 1280 x 960
Les appareils mobiles ont souvent un format d'image opposé à celui des appareils de bureau. Vous devrez peut-être utiliser la fonction de masquage sur l'appareil pour afficher correctement les curseurs mobiles
Le rapport hauteur/largeur et la taille de l'image d'un widget peuvent varier en fonction de la taille, de l'emplacement et des paramètres du widget. Bien qu'il existe des directives générales, il n'existe pas de normes fixes.
Widgets de galerie et widgets proposant des mises en page de galerie
Ces widgets incluent les éléments suivants :
-
Galerie de photos
-
Galerie de produits
-
Curseur multimédia
-
third party store widgets de page
Le rapport hauteur/largeur des images de ces widgets doit refléter la manière dont vous souhaitez qu'elles s'affichent.
-
Par exemple, les galeries de style carré doivent avoir un ratio d'images de 1:1.
-
Les galeries de style d'image de grande taille doivent avoir des ratios de hauteur plus longs, par exemple 2:5, ou 200 pixels par 500 pixels.
-
Les ratios d'image doivent être identiques pour garantir la cohérence du design. Laissez un peu de marge dans l'image pour utiliser l'effet de survol afin que vos images ne soient pas coupées.
-
Tailles de résolution courantes (px) : n'importe quelle résolution, mais dans la mesure du possible, pas plus de 1500 pixels pour la vitesse de la page.
Toutes les mises en page disponibles sont dotées de rapports hauteur/largeur définis qui ne changeront pas, bien que les options de mise en page avec des tailles d'images uniformes aient la possibilité de modifier la hauteur dans les paramètres de conception. Lorsque la hauteur de ces mises en page est modifiée, les proportions changent en fonction de la taille du widget
Les rapports hauteur/largeur définis pour les mises en page en mosaïque (les options avec des images de tailles différentes) varient en fonction de la mise en page et du nombre de colonnes défini dans les paramètres de conception.
Alors que le widget de la page des catégories offre une variété de choix, l'image de la page du produit a un rapport hauteur/largeur de 1:1.
Pour voir les options disponibles pour le widget sur la page des catégories :
-
Dans le panneau latéral, cliquez sur Boutique.
-
Cliquez Pages de la boutique.
-
Cliquez Page de catégorie (si aucune catégorie n'est configurée dans la boutique, la page sera grisée et ne pourra pas être modifiée).
-
Cliquez avec le bouton droit sur le widget affichant les catégories et sélectionnez Modifier le design.
-
Cliquez Produits.
-
Cliquez sur la miniature ci-dessous Disposition pour voir les options de mise en page disponibles.
-
Pour voir les rapports hauteur/largeur disponibles, faites défiler la section Produits vers le bas jusqu'à Rapport d'aspect de l'image option.
Par défaut, le rapport hauteur/largeur de la plupart des éléments remplacera le rapport hauteur/largeur de l'image, ce qui entraînera la coupure de certaines parties de l'image. Cependant, certains éléments incluent un paramètre qui permet d'afficher l'image complète sans être recadrée
|
Image originale |
Image dans un widget avec un rapport hauteur/largeur supérieur |
|---|---|
|
Le rapport hauteur/largeur est de 3:2 |
Exemple de rapport hauteur/largeur possible : 3:1 (juste la partie de l'image qui n'est pas recouverte par les cases blanches) |
Lors de l'utilisation du Couvercle Dans les paramètres de conception de l'élément, le rapport hauteur/largeur de l'élément remplacera le rapport hauteur/largeur de l'image. Si les proportions ne correspondent pas, certaines parties de l'image seront coupées.
En outre, certains éléments, tels que les lignes et les sections, s'adaptent à la taille de l'écran de l'appareil. Par conséquent, le rapport hauteur/largeur de l'élément changera en fonction de la taille de l'écran qui consulte actuellement le site.
Une technique pour empêcher la coupure de l'image consiste à utiliser Image complète option dans les paramètres de conception de l'élément. Veuillez noter que cette option ne sera pas disponible pour tous les éléments.
Pour plus d'informations sur les arrière-plans, voir Contexte des éléments.
Certains widgets proposent un paramètre qui permet d'afficher l'image complète sans être recadrée.
Widgets qui proposent le réglage pour afficher l'image complète :
-
Image (dans Editor 2.0 ; dans l'éditeur classique, le widget respectera toujours le rapport hauteur/largeur de l'image)
-
Curseur multimédia
-
Galerie de photos
La surface totale d'une image ne peut pas dépasser 3 145 728 pixels. Il est peu probable que l'une de vos images dépasse cette limite, mais vous pouvez le vérifier rapidement en multipliant la largeur des pixels par la hauteur
Chaque fichier ne doit pas dépasser 50 Mo. Les fichiers plus volumineux peuvent générer un message d'erreur ou ne pas terminer le chargement.
Le téléchargement d'une image plus grande que la limite peut entraîner les erreurs suivantes :
-
Les images ne peuvent pas être chargées.
-
Les images sont téléchargées, mais les vignettes du sélecteur d'images ne s'affichent pas.
-
Les images ne se chargent pas dans l'éditeur.
-
Les images ne se chargent pas sur le site en direct.
Il est recommandé d'utiliser le format SVG pour les images de logo, car les fichiers SVG ne sont pas optimisés de la même manière que les autres fichiers image. Ainsi, même si le logo que vous téléchargez est de petite taille, vous ne perdrez pas en qualité.
Note
Les SVG sont des fichiers image contenant du code HTML, ce qui signifie que lorsque vous ajoutez une icône SVG à votre site, vous ajoutez également des lignes de code.
Directives relatives aux tailles
La largeur du logo lorsqu'il est intégré à l'en-tête ou au pied de page est comprise entre 250 pixels et 400 pixels. En règle générale, la hauteur n'est pas un problème et sera déterminée par le rapport hauteur/largeur du logo.
Le téléchargement de la plus haute résolution pour votre site garantit que les images de votre site sont en haute résolution pour vos clients et clients. Cependant, gardez à l'esprit que les images de grande taille ont également un effet considérable sur la vitesse de votre page. Les images haute résolution étant réduites, les utilisateurs ne remarquent généralement pas la différence de résolution. Il est préférable de télécharger des images dont la taille correspond à la manière dont elles sont destinées à être utilisées. Par exemple, si vous avez une image de 300 x 300 pixels sur votre site, vous ne souhaitez pas la télécharger sous forme d'image de 4 000 pixels par 4 000 pixels
Pour optimiser la taille des images pour votre site, procédez comme suit :
-
Téléchargez uniquement des images dont la taille correspond à celle à laquelle elles sont destinées à être utilisées (par exemple, si l'image doit apparaître au format 300 x 300 pixels sur le site, ne la téléchargez pas au format 4 000 pixels par 4 000 pixels).
-
La taille maximale de l'image ne peut pas dépasser 3 145 728 pixels.
-
Faites attention aux rapports hauteur/largeur, car les images 16:9 ont une belle apparence sur un ordinateur mais semblent trop petites sur un appareil mobile. Dans ce cas :
-
Utilisez le Masquer sur l'appareil fonction permettant de créer des versions spécifiques de l'image pour chaque appareil.
-
Redimensionnez les dimensions de l'image (rapport hauteur/largeur) pour l'adapter : les modifications de taille sont indépendantes de l'appareil.
-
La surface totale d'une image ne peut pas dépasser 3 145 728 pixels. Il est peu probable que l'une de vos images dépasse cette limite, mais vous pouvez le vérifier rapidement en multipliant la largeur des pixels par la hauteur
Note
-
Pour obtenir des informations et des instructions concernant les icônes du site, voir Paramètres de référencement du site.
-
Les fichiers d'icônes contribuent à la limite de 15 000 fichiers.
Le type de fichier, SVG, est le seul type de fichier pris en charge pour cet onglet.
-
Rapports hauteur/largeur courants : généralement 1:1, mais n'importe quel rapport hauteur/largeur fonctionnera.
-
Tailles de résolution courantes (px) : 200 x 200, 80 x 80 ou n'importe quelle résolution. Les SVG peuvent être de n'importe quelle résolution
Avertissement
SVG sont des fichiers image contenant du code HTML, ce qui signifie que lorsque vous ajoutez une icône SVG à votre site, vous ajoutez également des lignes de code. Plusieurs fichiers SVG complexes peuvent ajouter des milliers de lignes de code et ralentir le chargement de votre site, voire provoquer des interruptions. Si vous devez utiliser plusieurs icônes SVG sur la même page, nous vous recommandons de transformer certaines d'entre elles en images classiques (.png, .jpeg, etc.) pour éviter des problèmes de chargement ou de fonctionnalité
Les vidéos peuvent être hébergées dans les fichiers du site en les téléchargeant dans le gestionnaire multimédia ou en les enregistrant directement à l'aide de la caméra et du microphone de votre ordinateur. En outre, des vidéos de YouTube, Vimeo ou Dailymotion peuvent être ajoutées à des parties spécifiques du site à l'aide du widget vidéo ou comme arrière-plan pour les éléments qui prennent en charge la vidéo. Ces vidéos externes ne seront disponibles qu'à l'endroit où elles ont été ajoutées et ne seront pas disponibles dans l'éditeur.
Note
Jusqu'à 100 vidéos peuvent être téléchargées par site. Des fichiers supplémentaires peuvent entraîner l'affichage d'un message d'erreur. Chaque fichier ne doit pas dépasser 200 Mo. Les fichiers plus volumineux peuvent générer un message d'erreur ou ne pas terminer le chargement. Si des vidéos supplémentaires sont nécessaires, YouTube ou Vimeo peuvent être des options possibles
Pour des informations détaillées sur où et comment les vidéos peuvent être intégrées au site, consultez les articles suivants :
-
Le chargement des vidéos peut prendre du temps et de la bande passante, et peuvent détourner l'attention des utilisateurs des liens importants ou du texte de votre page. Utilisez donc les vidéos avec parcimonie.
-
Les vidéos YouTube ne sont pas prises en charge sur les appareils mobiles car elles ne se diffusent pas automatiquement sur les appareils iOS.
-
Les iPhones dont la batterie est en mode faible consommation ne diffuseront pas automatiquement les vidéos sur un site et afficheront à la place un bouton de lecture.
-
Les vidéos d'arrière-plan n'émettront pas de son.
-
Lorsque vous ajoutez une vidéo Dailymotion faisant partie d'une playlist, veillez à n'ajouter que le lien direct vers la vidéo (et omettez le paramètre de playlist, qui ressemble à ceci : ? liste de lecture = x1x2f3). Si l'URL de votre vidéo comporte ce paramètre, supprimez-le simplement. Par exemple :
https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2seraithttps://www.dailymotion.com/video/x60ktex
Il peut y avoir plusieurs raisons pour lesquelles une vidéo ne sera pas mise en ligne. Voici quelques techniques pour essayer de résoudre les problèmes
-
Vérifiez la taille du fichier pour vous assurer qu'elle est inférieure à 200 Mo.
-
Passez en revue les vidéos actuellement mises en ligne pour vous assurer qu'il y en a moins de 100.
-
Essayez de télécharger une autre vidéo.
-
Si une autre vidéo est chargée, elle est probablement liée au fichier de la vidéo. La création d'un nouveau fichier à partir de la source d'origine peut résoudre le problème.
-
Si aucune autre vidéo n'est mise en ligne, cela peut être lié à un élément local de votre ordinateur, par exemple la vitesse de la page ou le navigateur. S'il est local sur votre ordinateur, voici quelques techniques à essayer :
-
Effacement du cache du navigateur
-
Essayer un autre navigateur
-
Essayer un autre réseau
-
Redémarrer votre ordinateur
-
-
Note
Les fichiers audio contribuent à la limite de 15 000 fichiers.
audio peuvent être hébergés dans les fichiers du site en les téléchargeant dans le gestionnaire multimédia ou en les enregistrant directement à l'aide du microphone de votre ordinateur. De plus, l'audio de SoundCloud ou Mixcloud peut être ajouté à des parties spécifiques du site à l'aide du widget audio. L'audio externe ne sera disponible qu'à l'endroit où il a été ajouté et ne sera pas disponible dans l'éditeur.
Pour plus de détails sur la façon d'intégrer l'audio dans un site, voir Widget audio.
Note
-
Les fichiers de l'onglet Fichier du gestionnaire de médias contribuent à la limite de 15 000 fichiers.
-
Vous ne pouvez pas télécharger de fichiers dans votre dossier racine.
L'onglet Fichier du gestionnaire de médias prend en charge presque tous les types de fichiers. Les fichiers téléchargés ici peuvent être liés à l'aide du sélecteur de liens, mais ne peuvent pas être utilisés directement dans aucun widget (pour plus d'informations sur le sélecteur de liens, voir Sélecteur de liens). Par exemple, une image téléchargée dans cet onglet ne pourra être utilisée avec aucun widget d'image.
Les noms de fichiers peuvent rester en cache pendant un certain temps. Si un fichier portant le même nom a été supprimé récemment, il est probablement toujours mis en cache et vous devrez utiliser un autre nom
Un fichier portant le même nom a peut-être été supprimé récemment. Les noms de fichiers peuvent rester en cache pendant un certain temps. Il faudrait renommer le fichier.
Pour renommer un fichier, ouvrez le Media Manager, sélectionnez le fichier et cliquez sur Renommer. Si vous utilisez une bibliothèque ou un sélecteur, activez Gérez option pour la bibliothèque ou le sélecteur.
Cela est probablement dû à l'existence d'un fichier portant le même nom ou à une suppression récente. Les noms de fichiers peuvent rester en cache pendant un certain temps. Renommer le fichier peut donc être la meilleure option si vous rencontrez ce problème
Pour renommer un fichier, ouvrez le Media Manager, sélectionnez le fichier et cliquez sur Renommer. Si vous utilisez une bibliothèque ou un sélecteur, activez Gérez option pour la bibliothèque ou le sélecteur.
[en] Delete the file from the Media Manager, or from a library or picker with the Manage option turned on. The file is removed from your site's media right away.
[en] If someone already has the file's direct link, they may still be able to open it for a while, because copies of the file can stay cached. There's no set time frame for how long.