Le recadrage est une technique clé pour améliorer les images . La suppression des informations d'arrière-plan inutiles ou la modification du format d'image d'une image peut améliorer considérablement la concentration du spectateur sur l'image. imgix propose de nombreuses méthodes de recadrage, dont la détection de visage. Ce didacticiel se concentrera sur le recadrage automatique des points d'intérêt ( crop=entropy
) et comment vous pouvez l'utiliser pour recadrer les aspects les plus saillants ou les plus significatifs de l'image. En particulier, les zones à fort contraste sont considérées comme les plus saillantes.
Supposons que nous voulions recadrer l'image suivante pour supprimer une grande partie de l'arrière-plan noir statique de l'image.
umbrella.jpg?w=640
La première étape consiste à définir les paramètres w
et h
, ainsi que le mode fit=crop
. Cela redimensionnera l'image pour remplir les limites de largeur et de hauteur sélectionnées, puis recadrera toutes les données d'image en excès.
fit=crop
largeur : l=200
hauteur : h=200
ajustement : ajustement=recadrage
umbrella.jpg?w=200&h=200&fit=crop
Le recadrage par défaut d'imgix commence au centre de l'image, supprimant les données qui ne correspondent pas aux paramètres donnés. Cependant, en plus de recadrer l'image, nous voulons également que le parapluie soit au centre. Pour ce faire, nous ajoutons crop=entropy
à la chaîne de requête afin que le "milieu" devienne l'aspect le plus saillant de l'image. Le parapluie contraste fortement avec le reste de l'image, il devient donc le centre d'intérêt.
fit=crop&crop=entropy
recadrage : recadrage=entropie
umbrella.jpg?w=200&h=200&fit=crop&crop=entropy
L'objectif était de supprimer une grande partie de l'arrière-plan noir statique pour se centrer sur le sujet. Dans cet exemple, le sujet de l'image était le parapluie rouge, et l'ajout crop=entropy
a permis à la fonctionnalité de recadrage de se centrer autour de lui. Cependant, le sujet d'une image n'est pas toujours un objet inanimé.
Supposons que nous voulions redimensionner et recadrer l'image suivante pour la centrer sur le modèle.
womanlandscape.jpg?w=640
L'image a été prise en utilisant la règle des tiers, permettant une image visuellement attrayante tout en maintenant le modèle décentré. Cependant, nous souhaitons également créer des extraits plus petits de l'image à utiliser à plusieurs endroits sur un site Web.
fit=crop
womanlandscape.jpg?w=200&h=200&fit=crop
Étant donné que la fonctionnalité de recadrage se concentre sur le centre de l'image et que le modèle est décentré, elle n'apparaît pas entièrement dans l'extrait. Nous pouvons utiliser la fonctionnalité de recadrage de détection de visage pour centrer l'image autour de son visage.
fit=crop&crop=faces
womanlandscape.jpg?w=200&h=200&fit=crop&crop=faces
Le mode de recadrage de détection de visage a détecté avec succès son visage et a centré l'image autour de lui. Cependant, nous sommes également intéressés par sa tenue, et ce n'est pas entièrement dans le cadre. Le genou du modèle est partiellement masqué, nous ajoutons donc à la place crop=entropy
afin que toute la tenue soit incluse dans la scène.
fit=crop&crop=entropy
womanlandscape.jpg?w=200&h=200&fit=crop&crop=entropy
Alors que le mode de recadrage du visage recherche les visages et se concentre sur eux pour le recadrage, le mode de recadrage entropique recherche les zones à contraste élevé et se concentre sur celles-ci.
fit=crop
fit=crop
Dans la figure ci-dessus, nous avons modifié l'image pour mettre en évidence les zones de contraste élevé de l'image. La version modifiée montre le point d'intérêt de l'image, dans ce cas, la tête de la salamandre. Le mode de recadrage entropique a ignoré la couleur statique de l'image, se concentrant plutôt sur les zones où le noir et le blanc se rencontrent - les couleurs vives de la salamandre offrent un contraste élevé par rapport à son arrière-plan.
Dans les exemples ci-dessous, cette capacité du mode de recadrage entropique à se concentrer sur les zones à contraste élevé maintient la salamandre centrée en tant que sujet de l'image, quelle que soit l'orientation portrait ou paysage. En supposant que vos images présentent des zones à contraste élevé de la même manière, cela vous permet de diriger automatiquement vos images en utilisant crop=entropy
pour s'adapter à de nombreuses tailles et rapports d'aspect différents pour différentes conceptions.
fit=crop&crop=entropy
Également publié ici.
Pour en savoir plus, consultez la page de documentation imgix .