Chaque fois que vous téléchargez une image, jusqu'à cinq copies réduites sont créées. Guesty Sites Internet insère ensuite automatiquement l'image à la taille appropriée sur les sites pour ordinateur, tablette et mobile, garantissant ainsi que les visiteurs de votre site voient toujours l'image adaptée à leur appareil.
Note :
- Jusqu'à 15 000 fichiers (cela inclut des images, des clips audio, des icônes et des fichiers) peuvent être téléchargés par site, et chaque fichier ne doit pas dépasser 50 Mo.
Configuration requise pour Webp
Les versions suivantes sont prises en charge pour les images Webp :
- iPhone : v14 et versions ultérieures
- Mac/Safari : dernière version
- Chrome : toutes les versions
- Android : toutes les versions
Les types de fichiers 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 téléchargée n'est pas augmentée et seules les images plus petites que l'original sont créées. Par exemple, si une image de 2 000 px de large est téléchargée, cinq nouvelles copies optimisées seront créées. Si une image de 100 px de large est téléchargée, aucune nouvelle image ne sera créée.
|
Largeur de l'image |
|
|
|
|
|
|
|
640px |
Vignette
Vignette du blog
|
|
Note :
L'optimisation peut être désactivée pour les images d'arrière-plan, l'image widget et la galerie de photos widget .
Pour plus d'informations, consultez les articles suivants :
La désactivation de l'optimisation de l'image peut avoir un impact sur la vitesse et/ou les performances de la page.
Taille maximale de l'image
La surface totale d'une image ne peut pas dépasser 3 145 728 pixels. Il est peu probable que vos images dépassent cette limite, mais vous pouvez vérifier rapidement en multipliant la largeur en pixels par la hauteur.
La taille de l'image ne doit pas dépasser 15 Mo.
Le téléchargement d'une image plus grande que la limite peut entraîner les erreurs suivantes :
- Les images ne parviennent pas à être téléchargées.
- Les images sont téléchargées, mais les miniatures dans le sélecteur d'images ne s'affichent pas.
- Les images ne se chargent pas dans l'éditeur.
- Les images ne se chargent pas sur le site en direct.
Directives relatives à la taille des images par widget
Curseur
Le widget Curseur est généralement utilisé avec des images de grande taille pour un effet spectaculaire. Les curseurs s'étirent généralement d'un bout à l'autre ; il est donc conseillé d'utiliser des images plus larges pour s'adapter au curseur. Pour les curseurs carrés, utilisez un format d'image régulier, par exemple 1:1.
Il est préférable de choisir des images avec un bon remplissage afin que le contenu principal ne soit pas tronqué lors du redimensionnement. Les proportions des images doivent être identiques dans le curseur pour une cohérence graphique.
- Rapports d'aspect courants : 16:9, 3:4
- Tailles de résolution courantes (px) : 1 600 x 900, 1 280 x 720, 1 280 x 960
Note :
Les appareils mobiles ont souvent un format d'image inversé par rapport aux ordinateurs de bureau. Vous devrez peut-être utiliser la fonction « Masquer sur l'appareil » pour afficher correctement les curseurs mobiles.
Galerie de photos
Le widget Galerie photos est le plus flexible pour les images, grâce à ses nombreuses options de mise en page. Par exemple, vous pouvez créer une galerie en mosaïque de taille identique pour toutes les images, ou une mosaïque de taille différente pour chaque image.
Le rapport hauteur/largeur des images dans 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 rapport d'images de 1:1.
- Les galeries de style d'image haute doivent avoir des rapports de hauteur plus longs, comme 2:5, ou 200 px par 500 px.
Les proportions des images doivent être identiques pour une cohérence graphique. Laissez un peu de marge intérieure pour utiliser l'effet de survol et éviter que vos images ne soient tronquées.
- Rapports d'aspect courants : tout rapport d'aspect.
- Tailles de résolution courantes (px) : toute résolution, mais pas supérieure à 1 500 px pour la vitesse de la page.
Icônes
Les icônes sont un élément essentiel de tout site web. Elles constituent des repères visuels pour les informations et peuvent apporter une touche de modernité à votre site. Vous pouvez utiliser des fichiers PNG, JPEG ou SVG transparents.
- Rapports hauteur/largeur courants : généralement 1:1, mais n’importe quel rapport hauteur/largeur fonctionnera.
- Tailles de résolution courantes (px) : 200 x 200, 80 x 80 ou toute autre résolution. Les SVG peuvent avoir n'importe quelle résolution.
Pour plus d'informations, voir Icônes du site .
Note :
Les SVG sont des fichiers image contenant du code HTML. Ajouter une icône SVG à votre site implique donc d'ajouter des lignes de code. Plusieurs SVG complexes peuvent ajouter des milliers de lignes de code et ralentir le chargement de votre site. Si vous devez utiliser plusieurs icônes SVG sur la même page, nous vous recommandons de convertir certaines d'entre elles en images standard (.png, .jpeg, etc.) pour éviter les problèmes de chargement ou de fonctionnalité.
Favicons
Les favicons ne sont pas utilisés sur votre site web, mais s'affichent dans l'onglet lorsque les utilisateurs ouvrent votre site. Il est recommandé d'utiliser le format ICO. Pour convertir des fichiers image au format ICO, consultez la ressource suivante.
- Rapport hauteur/largeur requis : 1:1
- Tailles de résolution autorisées (px) : 24x24, 36x36, 48x48
Logos
Il est recommandé 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, donc même si le logo que vous téléchargez est de petite taille, vous ne perdrez pas de qualité.
Rapport hauteur/largeur vs résolution
Le rapport hauteur/largeur (LH) est le rapport entre la largeur et la hauteur d'une image. Un rapport hauteur/largeur 16:9 peut correspondre à une image de 16 x 9 px ou de 1 600 x 900 px. Il s'agit de toute résolution d'image au format 16:9.
Visualisation des deux rapports hauteur/largeur les plus courants :
Rapports d'aspect par appareil
Bien que les images soient optimisées sur votre site, leur taille n'est pas redimensionnée. Si vous utilisez une image au format 16:9 sur votre ordinateur, elle sera parfaite sur ordinateur, car un appareil de bureau est large. En revanche, un appareil mobile est beaucoup plus petit ; un format 16:9 peut donc parfois paraître petit.
Pour compenser, vous pouvez utiliser la fonction « Masquer sur l'appareil » pour créer des versions spécifiques à ces appareils ou redimensionner l'image. Les modifications de taille sont indépendantes de l'appareil.
Considérations
Le plus grand n'est pas toujours le meilleur
Télécharger la résolution maximale pour votre site garantit des images haute résolution pour vos clients. Cependant, gardez à l'esprit que les images volumineuses ont un impact considérable sur la vitesse de chargement de votre page. Les images haute résolution étant réduites, les utilisateurs ne remarquent généralement pas la différence de résolution. Il est préférable de télécharger des images aussi grandes que l'usage prévu. Par exemple, si vous avez une image de 300 x 300 px sur votre site, évitez de la télécharger au format 4 000 x 4 000 px.