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

Redimensionner une image

Lorsque vous ajoutez un bloc Image à une page ou un billet 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.

Regarder une vidéo

Avant de commencer

  • Ce guide vous propose de découvrir comment redimensionner les blocs Image (les blocs Image vous permettent d’ajouter des images aux pages Disposition, aux billets de blog et à d’autres zones de contenu dans Squarespace). Pour connaître les autres types d’images, consultez nos informations sur les autres images.
  • Nous vous recommandons de 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 disposition prédéfinie avec un bloc Image (de type espace réservé), ajoutez votre propre image au bloc avant d’essayer de la 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é. La valeur de proportion (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 Espaceur 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 Espaceur.
  2. Faites glisser le Bloc Espaceur à gauche ou à droite du Bloc Image.
  3. Cliquez sur la poignée de redimensionnement et faites-la glisser

Redimensionner une image pour la réduire, à l’aide d’un autre bloc.

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

Arrows_pointing_to_two_Spacer_Blocks_with_an_image_in_between_the_blocks.jpg

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.

Resizing_an_Image_Block_using_a_Text_Block.gif

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 intégré (comme illustré dans l’image ci-dessous) ou un autre logiciel tiers, puis chargez de nouveau l’image.

Conseil : Dans la plupart des cas, l’image recadrée reste de la même largeur sur votre site. Pour modifier la largeur, utilisez l’une des méthodes de ce guide.

image_editor_-_example_crop.jpg

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ît 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 la touche Maj enfoncée pendant que vous faites glisser la poignée de recadrage afin de redimensionner l’image par incréments de 20 pixels. Ceci 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 focaux.
  • Double-cliquez sur la poignée pour annuler le recadrage.
  • Tirez la poignée vers le bas pour zoomer sur l’image.

Decreasing_the_height_of_an_image_using_the_cropping_handle.gif

Cliquez sur la poignée de recadrage et faites-la glisser vers le bas pour recadrer l’image horizontalement. Un zoom est alors effectué sur l’image en rognant les côtés.

Dragging_the_cropping_handle_down_to_horizontally_crop_an_image.gif

Redimensionner avec les styles des blocs Image

Les paramètres de style des dispositions Carte, Chevauchement et Collage proposent une option de redimensionnement.

  1. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur Blocs Image.
  2. Faites défiler jusqu’à la section pour cette disposition. (Par exemple, faites défiler jusqu’à la section Bloc Image : Carte.)
  3. Utilisez l'ajustement Largeur de l'image pour la redimensionner. La taille du texte de l’image s’adaptera automatiquement à l’espace disponible.
  4. Cliquez sur Enregistrer.
  1. Dans le Menu principal, cliquez sur Design, puis sur Styles du site.
  2. Faites défiler jusqu’à la section pour cette disposition. (Par exemple, faites défiler jusqu’à la section Bloc Image : Carte.)
  3. Utilisez l'ajustement Largeur de l'image pour la redimensionner. La taille du texte de l'image s'ajustera automatiquement pour s'adapter à l’espace disponible.
  4. Cliquez sur Enregistrer.
Astuce : cette opération affecte tous les blocs Image qui utilisent cette disposition.

Étirer l'image pour remplir le bloc

Si vous utilisez la disposition Inline et que votre image est plus étroite que le bloc Image, l’image conservera sa largeur d’origine. Un espace vide se trouve alors de chaque côté de l’image au sein du bloc. Ceci permet de conserver la qualité initiale de l’image.

Pour remplir l’espace vide et faire en sorte que l’image occupe toute la largeur du bloc :

  1. Ouvrez le bloc Image puis cliquez sur Design.
  2. Activez l’option Étirer.

Conseils :

  • Étirer l'image peut affecter sa qualité.
  • Pour limiter le besoin d'étirement, nous vous recommandons de 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 sera réduite en fonction du bloc sans être rognée.
  • Les autres mises en page s’étirent automatiquement.

Arrow_pointing_to_the_Stretch_setting_in_the_Inline_Image_Block.jpg

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
Styles de site

É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 : 159 sur 580