Recorte pelo conteúdo: mantenha o elemento principal em quadro

Kevin van Zonneveld

Cofundador · Amsterdã, Países Baixos · Mostrar biografia

Quando você recorta uma foto para criar um banner largo, uma miniatura quadrada e um story vertical, um recorte central muitas vezes elimina justamente o que as pessoas queriam ver. A partir de hoje, o Robot 🤖 /image/resize pode encontrar a parte mais interessante de uma imagem e recortar ao redor dela. Defina gravity como attention ou entropy, e seus recortes seguem o elemento principal em vez do centro geométrico.

Por que um recorte central não basta

A maioria dos sites precisa da mesma imagem em vários formatos. Com a estratégia de redimensionamento fillcrop, o Robot redimensiona uma imagem até que ela cubra o tamanho de destino e corta tudo o que fica de fora. Até agora, gravity permitia escolher qual parte manter, como top ou bottom-right. Isso funciona quando todas as imagens do seu catálogo têm a mesma composição. Mas deixa de funcionar com uploads de usuários, anúncios em marketplaces ou fotos de diferentes fotógrafos, em que o elemento principal pode estar em qualquer lugar.

Veja nossa foto de demonstração do deserto. O acampamento fica no terço inferior, sob um amplo céu estrelado:

Ao recortá-la a partir do centro para criar um banner de 1200×400, você obtém uma grande área de céu, com o acampamento cortado na borda inferior:

Deixe o Robot escolher o recorte

Agora, veja o mesmo Step com gravity definido como attention. O Robot procura a região com maior probabilidade de atrair o olhar e a mantém no enquadramento:

Você pode escolher entre duas estratégias:

• attention favorece áreas com alta frequência de luminância, saturação de cor e tons de pele. Foi isso que destacou o acampamento iluminado neste exemplo.
• entropy mantém a região com mais informação visual, medida pela entropia de Shannon. Na foto do deserto, também manteve o acampamento no enquadramento, com um pouco mais de céu acima dele.

As duas estratégias são executadas na mesma operação de redimensionamento. Você não precisa de um Step extra, de um modelo de aprendizado de máquina nem de uma lista de coordenadas para cada imagem.

Experimente

Estas Assembly Instructions importam a foto de demonstração e a transformam no banner acima:

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

Na mesma pasta, salve este pequeno script que executa a Assembly com nosso SDK para 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)
  }
}

Instale o SDK, adicione suas credenciais e execute o 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

Altere attention para center, que é o padrão, e execute novamente para obter o recorte central mostrado antes. Para recortar os uploads dos seus usuários em vez de um arquivo de demonstração, substitua o Step /http/import por :original em um Template. A partir daí, você pode adicionar um Step por formato, como uma miniatura quadrada e um story de 9:16, cada um com seus próprios valores de width, height e gravity.

Quando o recorte ainda é central

Alguns pontos para ter em mente:

• Use com fillcrop. attention e entropy escolhem o que manter quando o Robot precisa cortar a imagem para ajustá-la ao tamanho. Com resize_strategy: "crop", você fornece coordenadas explícitas.
• Algumas opções e formatos usam um mecanismo diferente. Alguns recursos do Robot usam ImageMagick, e nesse caso attention e entropy recorrem a um recorte central. Nos nossos testes, isso aconteceu com sepia, sobreposições de text e imagens de entrada em HEIC. O mesmo vale para outras opções exclusivas do ImageMagick, como clut, monochrome e blur_regions, e para formatos de entrada diferentes de JPEG, PNG, WebP, GIF, TIFF, JPEG XL e SVG. Quando isso acontece, o Assembly Status inclui um aviso que identifica o Step, para que você possa percebê-lo nos resultados. Você pode contornar isso dividindo o processamento em Steps. Primeiro, converta HEIC para JPEG; depois, recorte com attention; por fim, adicione texto ou efeitos em um Step /image/resize que use o resultado recortado.
• É uma heurística, não um detector de objetos. attention analisa detalhes, saturação e tons de pele, sem identificar o que realmente está na imagem. Quando recortamos nossa foto de demonstração do camaleão para criar um story de 9:16, o recorte central (à esquerda) manteve o olho, enquanto attention (à direita) escolheu as folhas iluminadas pelo sol ao lado dele:

Experimente as duas estratégias em uma amostra das suas próprias imagens antes de mudar o catálogo inteiro. Se suas imagens forem principalmente retratos, o Robot 🤖 /image/facedetect pode recortar ao redor dos rostos que encontrar. Apresentamos suas opções em Explorando o novo parâmetro “faces” EN (English).

Comece a usar

O recorte pelo conteúdo já está disponível no Robot /image/resize e é cobrado como qualquer outro redimensionamento. A documentação de gravity lista todos os valores aceitos. Se você ainda não tem uma conta, pode criar uma gratuitamente e executar o exemplo acima em poucos minutos. Se tiver dúvidas sobre suas próprias imagens, fale com a gente.