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

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

Os tamanhos em pixels mudam de plataforma para plataforma, mas existem poucos formatos. Aprenda esses formatos e a matemática que os liga, e você nunca mais vai achatar um design.

## The short version

- Proporção de tela é a relação entre a largura e a altura de uma imagem, escrita como largura:altura.
- Para descobrir a proporção de qualquer tamanho, divida os dois números pelo maior divisor comum, e 1920×1080 vira 16:9.
- Para obter um novo tamanho na mesma proporção, multiplique a nova largura pela altura da proporção e divida pela largura dela.
- As proporções que mais importam nas redes sociais são 1:1, 4:5, 9:16, 16:9 e 1,91:1.
- Passar uma imagem para outra proporção sempre significa cortar, acrescentar espaço ou refazer o layout do design; esticar deforma tudo.

**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

- 1:1 quadrado: 1080 × 1080
- 4:5 retrato: 1080 × 1350
- 2:3 pin: 1000 × 1500
- 9:16 vertical: 1080 × 1920
- 4:3 clássico: 1600 × 1200
- 16:9 widescreen: 1920 × 1080
- 1,91:1 card de link: 1200 × 630
- 3:1 capa: 1500 × 500

Oito formatos cobrem quase tudo o que você vai criar. Desenhados em escala, do quadrado à capa estreita.

| Proporção | Formato | Tamanho típico | Uso |
| --- | --- | --- | --- |
| 1:1 | Quadrado | 1080×1080 | Instagram quadrado, posts no Facebook e no LinkedIn, capas de playlist |
| 4:5 | Retrato | 1080×1350 | Posts em retrato no Instagram, Threads, Facebook e X |
| 3:4 | Retrato | 1080×1440 | Como o Instagram corta os posts na grade do perfil |
| 2:3 | Retrato alto | 1000×1500 | Pins do Pinterest |
| 9:16 | Vertical | 1080×1920 | Stories, Reels, TikTok, Shorts, status do WhatsApp |
| 4:3 | Paisagem clássica | 1600×1200 | Slides antigos, shots no Dribbble, posts do Google Meu Negócio em 1200×900 |
| 16:9 | Widescreen | 1920×1080 | Miniaturas do YouTube, slides, banners de site, posts no X e no Bluesky |
| 1,91:1 | Card largo | 1200×630 | Prévias de link e imagens Open Graph |
| 3:1 e 4:1 | Banner | 1500×500, 1584×396 | Capas do X, banners do LinkedIn |

Uma proporção, muitas plataformas. Quando dois formatos têm a mesma proporção, um único design serve aos dois só mudando a escala.

Os tamanhos exatos em pixels de cada plataforma estão em [tamanhos de imagem para redes sociais](https://gradiently.design/pt-br/guide/social-media-image-sizes). 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. **Comece pelo tamanho** Por exemplo, 1080×1350, um post em retrato no Instagram.
2. **Encontre o maior divisor comum** O maior número que divide 1080 e 1350 exatamente é 270.
3. **Divida os dois lados** 1080 ÷ 270 = 4 e 1350 ÷ 270 = 5. A proporção é 4:5.
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.

```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 e depois uma simples mudança de escala. Cole em qualquer console de navegador.

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

### Cortar ou esticar

- Rápido, mas o título costuma ser cortado
- Esticar deixa o texto achatado
- O logo vai parar no lugar errado
- O fundo perde seu ponto de luz
- Todo formato fica um pouco estranho

### Refazer o layout

- O texto se reorganiza para caber no formato
- A tipografia mantém as proporções reais
- O logo vai aonde cada formato espera
- O fundo é renderizado de novo para o quadro
- Cada formato parece feito para o seu lugar

Um post em retrato 4:5 de um ateliê de cerâmica anunciando que as turmas de primavera estão abertas

O design em 4:5 para o feed: palavras empilhadas, com espaço acima e abaixo.

O mesmo anúncio do ateliê de cerâmica diagramado em um quadro widescreen 16:9

O mesmo design em 16:9 para o banner de um site: as palavras se espalham e o fundo é redesenhado para o quadro.

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

Para qualquer coisa assistida na TV ou no notebook, 16:9 é a escolha segura, e por isso [miniaturas do YouTube](https://gradiently.design/pt-br/guide/youtube-thumbnail-size) 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](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 */
}
```

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

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

## FAQ

### O que é proporção de tela?

É o formato de uma imagem, expresso como a largura comparada com a altura, por exemplo 16:9 ou 4:5. Imagens com a mesma proporção mudam de escala uma para a outra sem corte.

### Como calcular a proporção de uma imagem?

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

### Qual é a proporção de 1080×1350?

4:5, o formato em retrato usado em posts no Instagram, Threads, Facebook e X.

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

São o mesmo formato girado de lado. 16:9 é horizontal, usado no YouTube e em slides; 9:16 é vertical, usado em Stories, Reels e TikTok.

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

Corte a imagem, acrescente espaço em volta ou refaça o layout do design para o novo formato. Reorganizar dá o melhor resultado em designs com texto.