Proporção de imagem: 1:1, 4:5, 9:16, 16:9 e outras

Proporção de tela é o formato de uma imagem: a largura comparada com a altura, escrita com dois números, como 16:9. Um vídeo de 1920×1080 e uma miniatura de 1280×720 têm tamanhos diferentes, mas a mesma proporção 16:9, então um vira o outro sem corte. A maioria dos problemas de design com “o tamanho errado” são, na verdade, problemas com o formato errado.

As proporções mais comuns e onde são usadas

Os tamanhos exatos em pixels de cada plataforma estão em tamanhos de imagem para redes sociais. Repare como são poucos os formatos: se você cria bem em 1:1, 4:5, 9:16 e 16:9, consegue cobrir quase toda a presença de uma marca nas redes.

Como calcular a proporção de tela

Pegue a largura e a altura e divida as duas pelo maior número que cabe exatamente em cada uma, o chamado maior divisor comum. O que sobra é a proporção na forma mais simples.

1. 1

   Comece pelo tamanho

   Por exemplo, 1080×1350, um post em retrato no Instagram.

2. 2

   Encontre o maior divisor comum

   O maior número que divide 1080 e 1350 exatamente é 270.

3. 3

   Divida os dois lados

   1080 ÷ 270 = 4 e 1350 ÷ 270 = 5. A proporção é 4:5.

4. 4

   Ou use um decimal

   Divida a largura pela altura: 1080 ÷ 1350 = 0,8. Decimais ajudam com formatos estranhos como 1200×630, que dá cerca de 1,91, daí 1,91:1.

Se você não quiser fazer a conta à mão, estas poucas linhas de JavaScript fazem o mesmo no console do navegador.

const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720

Como converter tamanhos sem mudar o formato

Para redimensionar uma imagem mantendo a proporção, use uma fórmula: nova altura = nova largura × altura da proporção ÷ largura da proporção. Para um quadro 16:9 com 1280 pixels de largura, fica 1280 × 9 ÷ 16 = 720. Para um quadro 4:5 com 1600 pixels de largura, fica 1600 × 5 ÷ 4 = 2000.

O caminho inverso é igualmente simples: nova largura = nova altura × largura da proporção ÷ altura da proporção. Um vídeo 9:16 que precisa ter 1280 de altura tem 1280 × 9 ÷ 16 = 720 de largura. Se o resultado sair com decimal, arredonde para o pixel inteiro mais próximo; a diferença é invisível.

O que acontece quando você muda a proporção

Mudar a escala mantém o formato. Mudar a proporção não, e você tem só três opções honestas: cortar parte da imagem, acrescentar espaço em volta ou reorganizar o design para o novo formato. A quarta opção, esticar, deforma cada letra e cada círculo, e as pessoas percebem na hora.

É isso que o redimensionamento do Gradiently faz no Pro: escolha os tamanhos de que precisa e cada cópia é diagramada de novo para o seu formato, enquanto o Mark por trás é renderizado do zero em cada proporção, em vez de ser recortado de uma única imagem. Um visual, todos os tamanhos mostra o passo a passo.

Qual proporção escolher para um post

Quando uma plataforma aceita vários formatos, escolha o que ocupa mais espaço na tela do celular. No Instagram é o 4:5, mais alto que o quadrado e o que melhor sobrevive ao corte da grade do perfil; tamanho de post no Instagram explica por quê. No Pinterest, o pin 2:3 é o padrão; pins mais longos existem, mas podem ser cortados no feed, como mostra tamanho de pin no Pinterest.

Para qualquer coisa assistida na TV ou no notebook, 16:9 é a escolha segura, e por isso miniaturas do YouTube e slides usam esse formato. Para qualquer coisa vista em tela cheia no celular, 9:16 é o único formato que preenche tudo. Na dúvida, crie primeiro as versões vertical e widescreen: o quadrado e o retrato ficam confortavelmente entre as duas.

Proporção em CSS

Na web, a propriedade CSS aspect-ratio mantém uma caixa no formato certo em qualquer largura, o que evita que o layout pule enquanto imagens e vídeos carregam. Ela funciona em todos os navegadores atuais; veja a referência de aspect-ratio da MDN.

.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}

As proporções também importam na impressão e no vídeo, com convenções próprias. Para formatos de vídeo, veja tamanhos de vídeo para redes sociais e, para a relação entre pixels e tamanho físico, DPI vs PPI.