Chaque fois que vous importez une image, jusqu’à 5 copies en taille réduite sont créées. SiteBuilder 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.
DANS CET ARTICLE:
- Tailles d’image optimisées par appareil
- Taille d’image maximale
- Instructions pour la taille des images par widget
- Remarques
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 |
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
Carrousel
Le 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) : 1600×900, 1280×720, 1280×960
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 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 200×500 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) : 200×200, 80×80 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) : 24×24, 36×36, 48×48
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 16×19 px comme à une image de 1600×900 px. 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 300×300 px sur votre site, il n’y a pas d’intérêt à l’importer en tant qu’image de 400×400 px.