Chaque fois que vous importez une image, jusqu'à 5 copies en taille réduite sont créées. Le créateur de site web insère ensuite automatiquement la taille d'image appropriée sur les sites pour ordinateur, tablette et mobile afin de veiller à ce que vos visiteurs voient toujours le visuel dans une taille adaptée à leur appareil.
- Vous pouvez télécharger jusqu'à 15 000 images par site, et chaque image ne doit pas dépasser 15 Mo.
- Vous pouvez télécharger jusqu'à 100 vidéos par site, et chaque image ne doit pas dépasser 200 Mo. En revanche, vous êtes libre d'utiliser autant de liens vidéo Youtube/Vimeo que vous le souhaitez sur chaque site. Pour plus d'informations, consultez la section Widget Vidéo.
- Les noms d'images ne peuvent pas contenir d'espaces. Par exemple, le nom belle image.png devrait être au format belle_image.png ou belle-image.png.
Configuration requise pour le format WebP
Les versions suivantes sont prises en charge pour les images au format WebP :
- iPhone : version 14 et ultérieure
- Mac/Safari : dernière version
- Chrome : toutes les versions
- Android : toutes les versions
Les formats d'image suivants sont pris en charge :
png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp
Tailles d'image optimisées par appareil
La taille de l'image importée n'est jamais augmentée. Seules des images plus petites que l'originale sont créées. Par exemple, si une image de 2000 px de large est importée, 5 nouvelles copies optimisées seront générées. Si l'image fait 100 px, aucune nouvelle image ne sera créée.
Type d'image |
Largeur d'image |
|---|---|
Arrière-plan |
2 880 px |
Ordinateur |
1 920 px |
Tablette |
1 280 px |
Mobile |
640 px |
|
Miniature vignette de blog |
160 px 300 px |
Taille d'image maximale
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).
La taille de l'image ne doit pas dépasser 15 Mo.
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.
Instructions pour la taille des images par widget
Carrousel
Le widget Slider est normalement utilisé avec des images de plus grande taille pour un effet spectaculaire. Les carrousels s'étalent généralement sur toute la largeur de la page, c'est pourquoi il est conseillé d'utiliser des images larges pour s'y adapter. Pour les carrousels carrés, utilisez un format d'image proportionnel, par exemple 1:1.
Il est préférable d'utiliser des visuels bénéficiant d'un remplissage correct, de sorte que le contenu principal de l'image ne soit pas coupé en cas de redimensionnement. Les formats d'image doivent être les mêmes dans le carrousel par souci de cohérence visuelle.
- Formats d'image courants : 16:9, 3:4
- Résolutions courantes (en px) : 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.
Galerie de photos
Le widget Galerie de photos est le plus facile à utiliser avec des images, car il propose énormément d'options de mise en page. Par exemple, vous pouvez avoir une galerie en mosaïque avec des images de la même taille ou avec des images de différentes tailles.
Le format des images de la galerie de photos doit refléter la façon dont vous souhaitez qu'elles s'affichent.
- 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.
- Formats d'image courants : tous.
- Résolutions courantes (en px) : toutes, mais pas plus de 1 500 px pour la rapidité des pages.
Icônes
Les icônes sont très importantes sur un site. Ce sont les marqueurs visuels qui correspondent à des informations, et elles peuvent par ailleurs conférer un style moderne à votre site. Vous pouvez utiliser des fichiers PNG, JPEG et SVG transparents.
- 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.
Pour en savoir plus, consultez l'article Icônes du site.
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. L'ajout de plusieurs fichiers SVG complexes peut donc ajouter des milliers de lignes de code et ralentir le chargement de votre site. Si vous avez besoin d'utiliser plusieurs icônes SVG sur la même page, nous vous recommandons de convertir certaines d'entre elles en images au format .png ou .jpeg afin d'éviter tout problème de chargement ou de fonctionnement du site.
Favicons
Les favicons ne sont pas utilisées directement sur votre site, mais sur l'onglet auquel elles correspondent lorsque les utilisateurs les ouvrent. Nous vous recommandons d'utiliser le format ICO. Pour convertir des fichiers image au format ICO, consultez le lien suivant.
- Format d'image requis : 1:1
- Résolutions autorisées (en px) : 24x24, 36x36, 48x48
Logos
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é.
Format d'image et résolution
Le format d'image est le « ratio » entre la largeur et la hauteur d'une image. Un format d'image de 16:9 peut correspondre à une image de 16x9 px comme à une image de 1600x900. De façon très simple, il se rapporte à toute image dont la résolution a un ratio de 16:9.
Illustration des deux principaux formats d'image :
Formats d'image par appareil
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 fonctionnalité Masquage sur l'appareil pour créer des versions spécifiques pour ces appareils, ou bien vous pouvez redimensionner l'image de sorte qu'elle puisse s'y adapter. Les modifications apportées à la taille sont indépendantes pour chaque appareil.
Remarques
Attention aux grands formats
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.