Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Résoudre les problèmes de recadrage

Many images on your site will crop either horizontally, vertically, or both. This helps your images look their best within your site's layout and in different browser sizes.

This guide will help you understand the normal cropping that happens in Squarespace and learn how to minimize it as much as possible.

Tip: To crop the original image, use the Image Editor or third party software.

Understanding cropping

Every image on your site is in a container, which is an invisible box that controls how the image displays in relation to other content on the page. When an image is loaded into a container, one of two things happens, depending on the container's settings:

  • Most of the time - The image conforms to the container's dimensions, which vary based on browser width. If the image isn't the same shape as the container, the image crops to fill the container completely.
  • Sometimes - The container’s shape conforms to the dimensions of the image so the whole image displays.

In most cases, images on your site display within the containers' dimensions, and will experience some cropping. This helps images look their best while adapting to different browser sizes.

bryler-overlay.png

Blocs Image

Image Blocks display images at their original height and width ratio, within your site's layout restrictions.

Astuces :

  • Crop the image with the cropping handle. To reset the image to its original dimensions, double-click the cropping handle.
  • After cropping, use the focal point to center the image.
  • Make the image smaller by adding Spacer Blocks on either side.

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 :

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

Images added to site-wide banner images (added within Site Styles) can repeat, display at the banner height or width, or fill the container completely.

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 d'arrière-plan ou la vidéo de votre section apparaît rognée, modifiez la hauteur ou la largeur de la section pour agrandir le cadre de votre image ou de votre vidéo.

Pour en savoir plus, consultez l’article Les sections de page dans la version 7.1

Background images can repeat, display at the browser height or width, or fill the browser screen completely.

Astuces :

  • Use Site Styles to choose how the banner image displays.
  • See our troubleshooting tips for help with mobile display.
  • Images that are more than 2500 pixels along their longest edge can cause issues on mobile devices.
  • When choosing a full-bleed background image, consider how visitors will access your site.

Sections de galerie et pages Galerie

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

Upload and manage images directly in the gallery section, then use the Gallery tab to control how images display. 

Pour en savoir plus, consultez l’article Les sections de galerie dans la version 7.1.

How images appear in your Gallery Page depends on your template. Visit your template's guide to learn how images might crop to fit your Gallery Page’s design.

Blocs Galerie

How images display in a Gallery Block depends on the format: Slideshow, Grid, Carousel, or Stacked.

Astuces :

  • For any format, resize the whole block by adding Spacer Blocks on either side.
  • Slideshow - The gallery’s height is set by the widest image. To avoid cropping or blank space around images, use images with similar aspect ratios.
  • Grid - In the Design tab, use the aspect ratio to crop all images to the same shape, and change the number of thumbnails per row to change their size. Use the focal point to adjust how each image centers.
  • Carousel - Adjust the height with the cropping handle.
  • Stacked - Each image expands to fill the width of the page or column the block is in.

Portfolio and Index Pages

Les pages Portfolio et les pages d’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.

How images appear in an Index Page depends on your template. Visit your template's guide to learn more.

Pages Boutique

How cropping affects product images depends on which version of Squarespace your site is on.

Après avoir téléchargé des images dans les sections de votre boutique, utilisez les réglages de la section boutique pour les modifier. Lorsque vous modifiez une page, cliquez sur l'icône en forme de crayon. Vous pouvez modifier l'espacement, les colonnes, le rapport longueur/largeur et l'alignement du texte. Expérimentez différents réglages de style pour définir l'affichage des images de vos produits. Pour en savoir plus sur la personnalisation de votre page Boutique, consultez les sections Page de collection de la version 7.1.

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'images intégré ou des outils tiers pour recadrer vos images. Vous pouvez également créer une mise en page personnalisée pour vos produits à l'aide des Blocs produits.

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

  • In Site Styles, use the Product Image Auto Crop tweak to choose whether the images crop to the same shape, or display at their original shapes.
  • If you're cropping, use the Product Item Size tweak to set the shape.
  • Use the focal point to adjust where the image centers.
  • If you're not cropping, use the Product Overlay Color tweak to choose the color that displays behind the image.
  • Pour en savoir plus, consultez l’article Personnaliser les pages Boutique

prodpagebackground.png

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.
  • Use the focal point to adjust where the image centers.

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

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.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 14 sur 141