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

La valeur de proportion est le rapport proportionnel entre la largeur et la hauteur d’une image. Grosso modo, cette valeur décrit la forme d’une image.

Les valeurs de proportion sont exprimées par la formule largeur/hauteur. Cela peut être, par exemple, 3:2.

La valeur de proportion d’une image carrée est de 1:1, car sa hauteur et sa largeur sont identiques. La résolution de l’image peut être de 500 px × 500 px ou de 1500 px × 1500 px, mais sa valeur de proportion reste de 1:1.

Prenons un autre exemple : une image de type portrait peut avoir une valeur de proportion de 2:3. Dans ce cas-là, la hauteur est 1,5 fois supérieure à la largeur. Dans ce cas de figure, l’image peut avoir une résolution de 500 px × 750 px, 1500 px × 2250 px, etc.

Valeurs de proportion dans Squarespace

De nombreux ajustements du panneau Styles du site vous permettent de choisir la valeur de proportion pour différents types d’images, comme les miniatures des billets de blog, les images de galerie ou les produits.

  • Par exemple, si vous choisissez la valeur de proportion 3:2 pour les miniatures des billets de blog, toutes les miniatures des billets sur votre page Blog seront recadrées pour obtenir cette forme.
  • Étant donné que les images se mettent à l’échelle pour s’adapter aux différentes largeurs de navigateur, leurs dimensions ne sont pas exactes (comme par exemple, 750 px × 500 px), mais elles auront toujours la même forme.
  • En commençant par des images qui présentent la même valeur de proportion, vous pouvez anticiper leur recadrage.

Les valeurs de proportion exactes disponibles dans le panneau Styles du site varient selon le modèle. Voici un exemple de page Blog dans le modèle Brine :

brine-blog-example.png

Dans certains modèles, le panneau Styles du site vous donne la possibilité d’ignorer les valeurs de proportion. Dans ce cas-là, vos images conserveront leur forme initiale. Par exemple, sur la page Blog du modèle Skye, vous pouvez sélectionner Recadrage de l’image : aucun.

skye-blog-example.png

Recadrer selon une valeur de proportion

En plus d’utiliser les options Styles du site intégrées, vous pouvez recadrer manuellement une image selon une certaine valeur de proportion. Par exemple, si vous utilisez des images de produits qui ont la même valeur de proportion, elles seront toutes recadrées de la même façon sur votre site.

Option 1 - Recadrer selon une forme prédéfinie

Utilisez l’éditeur d’image intégré pour recadrer les images selon une certaine forme. Après avoir ouvert l’éditeur, utilisez l’outil de recadrage pour sélectionner une valeur de proportion prédéfinie.

Astuce : si vous préférez effectuer cette opération avant de télécharger l’image, sachez que certains outils tiers proposent des options de valeur de proportion prédéfinies.

Option 2 - Dimensions personnalisées

Si vous souhaitez recadrer des images selon une valeur de proportion personnalisée qui n’est pas disponible dans notre éditeur d’image intégré, utilisez un éditeur tiers.

Étant donné que les images peuvent avoir la même valeur de proportion sans avoir les mêmes dimensions, il est préférable de les recadrer selon une certaine valeur de proportion plutôt que d’essayer d’obtenir exactement les mêmes dimensions. Pour optimiser le résultat, recadrez le côté le plus court en fonction du côté le plus long.

  • Par exemple, si la résolution de votre image est de 1500 px × 1200 px et que vous souhaitez atteindre une valeur de proportion de 3:1, recadrez le côté le plus court pour que l’image soit de 1500 px × 500 px.
  • Évitez de mettre à l’échelle le côté le plus long, car cela pourrait rendre votre image floue.

Pour déterminer la longueur que doit avoir le côté le plus court, utilisez un calculateur de valeur de proportion comme celui-ci. Notez qu’il s’agit d’une application tierce qui n’est pas prise en charge par l’assistance Squarespace.

  1. Trouvez les dimensions de l’image sur votre ordinateur.
  2. Dans le calculateur de valeur de proportion, entrez les valeurs L1 et H1 sur la gauche pour identifier la valeur de proportion actuelle.
  3. Ajustez le côté le plus court pour atteindre la valeur de proportion souhaitée.

Page banners

Les bannières de page ne proposent pas de valeur de proportion ou de dimensions prédéfinies, car elles s’étirent et changent de forme pour s’adapter aux différents navigateurs.

  • Il peut être utile de recadrer l’image pour l’adapter à la forme de votre bannière (large et courte). Il n’y a pas de dimensions exactes à viser pour ce recadrage, ceci quel que soit le modèle. Vous devez donc le faire à l’œil. En téléchargeant des images qui ont la même valeur de proportion, vous pouvez anticiper la façon dont elles seront recadrées pour s’adapter au conteneur de la bannière.
  • La plupart des modèles vous permettent d’ajuster la hauteur de la bannière.
  • Dans le cas des bannières à hauteur fixe, comme celles des modèles Montauk ou Skye, choisissez la même valeur de proportion pour toutes vos images de bannière afin de créer une apparence uniforme.

Valeurs de proportion exprimées en pourcentage

Pour les galeries en grille de l’index dans la famille Brine, l’ajustement Valeur de proportion est exprimé en pourcentage et vous pouvez l’ajuster à l’aide d’un curseur.

  • Le curseur affiche des valeurs comprises entre 0 et 160.
  • En le réglant sur 100, vous obtenez des images carrées.
  • Les valeurs inférieures à 100 correspondent à un format paysage.
  • Les valeurs supérieures à 100 correspondent à un format portrait.

Pour obtenir une valeur de proportion exacte, divisez la hauteur par la largeur. Par exemple :

  • Valeur de proportion 2:3 : 3 ÷ 2 = 1,5, donc vous devez régler le curseur sur 150.
  • Valeur de proportion 3:2 : 2 ÷ 3 = 0,667, donc vous devez entrer 66,7 à côté du curseur.

Exemples de valeurs de proportion

Voici quelques valeurs de proportion courantes et ce à quoi elles correspondent visuellement.

1-1.png

2-3.png

3-2.png

4-3.png

16-9.png

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