Instructions concernant la taille des images

Modifié le Thu, 21 Dec 2023 sur 03:14 PM

Chaque fois que vous importez une image, jusqu'à 5 copies en taille réduite sont créées. L'Éditeur de site 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.

Remarque

Il est possible de télécharger jusqu'à 15 000 fichiers (y compris les images, les vidéos, les clips audio et les fichiers) par site, chacun avec une taille maximale de 200 Mo.

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

Remarque

L'optimisation peut être désactivée pour les images d'arrière-plan, le widget Image et le widget Galerie de photos.

La désactivation de l'optimisation des images peut avoir un impact sur la vitesse et/ou les performances des pages.

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 200 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

Widget Slider d'images

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

Remarque

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.

Widgets Galerie de photos et Galerie de produits de la boutique

Le widget Galerie de photos et les widgets Galerie de produits sont les plus faciles à utiliser avec des images, car ils proposent é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 et de la galerie de produits 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.

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. 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

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.