Remarque : même si nos guides les plus populaires ont été traduits en espagnol, certains guides sont uniquement disponibles en anglais.
Redimensionner une image

Lorsque vous ajoutez un Bloc Image à une page ou un article de blog, plusieurs facteurs affectent sa taille d'affichage sur votre site :

Ce guide vous aide à comprendre ces facteurs et explique les différentes options disponibles pour redimensionner une image.

Avant de commencer

  • Ce guide concerne le redimensionnement des Blocs Image, qui vous permettent d’ajouter des images aux Pages Normales, aux articles de blog et à d'autres zones de contenu dans Squarespace. Pour en savoir plus sur d'autres types d’images, consultez nos informations sur d'autres images.
  • Nous vous recommandons de télécharger une image d'une largeur comprise entre 1 500 et 2 500 pixels. Cette gamme est le meilleur choix pour des images de qualité, mais qui ne surchargent pas votre site.
  • Si vous utilisez une mise en page de démarrage avec un Bloc Image de démonstration, ajoutez votre propre image au bloc avant de tenter de le redimensionner.

Redimensionner avec d'autres blocs

Lorsque vous ajoutez un Bloc Image, il s'étire pour occuper toute la largeur de la zone de contenu. Vous pouvez réduire la taille du Bloc Image en ajoutant des blocs de chaque côté. Le rapport d'aspect (largeur sur hauteur) reste inchangé. L’ensemble de l’image se réduit donc tout en gardant la même forme.

Créant des espaces vides, les Blocs Séparateurs sont le moyen le plus courant d'y parvenir. Ajoutez-les à droite ou à gauche d'un Bloc Image, puis faites glisser la poignée de redimensionnement pour redimensionner le Bloc Image.

  1. Cliquez sur un Point d'Insertion pour ajouter un Bloc Séparateur.
  2. Faites glisser le Bloc Séparateur à la gauche ou à la droite du Bloc Image.
  3. Faites glisser la poignée de redimensionnement.

Pour centrer l'image, placez des Blocs Séparateurs de la même taille de chaque côté.

Autres blocs

Vous pouvez également appliquer la même méthode avec d'autres blocs, ce qui est particulièrement utile pour le texte situé à côté d'images, comme illustré sur le .gif ci-dessous.

 

Recadrer l’image d'origine

Le recadrage peut modifier la hauteur et la forme d'une image en en coupant des portions. 

Pour recadrer l’image d'origine, utilisez l’ Éditeur d’Image Adobe Creative Cloud intégré, comme illustré dans l’image ci-dessous, ou votre propre logiciel tiers , puis téléchargez à nouveau l’image.

Conseil : dans la plupart des cas, la largeur de l’image recadrée restera inchangée sur votre site. Pour modifier la largeur, utilisez l'une des autres méthodes figurant dans ce guide.

crop-with-adobe.png

Utiliser la poignée de recadrage

Une option possible pour les mises en page Inline et Poster consiste à cliquer et à faire glisser la poignée de recadrage pour recadrer l’image verticalement. Cette opération conserve la largeur de l’image, mais en modifie la hauteur.

  1. Cliquez sur le Bloc Image. Une bordure apparaîtra ainsi qu'une poignée de recadrage circulaire en bas. 
  2. Cliquez sur la poignée de recadrage et faites-la glisser pour recadrer l'image.

Conseils :

  • Maintenez appuyée la touche Maj tout en faisant glisser la poignée de recadrage afin de redimensionner l'image par incréments de 20 pixels. Cela peut vous aider à aligner le bas de l'image sur un autre bloc.
  • La poignée de recadrage s'affiche uniquement après avoir ajouté une image.
  • Vous pouvez choisir un centre pour l'image recadrée à l'aide des points de centrage.
  • Double-cliquez sur la poignée pour annuler le recadrage.
  • Tirez la poignée vers le bas pour zoomer sur l’image.

 

 

Cliquez sur la poignée de recadrage et faites-la glisser vers le bas pour recadrer l'image horizontalement. Cela effectuera un zoom sur l'image en rognant les côtés. 

 

Resize with Site Styles

The CardOverlap, and Collage layouts have a resizing option in Site Styles.

  1. From the Home Menu, click Design, then Site Styles.
  2. Faites défiler jusqu'au champ pour cette mise en page. (Par exemple, faites défiler jusqu'au champ  Image Block: Card [Bloc Image : Carte].)
  3. Utilisez l'ajustement Image Width (Largeur de l'Image) pour la redimensionner. La taille du texte de l'image s'ajustera automatiquement pour s'adapter à l’espace disponible.
Remarque : cette opération affecte tous les Blocs Image avec cette mise en page.

adjust-layout.gif

Étirer l'image pour remplir le bloc

Si vous utilisez la mise en page Inline et que votre image est plus étroite que le Bloc Image, l’image conservera sa largeur d'origine. Vous verrez un espace vide sur chaque côté de l'image au sein du bloc. Cela permet de conserver la qualité d'image de l'originale.

Pour remplir l'espace vide et faire en sorte que l'image occupe toute la largeur de la zone de contenu, ouvrez le Bloc Image, puis cochez Stretch (Étirer). 

Conseils :

  • Étirer l'image peut affecter sa qualité.
  • Pour limiter le besoin d'étirement, nous vous recommandons de télécharger une image d'une largeur comprise entre 1 500 et 2 500 pixels.
  • Si l'image est plus large que la zone du Bloc Image, elle rétrécira pour s'adapter au bloc sans être rognée.
  • Les autres mises en page s’étirent automatiquement.

Options selon la mise en page

Voici une synthèse des différentes options disponibles dans chaque mise en page :

Option Inline Poster Card Overlap Collage Pile
Redimensionner avec des blocs
Recadrer l’image d'origine
Poignée de recadrage
Éditeur 
de Style

Étirer pour remplir n/a n/a n/a n/a n/a

Autres images

D’autres options de votre site permettent d’ajouter des images. Chacune d'entre elles possède ses propres options de redimensionnement :

Conseil : pour tout bloc, vous pouvez utiliser la méthode Redimensionner avec d'autres blocs.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 109 sur 292