Qu’est-ce qu’un rapport d’aspect 1:1 ?

Un rapport d’aspect 1:1 définit une image carrée dont la largeur et la hauteur sont égales. Modifier une dimension sans ajuster l’autre produit un rapport différent ou déforme le contenu.

Le rapport d’aspect est une proportion, pas un nombre de pixels : les images 300×300 et 2,000×2,000 ont donc toutes deux un rapport 1:1. Une source de toute autre forme atteint un rapport 1:1 par l’une de trois méthodes. Le recadrage redimensionne l’image jusqu’à ce qu’elle couvre le carré, puis supprime ce qui dépasse. L’ajout de marges redimensionne l’image pour qu’elle tienne dans le carré et remplit les bandes restantes avec une couleur d’arrière-plan, une technique aussi appelée letterboxing. L’étirement redimensionne indépendamment la largeur et la hauteur et constitue la seule méthode qui modifie les proportions du sujet. Un recadrage centré d’une source au format paysage conserve une part de la largeur égale à la hauteur divisée par la largeur : 56,25 % d’une image 16:9 et 75 % d’une image 4:3. L’ajout de marges conserve la totalité de cette même source, mais l’image ne remplit que cette part du carré : le sujet paraît donc plus petit. Les noms des méthodes varient selon les outils : CSS et sharp utilisent cover, contain et fill pour le recadrage, l’ajout de marges et l’étirement. Dans ces outils, fill signifie donc étirement, tandis que Transloadit nomme ces trois méthodes fillcrop, pad et stretch.

Une largeur et une hauteur identiques en pixels donnent-elles toujours un affichage carré ? Uniquement si les pixels eux-mêmes sont carrés. Une vidéo peut comporter un rapport d’aspect des échantillons (SAR), et FFmpeg définit le rapport d’aspect d’affichage comme largeur / hauteur × SAR. Un flux 720×720 dont le SAR n’est pas 1:1 est donc destiné à un affichage non carré. Vérifiez le SAR, et pas seulement les dimensions de l’image, avant de qualifier une vidéo de 1:1.
Que fait un navigateur avec une image non carrée dans une boîte carrée ? Cela dépend de la boîte qui est carrée. Lorsque l’élément img lui-même est dimensionné en carré, l’image est étirée : la valeur initiale de object-fit est fill, ce qui déforme les contenus dont le rapport diffère de celui de la boîte. À la place, object-fit: cover recadre l’image et object-fit: contain ajoute des bandes. Un parent carré ne suffit pas à l’étirer : dans la mise en page en ligne normale, un élément img dont la largeur et la hauteur sont automatiques utilise les dimensions intrinsèques de l’image. Il conserve donc sa forme et ne s’ajuste pas au parent. La propriété aspect-ratio: 1 ne définit la forme d’une boîte que si au moins une de ses dimensions est automatique. Ces propriétés contrôlent le rendu sans modifier le fichier image.
Quelle partie de l’image reste après un recadrage carré ? Par défaut, le centre : sharp, par exemple, positionne les recadrages cover sur centre. Ses stratégies d’analyse du contenu, attention et entropy, évaluent les zones périphériques selon la fréquence de luminance, la saturation des couleurs et les tons de peau, ou selon l’entropie de Shannon, puis suppriment les bords aux scores les plus faibles. Il s’agit d’heuristiques, pas de détection du sujet : examinez donc un échantillon de vos propres images avant d’appliquer une stratégie à tout un catalogue.
Que rajoute l’ajout de marges au fichier ? Les bandes deviennent de véritables pixels dans une couleur que vous devez choisir, et les valeurs par défaut diffèrent selon les outils : sharp ajoute des marges noires opaques aux sorties contain, sauf si background est défini. Des bandes transparentes nécessitent un format de sortie qui prend en charge la transparence. JPEG ne la prend pas en charge : un JPEG avec des marges comporte donc toujours des bandes opaques, et les zones déjà transparentes dans une source, comme un logo PNG, ne peuvent pas non plus rester transparentes.

Choisissez une sortie 1:1 pour les avatars, les vignettes de produits ou les publications carrées sur les réseaux sociaux. Lorsque la source n’est pas carrée, décidez s’il faut recadrer en supprimant du contenu significatif ou ajouter des marges autour.

Le Robot /image/resize de Transloadit produit un carré lorsque width et height sont égaux et que resize_strategy vaut fillcrop (redimensionner, puis recadrer ce qui dépasse), pad (redimensionner, puis remplir l’espace restant avec background) ou stretch (ignorer le rapport de la source). La stratégie par défaut, fit, préserve au contraire le rapport de la source : des dimensions égales ne suffisent donc pas à produire un carré. L’exemple de la documentation redimensionne une image 400×300 en 100×75. Avec fillcrop, le paramètre gravity sélectionne la zone à conserver ; il vaut center par défaut et accepte les valeurs d’analyse du contenu attention et entropy. Lorsque le sujet est une personne, le Robot /image/facedetect peut recadrer l’image autour des visages détectés.

L’arrière-plan est blanc par défaut. Il remplit les marges et, par défaut, l’arrière-plan des images transparentes devient lui aussi blanc. La documentation indique de définir le paramètre background sur none pour préserver la transparence, ce qui ne fonctionne que si le format de sortie prend en charge la transparence, donc pas en JPEG. La sortie conserve le format d’entrée, sauf si le paramètre format est défini. D’après la documentation, l’utilisation du paramètre gravity avec analyse du contenu nécessite libvips, la stratégie fillcrop, ainsi que les paramètres width et height. Les effets comme sepia ou text et les entrées comme HEIC peuvent plutôt passer par ImageMagick, qui centre le recadrage et ajoute un avertissement à l’Assembly.

Découvrir les fonctionnalités de Transloadit pour les images

Qu’est-ce qu’un rapport d’aspect 1:1 ?

Fonctionnement des rapports d’aspect 1:1

Points clés

Quand les rapports d’aspect 1:1 sont importants

Comment Transloadit facilite l’utilisation des rapports d’aspect 1:1

Références

Transformer vos connaissances sur les médias en une chaîne de traitement opérationnelle