Les médias jouent un rôle crucial dans l'amélioration de l'attrait visuel et de l'efficacité de votre site web. Une bonne utilisation des images, des vidéos et d'autres types de médias permet de capter l'attention des visiteurs, de transmettre des informations plus efficacement et de créer une expérience utilisateur plus dynamique.
-
Tout fichier (texte, image, vidéo, audio) importé sur le système est visible du public. Aucune information personnelle et/ou confidentielle ne doit être importée. Pour supprimer un fichier dans sa totalité, supprimez-le depuis le gestionnaire de médias.
-
Images, icônes, clips audio et fichiers : jusqu'à 15 000 images, clips audio et fichiers combinés par site. L'ajout de fichiers supplémentaires peut entraîner un message d'erreur. Chaque fichier ne doit pas dépasser 50 Mo.
-
Vidéos : jusqu'à 100 par site. L'ajout de fichiers supplémentaires peut entraîner un message d'erreur. Chaque fichier ne doit pas dépasser 200 Mo. Les fichiers plus volumineux peuvent donner lieu à un message d'erreur ou ne pas être téléchargés complètement. 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 téléchargés, mais cela peut entraîner un comportement inattendu du fichier.
-
Les fichiers et leurs noms peuvent être mis en cache pendant un certain temps. Si un fichier est supprimé, il restera probablement disponible pendant un certain temps. Cela inclut le nom du fichier, ce qui signifie que vous pouvez rencontrer l'erreur "Name already exists" lorsque vous tentez d'utiliser le nom d'un fichier récemment supprimé.
-
En raison de la mise en cache, il n'est pas recommandé de télécharger un fichier portant le même nom qu'un fichier récemment supprimé, car le fichier supprimé peut continuer à apparaître pendant un certain temps.
-
Type de fichier SVG : Les SVG sont des fichiers images qui contiennent du code HTML, ce qui signifie que lorsque vous ajoutez une icône SVG à votre site, vous ajoutez également des lignes de code. Plusieurs 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 normales (.png, .jpeg), etc.) pour éviter les problèmes de chargement ou de fonctionnalité.
-
Aucun fichier, quel qu'il soit, ne peut être télé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.
Le rapport d'aspect est la relation entre la largeur et la hauteur d'un média et représente la valeur numérique de sa forme (en général, le rapport d'aspect est le plus important pour les images et les vidéos). La taille du support ne modifie pas nécessairement son rapport d'aspect. Par exemple, les formats 1280x720px et 3840x2160px ont tous deux le même rapport d'aspect de 16:9.
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é. En fonction du widget ou de l'élément, la modification du rapport d'aspect du fichier peut être le meilleur moyen de résoudre le problème. Pour les images, l'éditeur d'images intégré peut être utilisé pour modifier le rapport hauteur/largeur en recadrant l'image. Si une vidéo doit être éditée, il faudra faire appel à une société extérieure ( tool).
Remarque
-
La taille des fichiers est limitée à 50 Mo par image.
-
Les fichiers d'images contribuent à la limite de 15 000 fichiers.
Les formats d'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 qui sont plus petites que l'original sont optimisées. Par exemple, si vous téléchargez une image d'une largeur de 2000 px mais qu'elle est utilisée dans une zone ne nécessitant que 1920 px, l'image sera optimisée à 1920 px. Toutefois, si vous téléchargez une image d'une largeur de 100 px, elle ne sera pas optimisée et risque d'apparaître pixellisée si elle est affichée dans une zone plus large.
Bien que l'éditeur puisse optimiser des images de toutes tailles, il est recommandé de télécharger des images proches de la taille maximale qu'elles auront sur le site. Par exemple, si l'image est une vignette d'une largeur de 160 px, envisagez de télécharger une image d'une largeur maximale d'environ 200 px.
En plus de l'optimisation, toutes les images du site sont servies 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.
Remarque
L'optimisation des images de IONOS ne fonctionne que pour les images JPG et PNG. Si vous téléchargez une image au format TIFF, GIF ou autre, il se peut que IONOS ne soit pas en mesure de l'optimiser.
Le rapport d'aspect est le rapport entre la largeur et la hauteur d'une image et est essentiellement associé à la forme de l'image. Un rapport d'aspect 16:9 peut être une image 16x9 px ou une image 1600x900 px. Il s'agit en fait de toute résolution d'image ayant un rapport de 16:9.
Illustration des deux principaux formats d'image :
La résolution d'une image fait référence à la quantité de détails qu'elle contient, en particulier le nombre de pixels qui la composent, et correspond essentiellement aux détails et à la clarté de l'image.
Bien que les images de votre site soient optimisées, celles-ci ne sont jamais vraiment redimensionnées. Si vous utilisez un visuel sur ordinateur qui a un format d'image de 16:9, il s'affichera parfaitement sur l'appareil puisque ce dernier est large. Un équipement mobile, en revanche, est bien plus petit, c'est pourquoi un format d'image de 16:9 aura parfois l'air un peu petit.
Pour compenser, vous pouvez soit utiliser la fonction "hide on device" pour créer des versions spécifiques pour ces appareils, soit redimensionner les dimensions de l'image dans la zone de conception du site widget. Les changements de taille sont indépendants de l'appareil pour la plupart des éléments.
Le rapport d'aspect recommandé dépend de l'endroit où il sera utilisé et de la manière dont vous souhaitez l'afficher.
Si une image est destinée à être utilisée en orientation paysage, le ratio recommandé pourrait être 16:9, ce qui indiquerait que l'image est plus large que haute. Ce serait l'inverse pour le portrait, 9:16.
En ce qui concerne les recommandations relatives à la taille, il est généralement préférable que la largeur de l'image soit identique ou légèrement supérieure à la taille optimisée. Par exemple, si l'image est destinée à être utilisée dans une image widget sur desktop, la largeur maximale recommandée est de 1920 px ou à peine plus. Les images plus grandes nécessitent davantage d'optimisation, ce qui peut affecter la qualité de l'image. Si l'optimisation est désactivée, les images plus grandes ne perdront pas en qualité mais ralentiront le site en raison de leur taille.
Ratios et tailles courants
Lorsqu'une image occupe toute la largeur du site :
-
Rapports d'aspect courants pour desktop: 16:9, 3:4
-
Tailles de résolution courantes (px) pour desktop: 1600x900, 1280x720, 1280x960
Le format d'image des appareils mobiles est souvent l'opposé de celui des ordinateurs. Il est possible que vous deviez utiliser la fonctionnalité Masquage sur l'appareil pour afficher correctement le carrousel.
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. S'il existe des lignes directrices générales, il n'y a pas de normes fixes.
Galerie widget et widget qui offrent des mises en page de galerie
Ces widget comprennent les éléments suivants :
-
Galerie de photos
-
Galerie de produits
-
Carrousel média
-
Page de tiers store widget
Le rapport d'aspect des images dans ces widget doit correspondre à la façon dont vous souhaitez les afficher.
-
Par exemple, les galeries de style carré doivent avoir un format d'image de 1:1.
-
Les galeries présentant des images en hauteur doivent avoir un format plus haut, comme 2:5 ou 200x500 px.
-
Les formats d'image doivent être les mêmes par souci de cohérence visuelle. Laissez un peu de remplissage à l'image si vous souhaitez utiliser l'effet de survol, afin qu'elle ne soit pas coupée.
-
Tailles de résolution courantes (px) : N'importe quelle résolution, mais, dans la mesure du possible, pas plus de 1 500 px pour des raisons de rapidité.
Toutes les mises en page disponibles sont assorties de proportions fixes qui ne changeront pas, bien que les options de mise en page avec des images de taille uniforme offrent la possibilité de modifier la hauteur dans les paramètres de conception. Lorsque la hauteur est modifiée pour ces présentations, les proportions sont modifiées en fonction de la taille du widget.
Les proportions définies pour les présentations en mosaïque (les options avec des images de tailles différentes) varient en fonction de la présentation et du nombre de colonnes défini dans les paramètres de conception.
Alors que le widget de la page de la catégorie offre une grande variété de choix, l'image de la page du produit a un rapport d'aspect de 1:1.
Pour voir les options disponibles pour le widget sur la page de la catégorie :
-
Dans le panneau latéral, cliquez sur Vendre en ligne.
-
Cliquez sur store Pages.
-
Cliquez sur Category Page (si les catégories ne sont pas définies sur le site store, la page sera grisée et ne pourra pas être modifiée).
-
Cliquez avec le bouton droit de la souris sur le widget affichant les catégories et sélectionnez Modifier la conception.
-
Cliquez sur Produits.
-
Cliquez sur la vignette sous Mise en page pour voir les options de mise en page disponibles.
-
Pour connaître les formats disponibles, faites défiler la section Produits jusqu'à l'option Format de l'image.
Par défaut, le rapport hauteur/largeur de la plupart des éléments prévaut sur le rapport hauteur/largeur de l'image, ce qui a pour effet de couper certaines parties de l'image. Toutefois, certains éléments comportent un paramètre qui permet d'afficher l'image complète sans la recadrer.
|
Image originale |
Image dans un widget avec un rapport d'aspect différent |
|---|---|
|
Le rapport hauteur/largeur est de 3:2 |
Exemple de rapport d'aspect possible : 3:1 (uniquement la partie de l'image qui n'est pas couverte par les cases blanches). |
Lorsque vous utilisez l'option Couverture dans les paramètres de conception de l'élément, le rapport hauteur/largeur de l'élément prévaut sur le rapport hauteur/largeur de l'image. Si les rapports d'aspect 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 affiche le site.
Pour éviter que l'image ne soit coupée, vous pouvez utiliser l'option Image complète dans les paramètres de conception de l'élément. Veuillez noter que cette option n'est pas disponible pour tous les éléments.
Pour plus d'informations sur les arrière-plans, reportez-vous à la section Arrière-plans des éléments.
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 atteigne ce seuil. Toutefois, vous pouvez vérifier rapidement en multipliant la largeur par la hauteur (en pixels).
Chaque fichier ne doit pas dépasser 50 Mo. Les fichiers plus volumineux peuvent donner lieu à un message d'erreur ou ne pas être téléchargés complètement.
Le téléchargement d'une image trop volumineuse peut entraîner les erreurs suivantes :
-
Échec du téléchargement de l'image.
-
L'image se télécharge, mais les miniatures ne s'affichent pas dans le sélecteur d'images.
-
Échec du chargement de l'image dans l'éditeur.
-
Échec du chargement de l'image sur le site actif.
Nous vous recommandons 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é.
Remarque
Les fichiers SVG sont des fichiers image qui contiennent du code HTML. Ainsi, si vous ajoutez une icône au format SVG à votre site, vous ajoutez également quelques lignes de code.
Lignes directrices relatives à la taille
La largeur du logo lorsqu'il est incorporé dans l'en-tête ou le pied de page est comprise entre 250 et 400 px. En règle générale, la hauteur n'est pas un problème et sera déterminée par le rapport d'aspect du logo.
En important la résolution la plus importante pour votre site, vous aurez la garantie que vos clients voient vos images en haute résolution. Cependant, il est important de garder à l'esprit que les grandes images ont également un effet radical sur la rapidité de vos pages. Les images en haute résolution étant réduites, les utilisateurs ne remarquent généralement pas la différence de résolution. Il est plus judicieux d'importer des images dont la taille correspond à l'utilisation prévue. Par exemple, si vous avez une image de 300x300 px sur votre site, il n'y a pas d'intérêt à l'importer en tant qu'image de 400x400 px.
Pour optimiser la taille des images de votre site :
-
Ne téléchargez que des images dont la taille correspond à leur utilisation prévue (par exemple, si l'image doit apparaître en 300 px par 300 px sur le site, ne la téléchargez pas en 4000 px par 4000 px).
-
La taille maximale de l'image ne peut pas dépasser 3 145 728 pixels.
-
Soyez attentif(ve) aux formats d'image. En effet, bien que le format 16:9 soit idéal pour les ordinateurs, il est inadapté pour les appareils mobiles car les images sont trop petites. Dans ce cas :
-
Utilisez la fonction Masquer sur l'appareil pour créer des versions spécifiques de l'image pour chaque appareil.
-
Redimensionner les dimensions de l'image (rapport d'aspect) pour l'adapter - les changements de taille sont indépendants de l'appareil.
-
Remarque
-
Pour obtenir des informations et des directives sur les icônes de site qui se trouvent dans la zone Paramètres SEO & de l'éditeur, voir Paramètres SEO 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.
-
Formats d'image courants : généralement 1:1, mais n'importe lequel fonctionnera.
-
Résolutions courantes (en px) : 200x200, 80x80 ou toute autre résolution. La résolution des fichiers SVG n'a pas d'incidence.
Attention
Les SVG sont des fichiers images qui contiennent du code HTML, ce qui signifie que lorsque vous ajoutez une icône SVG à votre site, vous ajoutez également des lignes de code. Plusieurs SVG complexes peuvent ajouter des milliers de lignes de code et ralentir le chargement de votre site, voire le bloquer. Si vous devez utiliser plusieurs icônes SVG sur la même page, nous vous recommandons de transformer certaines d'entre elles en images normales (.png, .jpeg), etc.) pour éviter les 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 de médias ou en les enregistrant directement à l'aide de la caméra et du microphone de votre ordinateur. En outre, les vidéos de YouTube, Vimeo ou Dailymotion peuvent être ajoutées à des parties spécifiques du site à l'aide du widget vidéo ou en tant qu'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.
Remarque
Vous pouvez télécharger jusqu'à 100 vidéos par site. L'ajout de fichiers supplémentaires peut entraîner un message d'erreur. Chaque fichier ne doit pas dépasser 200 Mo. Les fichiers plus volumineux peuvent donner lieu à un message d'erreur ou ne pas être téléchargés complètement. Si des vidéos supplémentaires sont nécessaires, YouTube ou Vimeo peuvent être des options possibles.
-
Le chargement des vidéos peut prendre du temps et nécessiter du débit, et celles-ci peuvent distraire les utilisateurs des liens ou textes importants sur votre page. Utilisez donc les vidéos avec parcimonie.
-
Les vidéos YouTube ne sont pas prises en charge sur mobile, car elles ne bénéficient pas de la lecture automatique sur les appareils iOS.
-
Les iPhones dont la batterie est en mode économie d'énergie ne liront pas automatiquement les vidéos sur un site et présenteront à la place un bouton de lecture.
-
Les vidéos d'arrière-plan n'émettent pas de son.
-
Lorsque la vidéo Dailymotion que vous souhaitez ajouter fait partie d'une playlist, assurez-vous d'inclure uniquement le lien direct vers la vidéo et d'ignorer le paramètre de playlist (?playlist=x1x2f3 ou assimilé). Si ce paramètre est intégré dans l'URL de votre vidéo, supprimez-le. Par exemple, si le lien est https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2, il doit devenir https://www.dailymotion.com/video/x60ktex.
Plusieurs raisons peuvent expliquer qu'une vidéo ne soit pas téléchargée. Voici quelques techniques pour essayer de résoudre les problèmes :
-
Vérifiez que la taille du fichier est inférieure à 200 Mo.
-
Examinez les vidéos actuellement téléchargées 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 téléchargée, cela est probablement lié au fichier de la vidéo. La création d'un nouveau fichier à partir de la source originale peut résoudre le problème.
-
Si une autre vidéo n'est pas téléchargée, cela peut être lié à quelque chose de local à votre ordinateur, par exemple la vitesse de la page ou le navigateur. Si le problème est localisé sur votre ordinateur, vous pouvez essayer les techniques suivantes :
-
Pourquoi vider le cacher du navigateur ?
-
Essayer un autre navigateur
-
Essayer un autre réseau
-
Redémarrage de l'ordinateur
-
-
Remarque
Les fichiers audio contribuent à la limite de 15 000 fichiers.
Les fichiers audio peuvent être hébergés dans les fichiers du site en les téléchargeant dans le gestionnaire de médias ou en les enregistrant directement à l'aide du microphone de votre ordinateur. En outre, des fichiers audio provenant de SoundCloud ou de Mixcloud peuvent être ajoutés à 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 manière d'incorporer de l'audio dans un site, voir Audio widget.
Remarque
-
Les fichiers de l'onglet Fichier du gestionnaire de médias contribuent à la limite de 15 000 fichiers.
-
Vous ne pouvez pas importer 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 un widget. Par exemple, une image téléchargée dans cet onglet ne pourra pas être utilisée avec un widget image.
Les noms de fichiers peuvent rester en cache pendant un certain temps. Si un fichier portant le même nom a été récemment supprimé, il est probablement encore en cache et vous devrez utiliser un nom différent.
Il se peut qu'un fichier portant le même nom ait été récemment supprimé. Les noms de fichiers peuvent rester en cache pendant un certain temps. Le fichier doit être renommé.
Pour renommer un fichier, ouvrez le gestionnaire de médias, sélectionnez le fichier et cliquez sur Renommer. Si vous utilisez une bibliothèque ou un sélecteur, activez l'option Gérer pour la bibliothèque ou le sélecteur.
Cela est probablement dû à un fichier existant portant le même nom ou à un fichier récemment supprimé. Les noms de fichiers peuvent rester en cache pendant un certain temps. Renommer le fichier peut donc être la meilleure solution si vous rencontrez ce problème.
Pour renommer un fichier, ouvrez le gestionnaire de médias, sélectionnez le fichier et cliquez sur Renommer. Si vous utilisez une bibliothèque ou un sélecteur, activez l'option Gérer pour la bibliothèque ou le sélecteur.