Des visuels de haute qualité établissent la base esthétique d’un site web, améliorant l’engagement des utilisateurs et favorisant les conversions de réservations directes.
Pour simplifier la configuration, le créateur de sites télécharge automatiquement et synchronise tes éléments visuels directement depuis le profil de ton établissement et les paramètres d’hébergement dans le PMS Cloudbeds vers la galerie média du site.
Cet article présente les spécifications principales, les critères de dimensions et les procédures de gestion des médias visuels dans Cloudbeds Websites.
Accéder au gestionnaire de médias
- Depuis le menu principal du PMS Cloudbeds, rends-toi dans Marketing digital et sélectionne l’onglet Sites web.
- Clique sur Modifier mon site pour ouvrir l’interface de l’éditeur de site.
- Dans le panneau d’outils de l’éditeur à gauche, sélectionne CMS puis choisis Gestionnaire de médias pour afficher les dossiers d’images de ton établissement déjà remplis.
Gérer les images pour ton site Cloudbeds
Taille par type d’image
L’optimisation peut être désactivée pour les images de fond, le widget image et le widget galerie photo.
- Désactiver l’optimisation des images peut impacter la vitesse de chargement et/ou les performances.
- Largeur image de fond : 2880px
- Bureau : 1920px
- Tablette : 1280px
- Mobile : 640px (vignette)
-
Vignette de blog :
- 160px
- 300px
Directives pour les images
Exigences et types de fichiers image
Chaque fois que vous téléversez une image, jusqu’à 5 copies de taille réduite de cette image sont créées. Le créateur de sites internet insère ensuite automatiquement l’image de taille appropriée sur les sites Bureau, tablette et mobile, garantissant ainsi que les visiteurs de votre site voient toujours l’image adaptée à leur appareil.
Jusqu’à 15 000 fichiers (images, vidéos, extraits audio et autres fichiers inclus) peuvent être téléversés par site, et chaque fichier ne doit pas dépasser 200 Mo.
Exigences système pour Webp
Les versions suivantes sont prises en charge pour les images Webp :
- iPhone : version 14 et 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éversée n’est pas augmentée et seules des images plus petites que l’original sont créées.
- Par exemple, si une image de 2000 px de largeur est téléversée, 5 nouvelles copies optimisées seront créées. Si une image de 100 px de largeur est téléversée, aucune nouvelle image ne sera créée.
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 l'une de tes images dépasse cette limite, mais tu peux vérifier rapidement en multipliant la largeur en pixels par la hauteur.
- La taille de l'image ne doit pas dépasser 200 Mo.
- Téléverser une image plus grande que la limite peut entraîner les erreurs suivantes :
- Les images ne se téléversent pas
- Les images se téléversent, mais les vignettes 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 ligne
Directives sur la taille des images par widget
Carrousel
Le widget carrousel est généralement utilisé avec des images de grande taille pour un effet spectaculaire. Les carrousels s'étendent souvent d'un bord à l'autre, il est donc préférable d'utiliser des images plus larges pour s'adapter au carrousel. Pour les carrousels carrés, utilise un rapport d'aspect égal tel que 1:1.
Il est conseillé de choisir des images avec un bon espacement afin que le contenu principal de l'image ne soit pas coupé lors du redimensionnement. Les rapports d'aspect des images doivent être identiques dans le carrousel pour assurer la cohérence du design.
- Rapports d'aspect courants : 16:9, 3:4
- Tailles de résolution courantes (px) : 1600x900, 1280x720, 1280x960
Les appareils mobiles ont souvent un rapport d'aspect inverse par rapport aux appareils de bureau. Tu devras peut-être utiliser la fonction Masquer sur appareil pour afficher correctement les carrousels sur mobile.
Galerie photo
Le widget galerie photo est le plus flexible pour l'utilisation d'images, car il offre de nombreuses options de mise en page. Par exemple, tu peux avoir une galerie en mosaïque où toutes les images ont la même taille, ou une mosaïque avec des tailles différentes par image.
Le rapport d'aspect des images dans la galerie photo doit refléter la manière dont tu souhaites les afficher.
- Par exemple, les galeries de style carré doivent avoir un rapport 1:1 pour les images.
- Les galeries avec des images hautes doivent avoir des rapports de hauteur plus longs, comme 2:5, ou 200px par 500px.
Les rapports d'aspect des images doivent être identiques pour assurer la cohérence du design. Laisse un peu d'espacement dans l'image pour utiliser l'effet au survol afin que tes images ne soient pas coupées.
- Rapports d'aspect courants : n'importe quel rapport d'aspect.
- Tailles de résolution courantes (px) : n'importe quelle résolution, mais pas plus grande que 1500px pour la rapidité de chargement de la page.
Icônes
Les icônes sont une partie très importante de tout site. Elles servent de repères visuels pour l'information et peuvent apporter un aspect moderne à ton site. Tu peux utiliser des PNG transparents, des JPEG ou des SVG.
- Rapports d'aspect courants : généralement 1:1, mais tout rapport d'aspect fonctionne.
- Tailles de résolution courantes (px) : 200x200, 80x80 ou toute résolution. Les SVG peuvent avoir n'importe quelle résolution.
Les SVG sont des fichiers image contenant du code HTML, ce qui signifie que lorsque tu ajoutes une icône SVG à ton site, tu ajoutes aussi des lignes de code.
- Plusieurs SVG complexes peuvent ajouter des milliers de lignes de code et ralentir le chargement de ton site. Si tu dois utiliser plusieurs icônes SVG sur la même page, nous te recommandons d'en convertir certaines en images classiques (.png, .jpeg, etc.) pour éviter des problèmes de chargement ou de fonctionnement.
Favicons
Les favicons ne sont pas utilisés sur ton site proprement dit, mais s'affichent dans l'onglet lorsque les utilisateurs ouvrent ton site web. Il est recommandé d'utiliser le format ICO. Pour convertir des fichiers image en ICO.
- Rapport d'aspect requis : 1:1
- Tailles de résolution autorisées (px) : 24x24, 36x36, 48x48
Logos
Il est recommandé d’utiliser le format SVG pour les logos, 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 tu téléverses est de petite taille, tu ne perdras pas en qualité.
Visualisation des deux rapports d'aspect les plus courants :
- Rapport d'aspect vs Résolution : Le rapport d'aspect correspond au rapport entre la largeur et la hauteur d’une image. Un rapport d'aspect 16:9 peut correspondre à une image de 16x9 px ou de 1600x900 px. Il s’agit en fait de toute résolution d’image respectant le rapport 16:9.
-
Rapports d'aspect selon l’appareil : Bien que les images soient optimisées sur ton site, cela ne redimensionne pas réellement leur design. Si tu utilises une image au format 16:9 sur un bureau, elle s’affichera parfaitement car un appareil de bureau est large. En revanche, un appareil mobile est beaucoup plus petit, et un rapport d'aspect 16:9 peut parfois paraître petit.
Pour compenser, tu peux soit utiliser la fonction Masquer sur appareil pour créer des versions spécifiques à ces appareils, soit redimensionner les dimensions de l’image pour l’adapter. Les modifications de taille sont indépendantes de l’appareil.
Considérations importantes
Téléverser la plus grande résolution pour ton site garantit que les images de ton site sont en haute résolution pour tes clients.
- Cependant, garde à l'esprit que les images volumineuses ont aussi un impact important sur la vitesse de chargement de ta page. Comme les images en haute résolution sont redimensionnées, les utilisateurs ne remarquent généralement pas la différence de résolution.
- Il est préférable de téléverser des images de la taille à laquelle elles seront utilisées. Par exemple, si tu as une image de 300px par 300px sur ton site, tu ne veux pas la téléverser en 4000px par 4000px.
Commentaires
Vous devez vous connecter pour laisser un commentaire.