Résoudre les problèmes de recadrage

Étapes à suivre pour minimiser les recadrages indésirables et des conseils pour optimiser le rendu de vos images.

Dernière mise à jour le 31 octobre 2024

De nombreuses images de votre site seront automatiquement 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 lorsque vous le souhaitez.

Astuce

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.

bryler-overlay.png

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 sont recadrés lorsque vous les redimensionnez. Les blocs Image définis sur Ajuster rétrécissent ou s’agrandissent tout en conservant la valeur de proportion d’origine.
  • Dans l’éditeur classique, recadrez les blocs Image avec la poignée de recadrage. Pour rétablir le recadrage d’origine de l’image, double-cliquez sur la poignée de recadrage. Réduisez la taille de l’image sans la recadrer en ajoutant des blocs Espaceur 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.

Dans la version 7.1, vous créez des images de bannière en ajoutant des images d’arrière-plan aux sections de page. Ces images sont toujours plus ou moins recadrées, particulièrement sur les appareils mobiles. Pour personnaliser la bannière, vous pouvez :

  • Modifier la quantité de contenu superposé à la bannière. Une grande quantité de contenu augmentera la hauteur de la bannière et entraînera un recadrage plus important de l’image.
  • Modifier la taille de la bannière.
  • 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 :

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 :

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 recadrée, modifiez la hauteur ou la largeur de la section pour agrandir le cadre de l’image ou de la vidéo.

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.

sections Galerie et pages Galerie

Selon la version de Squarespace qu’il utilise, votre site propose des options de galerie différentes.

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 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 :

  •  Tous les formats : dans l’éditeur classique, redimensionnez 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 valeurs de proportion 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 :

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 votre boutique, utilisez les ajustements de la section Boutique pour personnaliser le style. Lorsque vous modifiez la page, survolez la section Boutique et 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 Boutique. Nous vous recommandons d’utiliser des images de vos produits dont les valeurs de proportion sont similaires. Par exemple, avant de charger des images sur votre site, vérifiez 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

Pour les pages Boutique classiques :

  • 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.
prodpagebackground.png

Avancé

Pour les pages Boutique avancées :

  • Les images sont toujours recadrées selon 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.
  • Pour plus d'aide, consultez l'article sur comment personnaliser les pages Boutique.
advancedprodcutscropping.png

Unique

Consultez les liens suivants pour en savoir plus sur les styles des miniatures pour chacune des pages Boutique uniques :

Pages de couverture

Accéder à cette fonctionnalité

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.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.