Proporções de imagem explicadas: 1:1, 4:5, 9:16, 16:9 e mais

A proporção de imagem é a forma de uma imagem: a sua largura face à sua 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, por isso um escala para o outro sem cortes. A maioria dos problemas de design com o “tamanho errado” são, na verdade, problemas com a forma errada.

As proporções comuns e onde se usam

Os tamanhos exatos em píxeis para cada plataforma estão em tamanhos de imagem para redes sociais. Repara em quão poucas formas existem: se conseguires desenhar bem em 1:1, 4:5, 9:16 e 16:9, cobres a maior parte da presença social de uma marca.

Como calcular uma proporção de imagem

Pega na largura e na altura e divide ambas pelo maior número que as divide exatamente, o máximo divisor comum. O que sobra é a proporção na forma mais simples.

1. 1

   Parte do tamanho

   Digamos 1080×1350, uma publicação vertical de Instagram.

2. 2

   Encontra o máximo divisor comum

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

3. 3

   Divide os dois lados

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

4. 4

   Ou usa um decimal

   Divide a largura pela altura: 1080 ÷ 1350 = 0,8. Os decimais dão jeito para formas difíceis como 1200×630, que é cerca de 1,91, daí 1,91:1.

Se preferires não fazer à mão, estas poucas linhas de JavaScript fazem o mesmo na consola de um 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

Converter tamanhos sem mudar a forma

Para escalar uma imagem mantendo a proporção, usa uma só fórmula: nova altura = nova largura × altura da proporção ÷ largura da proporção. Para um quadro 16:9 com 1280 píxeis de largura, dá 1280 × 9 ÷ 16 = 720. Para um quadro 4:5 com 1600 píxeis de largura, dá 1600 × 5 ÷ 4 = 2000.

Fazer ao contrário é igualmente simples: nova largura = nova altura × largura da proporção ÷ altura da proporção. Um vídeo 9:16 que tem de ter 1280 de altura tem 1280 × 9 ÷ 16 = 720 de largura. Se o resultado tiver decimais, arredonda ao píxel inteiro mais próximo; a diferença é invisível.

O que acontece quando mudas a proporção

Escalar mantém a forma. Mudar a proporção não, e só tens três opções honestas: cortar parte da imagem, acrescentar espaço à volta ou reorganizar o design para a nova forma. A quarta opção, esticar, deforma cada letra e cada círculo, e as pessoas notam logo.

É isto que a mudança de tamanho do Gradiently faz com o Pro: escolhes os tamanhos de que precisas e cada cópia é reorganizada para a sua forma, enquanto o Mark por trás é gerado de novo em cada proporção em vez de cortado de uma só imagem. Um visual, todos os tamanhos explica o processo.

Que proporção escolher para uma publicação

Quando uma plataforma aceita várias formas, escolhe a que ocupa mais espaço no ecrã do telemóvel. No Instagram é a 4:5, mais alta do que um quadrado e a que melhor resiste ao corte da grelha do perfil; o tamanho das publicações do Instagram explica porquê. No Pinterest, o pin 2:3 é o padrão; existem pins mais compridos, mas podem ser cortados no feed, como se vê no tamanho dos pins do Pinterest.

Para tudo o que se vê na televisão ou no portátil, 16:9 é a escolha segura, e por isso as miniaturas do YouTube e os diapositivos a usam. Para tudo o que se vê em ecrã inteiro no telemóvel, 9:16 é a única forma que o preenche. Na dúvida, desenha primeiro as versões vertical e panorâmica: o quadrado e o 4:5 ficam bem entre elas.

Proporção de imagem em CSS

Na web, a propriedade CSS aspect-ratio mantém uma caixa na forma certa a qualquer largura, o que evita saltos no layout enquanto imagens e vídeos carregam. É suportada em todos os navegadores atuais; vê 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 contam na impressão e no vídeo, com as suas convenções. Para formatos de vídeo vê os tamanhos de vídeo para redes sociais e, para a relação entre píxeis e tamanho físico, DPI vs PPI.