Instructions concernant la taille des images

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

Tailles d'image optimisées par appareil

Type d'image

Largeur d'image

Fond

1980 px

Ordinateur

1660 px

Tablette

1440 px

Mobile

600 px

Miniature

150 px

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.

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

Slider

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.

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.

Favicons

Les favicons ne sont pas utilisées directement sur votre site, mais sur l'onglet auquel elles correspondent lorsque les utilisateurs les 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 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.