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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/aspect-ratios-explained)

Os tamanhos em píxeis mudam de plataforma para plataforma, mas há só um punhado de formas. Aprende-as, e a matemática que as liga, e nunca mais vais esticar um design.

## The short version

- A proporção de imagem é a relação entre a largura e a altura de uma imagem, escrita como largura:altura.
- Para descobrir a proporção de qualquer tamanho, divide os dois números pelo máximo divisor comum, e assim 1920×1080 passa a 16:9.
- Para obter um novo tamanho na mesma proporção, multiplica a nova largura pela altura da proporção e divide pela sua largura.
- As proporções que mais contam nas redes sociais são 1:1, 4:5, 9:16, 16:9 e 1,91:1.
- Mudar uma imagem para outra proporção implica sempre cortar, acrescentar espaço ou reorganizar o design; esticar deforma-a.

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

- 1:1 quadrado: 1080 × 1080
- 4:5 vertical: 1080 × 1350
- 2:3 pin: 1000 × 1500
- 9:16 vertical: 1080 × 1920
- 4:3 clássico: 1600 × 1200
- 16:9 panorâmico: 1920 × 1080
- 1,91:1 cartão de link: 1200 × 630
- 3:1 cabeçalho: 1500 × 500

Oito formas cobrem quase tudo o que vais desenhar. À escala, do quadrado ao cabeçalho estreito.

| Proporção | Forma | Tamanho típico | Usada em |
| --- | --- | --- | --- |
| 1:1 | Quadrado | 1080×1080 | Quadrado do Instagram, publicações no Facebook e LinkedIn, capas de playlists |
| 4:5 | Vertical | 1080×1350 | Publicações verticais no Instagram, Threads, Facebook e X |
| 3:4 | Vertical | 1080×1440 | Como o Instagram corta as publicações na grelha do perfil |
| 2:3 | Vertical alta | 1000×1500 | Pins do Pinterest |
| 9:16 | Vertical | 1080×1920 | Stories, Reels, TikTok, Shorts, estado do WhatsApp |
| 4:3 | Horizontal clássico | 1600×1200 | Diapositivos antigos, imagens do Dribbble, publicações do Google Business a 1200×900 |
| 16:9 | Panorâmico | 1920×1080 | Miniaturas do YouTube, diapositivos, imagens de topo de sites, publicações no X e Bluesky |
| 1,91:1 | Cartão largo | 1200×630 | Pré-visualizações de links e imagens Open Graph |
| 3:1 e 4:1 | Faixa | 1500×500, 1584×396 | Cabeçalhos do X, faixas do LinkedIn |

Uma proporção, muitas plataformas. Quando dois formatos partilham a proporção, um só design serve ambos por escala.

Os tamanhos exatos em píxeis para cada plataforma estão em [tamanhos de imagem para redes sociais](https://gradiently.design/pt-pt/guide/social-media-image-sizes). 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. **Parte do tamanho** Digamos 1080×1350, uma publicação vertical de Instagram.
2. **Encontra o máximo divisor comum** O maior número que divide exatamente 1080 e 1350 é 270.
3. **Divide os dois lados** 1080 ÷ 270 = 4 e 1350 ÷ 270 = 5. A proporção é 4:5.
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.

```js
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
```

O algoritmo de Euclides para o divisor, depois uma escala simples. Cola-o na consola de qualquer navegador.

## 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.

### Cortar ou esticar

- Rápido, mas o título fica muitas vezes cortado
- Esticar deixa o texto com ar achatado
- Os logótipos acabam no sítio errado
- Os fundos perdem o ponto de luz
- Todos os formatos parecem ligeiramente errados

### Reorganizar

- As palavras reajustam-se à forma
- O texto mantém as proporções verdadeiras
- O logótipo vai para onde cada formato o espera
- O fundo é gerado de novo para o quadro
- Cada formato parece feito para o seu lugar

Uma publicação vertical 4:5 de um estúdio de cerâmica a anunciar que as aulas de primavera abriram

O design em 4:5 para o feed: palavras empilhadas, espaço por cima e por baixo.

O mesmo anúncio do estúdio de cerâmica organizado num quadro panorâmico 16:9

O mesmo design em 16:9 para o topo de um site: as palavras abrem-se mais, o fundo redesenhado para o quadro.

É 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](https://gradiently.design/pt-pt/guide/one-look-every-size) 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](https://gradiently.design/pt-pt/guide/instagram-post-size) 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](https://gradiently.design/pt-pt/guide/pinterest-pin-size).

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](https://gradiently.design/pt-pt/guide/youtube-thumbnail-size) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).

```css
.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 */
}
```

Escreve a proporção com uma barra. Junta object-fit: cover nas imagens para que sejam cortadas em vez de deformadas.

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](https://gradiently.design/pt-pt/guide/social-video-sizes) e, para a relação entre píxeis e tamanho físico, [DPI vs PPI](https://gradiently.design/pt-pt/guide/dpi-vs-ppi).

## FAQ

### O que é uma proporção de imagem?

É a forma de uma imagem, expressa pela largura face à altura, como 16:9 ou 4:5. Imagens com a mesma proporção escalam umas para as outras sem cortes.

### Como calculo uma proporção de imagem?

Divide a largura e a altura pelo máximo divisor comum. Para 1920×1080 o divisor é 120, o que dá 16:9.

### Que proporção tem 1080×1350?

4:5, a forma vertical usada em publicações verticais do Instagram, Threads, Facebook e X.

### Qual a diferença entre 16:9 e 9:16?

É a mesma forma virada de lado. 16:9 é horizontal, usada no YouTube e em diapositivos; 9:16 é vertical, usada em Stories, Reels e TikTok.

### Como mudo a proporção sem esticar?

Corta a imagem, acrescenta espaço à volta ou reorganiza o design para a nova forma. Reorganizar dá o melhor resultado em designs com texto.