Instructions concernant la taille des images

  • Base de connaissances
  • Créateur de site Web responsive
  • Instructions concernant la taille des images
  • Assistance > Créateur de site responsive > Modifier un site

Présentation

Chaque fois que vous mettez en ligne une image, le créateur de site Web en réalise jusqu'à 5 copies en taille réduite. Il 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.

Guide

Tailles d'image optimisées par appareil

Type d'image Largeur d'image
Arrière-plan 1980 px
Ordinateur 1660 px
Tablette 1440 px
Mobile 600 px
Miniature 150 px

Le créateur n'augmentera pas la taille d'une image téléchargée, mais créera des images plus petites que celles qui ont été mises en ligne à l'origine.

Par exemple, si une image de 2000 px de large est téléchargée, 5 nouvelles copies optimisées seront générées. Si l'image fait 100 px, aucune nouvelle image ne sera créée.

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

Instructions pour la taille des images par widget

Carrousel

Le widget Carrousel 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

Remarques particulières concernant les appareils : 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

Le widget Galerie est le plus facile à utiliser avec des images, car il propose énormément d'options de disposition. 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 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.

Favicons

Les favicons ne sont pas utilisées directement sur votre site, mais sur l'onglet auquel il correspond lorsque les utilisateurs l'ouvrent.

  • Format d'image requis : 1:1
  • Résolutions autorisées (en px) : 24x24, 36x36, 48x48

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

Différents formats d'image par appareil

Bien que le créateur de site Web optimise les images sur votre site, il ne les redimensionne pas concrètement dessus. 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 mettant en ligne 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 de télécharger 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 à la télécharger en tant qu'image de 400x400 px.