Conseils pour redimensionner les images de votre site.

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.

Regarder une vidéo

Valeurs de proportion dans Squarespace

De nombreuses options de style vous permettent de choisir la valeur de proportion pour différents types d’images, comme les images mises en avant des publications des billets de blog, les images de galerie ou les produits.

• Par exemple, si vous choisissez la valeur de proportion 3:2 pour les images mises en avant des publications des billets de blog, toutes les images mises en avant des publications 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.
• Vous pouvez modifier la hauteur de certains blocs Image à l’aide de la poignée de recadrage. Pour en savoir plus sur le recadrage de vos images, consultez l’article Résoudre les problèmes de recadrage.

Les options exactes des valeurs de proportion disponibles varient selon la version et le template. Voici un exemple de page Blog dans le template Brine :

Vous avez la possibilité d’ignorer les valeurs de proportion avec certains ajustements de style. Dans ce cas-là, vos images conserveront leur forme initiale. Par exemple, sur la page Blog du template Skye, vous pouvez sélectionner Recadrage de l’image : aucun.

Recadrer selon une valeur de proportion

En plus d’utiliser les options de style 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 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.

Bannières de page

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

• Avant de télécharger des images pour vos bannières, suivez nos conseils de formatage des images de bannière.
• Vous pouvez utiliser notre éditeur dʼimage intégré pour recadrer lʼimage. Si vous avez besoin dʼaide pour recadrer des bannières, consultez lʼarticle Résoudre les problèmes de recadrage.
• La plupart des templates vous donnent la possibilité de modifier la taille de votre bannière, y compris la hauteur.
• Dans le cas des bannières à hauteur fixe, comme celles des templates Montauk ou Skye, choisissez la même valeur de proportion pour toutes vos images de bannière afin de créer une apparence uniforme.

Valeur de proportion des images de produits

Il est important de rendre vos images de produit attrayantes pour les clients potentiels. Pour cela, vous pouvez paramétrer le rapport longueur/largeur des images de vos produits sur les pages de la boutique et les pages de détails des produits. Pour savoir comment modifier les images de vos produits, consultez Images produit.

Si les images de vos produits apparaissent rognées, consultez la section Résoudre les problèmes de recadrage.

Valeurs de proportion pour les vidéos

Pour les vidéos que vous mettez en ligne directement sur votre site, la valeur de proportion de la vidéo correspondra au format du fichier que vous avez chargé. La plupart des vidéos chargées s’affichent dans un lecteur avec une valeur de proportion de 16:9, de sorte que des barres noires ou des espaces vides peuvent s’afficher sur le côté des vidéos avec d’autres formats d’image. Les vidéos chargées dans les arrière-plans de section sont recadrées et zoomées pour remplir la taille de l’arrière-plan.

Pour les vidéos intégrées, l’image miniature de votre service d’hébergement vidéo détermine la valeur de proportion de votre vidéo. Si vous placez les blocs Vidéo sur des lignes ou utilisez des galeries en grille, les lignes peuvent être inégales.

Si vous utilisez les blocs Galerie et les pages Galerie (version 7.0 uniquement) et que les vidéos ne s’affichent pas correctement, modifiez les styles du site :

• Avec les blocs Galerie, vous pouvez activer Recadrer les images pour configurer les vidéos sur une valeur de proportion uniforme.
• Avec les pages Galerie, vous pouvez définir Valeur de proportion sur un paramètre autre que Auto.

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.