O que é uma proporção 1:1?

Uma proporção 1:1 define um quadro quadrado com largura e altura iguais. Alterar uma dimensão sem ajustar a outra produz uma proporção diferente ou distorce o conteúdo.

A proporção é uma relação entre dimensões, não uma contagem de pixels, portanto os quadros 300×300 e 2,000×2,000 são ambos 1:1. Uma imagem de origem de qualquer outro formato chega a 1:1 de uma de três maneiras. O recorte ajusta a escala da imagem até que ela cubra o quadrado e corta o que excede os limites. O preenchimento ajusta a escala da imagem para caber dentro do quadrado e preenche as faixas restantes com uma cor de fundo, técnica também chamada de letterboxing. O esticamento ajusta a escala da largura e da altura de forma independente e é o único método que altera as proporções do objeto retratado. Um recorte centralizado de uma imagem de origem na orientação paisagem mantém uma fração da largura igual à altura dividida pela largura: 56,25% de um quadro 16:9 e 75% de um quadro 4:3. O preenchimento da mesma imagem preserva todo o conteúdo, mas a imagem ocupa apenas essa fração do quadrado, então o objeto retratado parece menor. Os nomes dos métodos variam entre ferramentas: CSS e sharp usam cover, contain e fill para recorte, preenchimento e esticamento, portanto fill significa esticamento nessas ferramentas, enquanto a Transloadit chama os mesmos três métodos de fillcrop, pad e stretch.

Uma imagem com largura e altura iguais em pixels sempre é exibida como um quadrado? Somente quando os próprios pixels são quadrados. Um vídeo pode conter uma proporção de amostra (SAR), e o FFmpeg define a proporção de exibição como largura / altura × SAR, portanto um fluxo 720×720 cujo SAR não seja 1:1 deve ser exibido em um formato não quadrado. Verifique o SAR, não apenas as dimensões do quadro, antes de classificar um vídeo como 1:1.
O que um navegador faz com uma imagem não quadrada em uma caixa quadrada? Depende de qual caixa é quadrada. Quando o próprio elemento img tem dimensões quadradas, a imagem é esticada: o valor inicial de object-fit é fill, o que distorce o conteúdo cuja proporção difere da caixa; object-fit: cover recorta a imagem e object-fit: contain adiciona faixas. Um elemento pai quadrado, por si só, não estica a imagem: no layout em linha normal, um img com largura e altura automáticas usa as dimensões intrínsecas da imagem, portanto ela mantém sua forma e não é ajustada ao elemento pai. aspect-ratio: 1 define a forma de uma caixa somente quando pelo menos uma de suas dimensões é automática. Essas propriedades controlam a renderização e mantêm o arquivo de imagem inalterado.
Qual parte da imagem é preservada em um recorte quadrado? Por padrão, o centro: o sharp, por exemplo, posiciona recortes cover em centre. Suas estratégias sensíveis ao conteúdo, attention e entropy, atribuem pontuações às regiões das bordas com base na frequência de luminância, na saturação de cor e nos tons de pele, ou na entropia de Shannon, e descartam as bordas com menor pontuação. São heurísticas, não detecção do objeto retratado, portanto revise uma amostra das suas próprias imagens antes de aplicar uma dessas estratégias a um catálogo inteiro.
O que o preenchimento adiciona ao arquivo? As faixas se tornam pixels reais em uma cor que você precisa escolher, e os padrões variam entre ferramentas: o sharp preenche a saída contain com preto opaco, a menos que background seja definido. Faixas transparentes exigem um formato de saída que suporte transparência. JPEG não suporta, portanto um JPEG com preenchimento sempre contém faixas opacas, e áreas já transparentes na imagem de origem, como em um logotipo PNG, também não podem continuar transparentes.

Escolha uma saída 1:1 para avatares, miniaturas de produtos ou publicações quadradas em redes sociais. Quando a imagem de origem não for quadrada, decida entre recortar conteúdo relevante ou adicionar preenchimento ao redor.

O Robot /image/resize da Transloadit retorna um quadrado quando width e height são iguais e resize_strategy é fillcrop (ajustar a escala e depois recortar o que excede os limites), pad (ajustar a escala e depois preencher o espaço restante com background) ou stretch (ignorar a proporção de origem). A estratégia padrão, fit, preserva a proporção de origem, portanto dimensões iguais, por si só, não produzem um quadrado: o exemplo documentado redimensiona uma imagem 400×300 para 100×75. Com fillcrop, gravity seleciona a região a preservar; seu padrão é center e aceita os valores sensíveis ao conteúdo attention e entropy. Quando o objeto retratado é uma pessoa, o Robot /image/facedetect pode recortar a imagem ao redor dos rostos detectados.

A cor de fundo padrão é branca. Ela preenche as faixas e, por padrão, o fundo das imagens transparentes também é alterado para branco. A documentação orienta definir background como none para preservar a transparência, o que funciona somente quando o formato de saída suporta transparência, portanto não funciona em JPEG. A saída mantém o formato de entrada, a menos que format seja definido. A documentação informa que o posicionamento sensível ao conteúdo exige libvips, a estratégia fillcrop e os parâmetros width e height. Efeitos como sépia ou texto e entradas como HEIC podem ser processados pelo ImageMagick, que centraliza o recorte e adiciona um aviso à Assembly.

Explore os recursos de imagem da Transloadit

O que é uma proporção 1:1?

Como funcionam as proporções 1:1

Informações essenciais

Quando as proporções 1:1 são importantes

Como a Transloadit ajuda com proporções 1:1

Fontes

Transforme conhecimento sobre mídia em um pipeline funcional