Recadrage selon le contenu : garder le sujet dans le cadre

Kevin van Zonneveld

Cofondateur · Amsterdam, Pays-Bas · Afficher la bio

Lorsque vous recadrez une même photo en bannière large, en vignette carrée et en story verticale, un recadrage centré coupe souvent ce que les visiteurs venaient justement voir. Dès aujourd’hui, le Robot 🤖 /image/resize peut repérer la partie la plus intéressante d’une image et recadrer autour d’elle. Réglez gravity sur attention ou entropy, et vos recadrages suivent le sujet plutôt que le centre géométrique.

Pourquoi un recadrage centré ne suffit pas

La plupart des sites ont besoin de la même image dans plusieurs formats. Avec la stratégie de redimensionnement fillcrop, le Robot redimensionne l’image jusqu’à ce qu’elle couvre les dimensions cibles, puis coupe tout ce qui dépasse. Jusqu’ici, gravity permettait de choisir la partie à conserver, par exemple avec top ou bottom-right. Cela fonctionne lorsque toutes les images de votre catalogue ont la même composition. Cette approche atteint ses limites avec les fichiers téléversés par les utilisateurs, les annonces de places de marché ou les photos de différents photographes, où le sujet peut se trouver n’importe où.

Prenons notre photo de démonstration dans le désert. Le campement se trouve dans le tiers inférieur, sous un vaste ciel étoilé :

Si vous la recadrez depuis le centre en bannière de 1200×400, vous obtenez beaucoup de ciel, avec le campement coupé au bord inférieur :

Laisser le Robot choisir le recadrage

Voici maintenant le même Step avec gravity réglé sur attention. Le Robot cherche la zone la plus susceptible d’attirer le regard et la garde dans le cadre :

Vous pouvez choisir entre deux stratégies :

• attention privilégie les zones à forte fréquence de luminance, à forte saturation des couleurs et aux tons chair. C’est ce qui a permis de repérer le campement éclairé ici.
• entropy conserve la zone contenant le plus d’information visuelle, mesurée par l’entropie de Shannon. Sur la photo du désert, cette stratégie a également gardé le campement dans le cadre, avec un peu plus de ciel au-dessus.

Les deux stratégies s’exécutent au sein de la même opération de redimensionnement. Vous n’avez besoin ni d’un Step supplémentaire, ni d’un modèle d’apprentissage automatique, ni d’une liste de coordonnées par image.

Essayer

Ces Assembly Instructions importent la photo de démonstration et la transforment en bannière comme ci-dessus :

{
  "steps": {
    "imported": {
      "robot": "/http/import",
      "url": "https://demos.transloadit.com/inputs/desert.jpg"
    },
    "banner": {
      "robot": "/image/resize",
      "use": "imported",
      "width": 1200,
      "height": 400,
      "resize_strategy": "fillcrop",
      "gravity": "attention"
    }
  }
}

À côté, enregistrez ce petit script qui exécute l’Assembly avec notre SDK Node.js et affiche chaque résultat :

import { readFile } from 'node:fs/promises'
import { Transloadit } from '@transloadit/node'

const client = new Transloadit({
  authKey: process.env.TRANSLOADIT_KEY,
  authSecret: process.env.TRANSLOADIT_SECRET,
})

const params = JSON.parse(await readFile('crop.json', 'utf8'))
const assembly = await client.createAssembly({ params, waitForCompletion: true })

for (const [step, files] of Object.entries(assembly.results)) {
  for (const file of files) {
    console.log(step, `${file.meta.width}x${file.meta.height}`, file.ssl_url)
  }
}

Installez le SDK, ajoutez vos informations d’authentification et exécutez le script :

npm install @transloadit/node
export TRANSLOADIT_KEY=MY_AUTH_KEY
export TRANSLOADIT_SECRET=MY_SECRET_KEY
node crop.mjs

$ node crop.mjs
banner 1200x400 https://…/09dbfdd3….jpg

Remplacez la valeur attention par center, la valeur par défaut, puis relancez le script pour obtenir le recadrage centré présenté plus haut. Pour recadrer les fichiers téléversés par vos utilisateurs plutôt qu’un fichier de démonstration, remplacez le Step /http/import par :original dans un Template. Vous pouvez ensuite ajouter un Step par format, par exemple une vignette carrée et une story 9:16, chacun avec ses propres valeurs pour width, height et gravity.

Quand le recadrage reste centré

Quelques points à garder à l’esprit :

• Utiliser cette option avec fillcrop. attention et entropy choisissent ce qu’il faut conserver lorsque le Robot doit couper l’image pour l’adapter aux dimensions cibles. Avec resize_strategy: "crop", vous fournissez plutôt des coordonnées explicites.
• Certaines options et certains formats utilisent un autre moteur. Quelques fonctionnalités du Robot passent par ImageMagick, où attention et entropy se rabattent sur un recadrage centré. Dans nos tests, c’était le cas pour sepia, les superpositions text et les images HEIC en entrée. Il en va de même pour les autres options propres à ImageMagick, comme clut, monochrome et blur_regions, ainsi que pour les formats d’entrée autres que JPEG, PNG, WebP, GIF, TIFF, JPEG XL et SVG. Dans ce cas, l’Assembly Status contient un avertissement qui nomme le Step, afin que vous puissiez repérer ce comportement dans vos résultats. Vous pouvez le contourner en répartissant le traitement entre plusieurs Steps. Convertissez d’abord le fichier HEIC en JPEG, recadrez ensuite avec attention, puis ajoutez du texte ou des effets dans un dernier Step /image/resize qui utilise le résultat recadré.
• Il s’agit d’une heuristique, pas d’un détecteur d’objets. attention analyse les détails, la saturation et les tons chair, sans identifier ce que représente réellement l’image. Lorsque nous avons recadré notre photo de démonstration du caméléon en story 9:16, le recadrage centré (à gauche) a conservé l’œil, tandis que attention (à droite) a privilégié les feuilles éclairées par le soleil à côté :

Essayez les deux stratégies sur un échantillon de vos propres images avant de les appliquer à l’ensemble de votre catalogue. Si vos images sont principalement des portraits, le Robot 🤖 /image/facedetect peut recadrer autour des visages qu’il trouve. Nous avons présenté ses options dans Exploration du nouveau paramètre « faces » EN (English).

Commencer

Le recadrage selon le contenu est désormais disponible dans le Robot /image/resize et est facturé comme tout autre redimensionnement. La documentation de gravity répertorie toutes les valeurs acceptées. Si vous n’avez pas encore de compte, vous pouvez vous inscrire gratuitement et exécuter l’exemple ci-dessus en quelques minutes. Si vous avez des questions concernant vos propres images, contactez-nous.