Recorte según el contenido: mantén el sujeto en el encuadre

Kevin van Zonneveld

Cofundador · Ámsterdam, Países Bajos · Mostrar bio

Cuando recortas una foto para crear un banner ancho, una miniatura cuadrada y una historia vertical, un recorte centrado suele eliminar justo lo que las personas querían ver. A partir de hoy, el Robot 🤖 /image/resize puede encontrar la parte más interesante de una imagen y recortar alrededor de ella. Establece gravity en attention o entropy, y tus recortes seguirán al sujeto en lugar del centro geométrico.

Por qué no basta con un recorte centrado

La mayoría de los sitios necesitan la misma imagen en varios formatos. Con la estrategia de redimensionamiento fillcrop, el Robot escala la imagen hasta cubrir el tamaño de destino y recorta todo lo que sobresale. Hasta ahora, gravity te permitía elegir qué parte conservar, por ejemplo, top o bottom-right. Eso funciona cuando todas las imágenes de tu catálogo están compuestas de la misma manera. Deja de funcionar con las subidas de usuarios, los anuncios de un marketplace o las fotos de distintos fotógrafos, donde el sujeto puede estar en cualquier lugar.

Tomemos nuestra foto del desierto de la demo. El campamento está en el tercio inferior, bajo un amplio cielo estrellado:

Si la recortas desde el centro para crear un banner de 1200×400, obtienes mucho cielo, con el campamento cortado en el borde inferior:

Deja que el Robot elija el recorte

Ahora, el mismo Step tiene gravity establecido en attention. El Robot busca la región con más probabilidades de atraer la mirada y la mantiene en el encuadre:

Puedes elegir entre dos estrategias:

• attention favorece las áreas con alta frecuencia de luminancia, saturación de color y tonos de piel. Eso fue lo que permitió identificar el campamento iluminado en este caso.
• entropy conserva la región con más información visual, medida como entropía de Shannon. En la foto del desierto, también mantuvo el campamento en el encuadre, con un poco más de cielo por encima.

Ambas estrategias se ejecutan dentro de la misma operación de redimensionamiento. No necesitas un Step adicional, un modelo de aprendizaje automático ni una lista de coordenadas por imagen.

Pruébalo

Estas Assembly Instructions importan la foto de la demo y la convierten en el banner de arriba:

{
  "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"
    }
  }
}

Junto a ese archivo, guarda este pequeño script que ejecuta la Assembly con nuestro SDK de Node.js e imprime cada resultado:

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)
  }
}

Instala el SDK, añade tus credenciales y ejecútalo:

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

Cambia attention a center, que es el valor predeterminado, y vuelve a ejecutarlo para obtener el recorte centrado anterior. Para recortar las subidas de tus usuarios en lugar de un archivo de demo, sustituye el Step /http/import por :original en un Template. A partir de ahí, puedes añadir un Step por formato, como una miniatura cuadrada y una historia de 9:16, cada uno con sus propios valores de width, height y gravity.

Cuándo sigues obteniendo un recorte centrado

Ten en cuenta lo siguiente:

• Úsalo con fillcrop. attention y entropy eligen qué conservar cuando el Robot tiene que recortar la imagen para ajustarla. Con resize_strategy: "crop", proporcionas coordenadas explícitas en su lugar.
• Algunas opciones y formatos usan un motor diferente. Algunas funciones del Robot se ejecutan mediante ImageMagick, y en ese caso attention y entropy recurren a un recorte centrado. En nuestras pruebas, eso ocurrió con sepia, las superposiciones de text y las imágenes de entrada HEIC. Lo mismo sucede con otras opciones exclusivas de ImageMagick, como clut, monochrome y blur_regions, y con los formatos de entrada distintos de JPEG, PNG, WebP, GIF, TIFF, JPEG XL y SVG. Cuando eso sucede, el Assembly Status incluye una advertencia que identifica el Step, para que puedas detectarlo en tus resultados. Puedes evitarlo dividiendo el trabajo en Steps. Primero convierte HEIC a JPEG, después recorta con attention y añade texto o efectos en un Step final de /image/resize que use el resultado recortado.
• Es una heurística, no un detector de objetos. attention analiza los detalles, la saturación y los tonos de piel, no lo que realmente aparece en la imagen. Cuando recortamos nuestra foto del camaleón de la demo para crear una historia de 9:16, el recorte centrado (izquierda) conservó el ojo, mientras que attention (derecha) eligió las hojas iluminadas por el sol que estaban a su lado:

Prueba ambas estrategias con una muestra de tus propias imágenes antes de aplicarlas a todo un catálogo. Si tus imágenes son principalmente retratos, el Robot 🤖 /image/facedetect puede recortar alrededor de los rostros que encuentra. Explicamos sus opciones en Exploración del nuevo parámetro «faces».

Empieza

El recorte según el contenido ya está disponible en el Robot /image/resize y se factura como cualquier otro redimensionamiento. La documentación de gravity enumera todos los valores aceptados. Si todavía no tienes una cuenta, puedes registrarte gratis y ejecutar el ejemplo anterior en unos minutos. Si tienes preguntas sobre tus propias imágenes, cuéntanos.