Étapes à suivre pour minimiser les recadrages indésirables et des conseils pour optimiser le rendu de vos images.
De nombreuses images de votre site seront recadrées horizontalement, verticalement, voire les deux. L’aspect de vos images est ainsi optimisé selon la disposition de votre site, quelle que soit la taille de la fenêtre du navigateur.
Ce guide vous aidera à comprendre le recadrage normal qui se produit dans Squarespace et à découvrir comment le réduire autant que possible.
Conseil : pour recadrer l’image d’origine, utilisez l’éditeur d’image ou un logiciel tiers.
Comprendre le recadrage
Chaque image de votre site se trouve dans un conteneur, une zone invisible qui gère l’affichage de l’image par rapport aux autres contenus de la page. Lorsqu’une image est chargée dans un conteneur, vous pouvez être confronté(e) à l’une des deux situations suivantes, en fonction des paramètres du conteneur :
- La plupart du temps - L’image s’adapte aux dimensions du conteneur, qui varient en fonction de la largeur du navigateur. Si l’image n’a pas la même forme que le conteneur, elle est recadrée de manière à occuper tout le conteneur.
- Parfois - La forme du conteneur s’adapte aux dimensions de l’image, de sorte que toute l’image s’affiche.
Habituellement, les images de votre site s’affichent dans les dimensions des conteneurs et subissent un certain recadrage. Vos images sont ainsi plus belles tout en s’adaptant à différentes tailles de navigateurs.
Blocs Image
Les blocs Images affichent les images à leur rapport de hauteur et de largeur d'origine, dans le cadre des restrictions de disposition de votre site.
Astuces :
- Dans l’Éditeur intuitif, les blocs Image définis sur Remplir se recadrent lorsque vous les redimensionnez.Les blocs Image définis sur Ajuster rétrécissent ou s’agrandissent.
- Dans l’éditeur classique, recadrez les blocs Image avec la poignée de recadrage. Pour rétablir les dimensions d’origine de l’image, double-cliquez sur la poignée de recadrage. Réduisez la taille de l’image en ajoutant des blocs espaceurs de chaque côté.
- Une fois l’image recadrée, utilisez le point focal pour la centrer.
Bannières
Si vos images de bannière ont la même valeur de proportion, il est plus facile de prévoir leur recadrage. Assurez-vous d’optimiser vos images en suivant nos conseils de mise en forme des images de bannière.
Il existe d’autres moyens de contrôler le recadrage des bannières de votre site, selon la version de Squarespace qu’utilise votre site.
Les bannières sont toujours recadrées dans une certaine mesure, en particulier sur mobile. Pour personnaliser la bannière, vous pouvez :
- Modifier le style de lʼimage et du texte de la bannière .
- Modifier la taille de la bannière, notamment la hauteur et la largeur.
- Utiliser le point focal pour modifier la façon dont lʼimage se centre.
Pour savoir comment vos bannières apparaissent sur les appareils mobiles, consultez lʼarticle Comment mon site sʼaffichera-t-il sur les appareils mobiles ?
Bannières de page
À quelques exceptions près, les bannières de page sont toujours plus ou moins recadrées, en particulier sur les appareils mobiles. Le degré de recadrage dépend de la hauteur de la bannière et de la largeur du navigateur.
Astuces :
- Apprenez à personnaliser les bannières de votre site et à définir leur hauteur.
- Utilisez le point focal pour ajuster le centrage de l’image.
Bannières de site
Les images ajoutées aux images de bannières sur l'ensemble du site (ajoutées dans les styles de site) peuvent se répéter, s'afficher à la hauteur ou à la largeur de la bannière ou remplir complètement le conteneur.
Astuces :
- Utilisez les styles de site pour définir l'affichage de l'image de la bannière.
- Choisissez des réglages qui soient lisibles sur un mobile comme sur un ordinateur.
Images ou vidéos d’arrière-plan
La méthode à suivre pour contrôler le recadrage des images ou vidéos d’arrière-plan dépend de la version de Squarespace qu’utilise votre site.
Si l’image ou la vidéo d’arrière-plan de section est rognée, modifiez la hauteur ou la largeur de la section pour agrandir le cadre de l’image ou de la vidéo.
Pour en savoir plus, consultez l’article Sections de page.
Les images d’arrière-plan peuvent se dupliquer, s’afficher à la hauteur ou à la largeur du navigateur ou occuper tout l’écran du navigateur.
Astuces :
- Utilisez les styles de site pour choisir l'affichage de l'image de la bannière.
- Consultez nos conseils de dépannage pour obtenir de l’aide sur l’affichage mobile.
- Les images de plus de 2 500 pixels pour le bord le plus long peuvent causer des problèmes sur les appareils mobiles.
- Lorsque vous choisissez une image d’arrière-plan en pleine page, pensez à la façon dont les visiteurs peuvent accéder à votre site.
Sections de galerie et pages Galerie
Selon la version de Squarespace qu’il utilise, votre site propose des options de galerie différentes.
- La version 7.1 utilise des sections de galerie.
- La version 7.0 utilise des pages Galerie.
Chargez et gérez les images directement dans la section Galerie, puis utilisez l'onglet Galerie pour contrôler l'affichage des images.
Pour en savoir plus, consultez l’article Sections de galerie.
La façon dont les images apparaissent dans votre page Galerie dépend de votre template. Consultez le guide de votre template pour savoir comment les images peuvent être recadrées en fonction de la conception de votre page Galerie.
Blocs Galerie
L'affichage des images dans un bloc Galerie dépend du format : diaporama, grille, carrousel ou empilé.
Astuces :
- Pour n’importe quel format, vous pouvez redimensionner l’ensemble du bloc en ajoutant des blocs Espaceur de chaque côté.
- Diaporama - La hauteur de la galerie est définie par l’image la plus large. Pour éviter le recadrage ou l’espace vide autour des images, utilisez des images avec des proportions similaires.
- Grille - Dans l’onglet Design, utilisez la valeur de proportion pour recadrer toutes les images à la même forme et changez le nombre de miniatures par ligne pour modifier leur taille. Utilisez le point focal pour ajuster le centrage de chaque image.
- Carrousel - Ajustez la hauteur à l’aide de la poignée de recadrage.
- Empilé - Chaque image s’agrandit de manière à couvrir toute la largeur de la page ou de la colonne dans laquelle se trouve le bloc.
Portfolio et pages Index
Les pages Portfolio et les pages Index sont des types de pages différents selon les versions de Squarespace, mais leur fonctionnement est similaire :
- La version 7.1 utilise des pages Portfolio.
- La version 7.0 utilise des pages Index.
Survolez une section de portfolio pour ajouter une image, puis utilisez l’onglet Galerie pour contrôler son affichage.
Pour en savoir plus, consultez l’article Pages Portfolio.
La façon dont les images apparaissent dans une page Index dépend de votre template. Consultez le guide de votre template pour en savoir plus.
Pages Boutique
La façon dont le recadrage affecte les images des produits dépend de la version de Squarespace qu’utilise votre site.
Après avoir chargé des images dans les sections de votre boutique, utilisez les ajustements de la section Boutique pour personnaliser le style. Lorsque vous modifiez une page, cliquez sur l’icône crayon. Vous pouvez modifier l’espacement, les colonnes, la valeur de proportion et l’alignement du texte. Essayez différents ajustements de style pour définir l’affichage des images de vos produits. Pour en savoir plus sur la personnalisation de votre page Boutique, consultez l’article Sections de page de collection.
Valeur de proportion des images de produits
Il n'est pas possible de recadrer automatiquement les images de produits dans les pages de la boutique. Nous recommandons que les images de vos produits aient des rapports longueur/largeur similaires. Par exemple, avant de télécharger des images sur votre site, assurez-vous que les images de vos produits sont toutes orientées en paysage ou en portrait.
Si les images de vos produits ont des orientations différentes, utilisez notre éditeur d’image intégré ou des outils tiers pour recadrer vos images. Vous pouvez également créer une disposition personnalisée pour vos produits à l’aide des blocs Produit.
La façon dont les images de vos produits sont recadrées sur la page de destination dépend du type de page Boutique de votre template.
Classique
- Dans les styles de site, utilisez le réglage Recadrage automatique de l'image produit pour choisir si les images doivent être recadrées à la même forme ou si elles doivent s'afficher dans leurs formes d'origine.
- Si vous souhaitez recadrer, utilisez le réglage Taille du produit pour définir la forme.
- Utilisez le point focal pour ajuster le centrage de l’image.
- Si vous ne souhaitez pas recadrer, utilisez le réglage Couleur de superposition du produit pour choisir la couleur qui s'affiche derrière l'image.
- Pour plus d'aide, consultez l'article sur comment personnaliser les pages Boutique.
Avancé
- La page Boutique avancée recadre toujours les images à la même forme. Cela permet de donner à votre page une apparence homogène.
- Pour définir la forme de toutes les images de votre page Boutique, utilisez l’ajustement Valeur de proportion de l’image dans la section Produits : Disposition du panneau Styles du site.
- Utilisez le point focal pour ajuster le centrage de l’image.
Unique
Consultez les liens suivants pour en savoir plus sur les styles des miniatures pour chacune des pages Boutique uniques :
Pages de couverture
La version 7.1 ne prend pas en charge les pages de couverture.
Les pages de couverture sont toujours plus ou moins recadrées, particulièrement sur les appareils mobiles. Le degré de recadrage dépend de la hauteur de l’image, de la largeur du navigateur et de la disposition choisie.