Certa vez, enviei um tema WordPress, onde todas as imagens em destaque no celular pareciam ter passado por um Mangle. Rostos esticados, logos esmagados. A causa foi três caracteres em um arquivo CSS: a height: 240px Sentado ao lado de um width: 100%. Em um telefone de 375 pixels que produzia uma proporção de aproximadamente 1,56:1, e as imagens eram 16:9 - 1,78:1. Não há uma grande diferença no papel. Muito óbvio em um rosto humano.
Aspecto de proporção é uma daquelas coisas que parece muito simples para errar, então ninguém verifica isso. É uma divisão única. E, no entanto, arruína silenciosamente as exportações de vídeo, visualizações do OpenGraph que são cortadas no lugar errado, miniaturas com barras pretas e imagens de heróis que parecem bem no seu monitor de 27 polegadas e são terríveis em um telefone. A matemática é trivial; o custo de um erro de arredondamento não é.
eu construo Toolz.dev e EU faço esse cálculo constantemente - dimensionando imagens para um plugin' s telas de administração, exportando vídeo em formato Reels, trabalhando para fora o que uma imagem OpenGraph deve realmente ser Então EU construí o calculadora de taxa de aspecto Para fazer isso em um campo e mostrar seu funcionamento. Dê a ele uma proporção e uma dimensão, que lhe dá a outra. Dê um tamanho, ele o reduz à proporção e informa como é chamada essa proporção.
tl;dr: A proporção da proporção é dividida pela altura, escrita como dois números com dois pontos. Para encontrar uma altura ausente:
width × (ratioHeight ÷ ratioWidth). Para encontrar uma largura ausente:height × (ratioWidth ÷ ratioHeight). Para obter a proporção de um tamanho, divida ambos os números por seu máximo divisor comum - 1920 e 1080 compartilham um GCD de 120, que dá 16:9. o calculadora de taxa de aspecto Faz todos os três no seu navegador, com predefinições para 16:9, 9:16, 1:1, 4:3, 3:2, 21:9, 1.91:1 e 2.39:1.
O que é uma proporção de aspecto?
Uma proporção é a relação proporcional entre uma imagem' s largura e sua altura, Ele é escrito como dois números separados por dois pontos - 16:9, 4:3, 1:1 - e o que ele descreve é forma, não tamanho.
Essa distinção é o jogo inteiro. 1280 × 720, 1920 × 1080, e 3840 × 2160 são três resoluções diferentes com uma proporção de aspecto Eles são da mesma forma em três tamanhos, razão pela qual qualquer um deles escala em qualquer outro sem distorção ou corte Enquanto isso 1920 × 1080 e 1920 × 1200 têm quase a mesma largura, diferem por 120 pixels de altura, e são formas fundamentalmente diferentes - um é 16:9, o outro é 16:10, e colocar conteúdo projetado para um em um recipiente construído para o outro significa letterboxing ou uma colheita.
A razão é apenas largura ÷ altura expressa como uma fração em termos mais baixos. 1920 ÷ 1080 = 1,777…, e a fração 1920/1080 reduz para 16/9. Ambos são iguais, afirmados de duas maneiras: a forma decimal é mais fácil de comparar (1,78 é mais largo que 1,5? Obviamente), e a forma do cólon é mais fácil de dizer.
Os três cálculos que você realmente precisa
Resolvendo para uma dimensão ausente
Você sabe a forma e um lado Este é o caso mais comum na prática: & quot; Preciso de uma imagem 16:9 e meu recipiente tem 1280 pixels de largura - qual a altura?"
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
E na outra direção:
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
Na calculadora, escolha uma predefinição ou digite sua proporção, preencha a dimensão que você conhece, deixe a outra em branco e clique em Calcular. Ele preenche o campo vazio e mostra a aritmética por baixo.
Reduzindo um tamanho para sua proporção
Você tem um tamanho e deseja saber sua forma - geralmente para verificar se dois ativos correspondem ou para descobrir o que realmente é uma exportação dimensionada pelo mistério do cliente e no 39.
O método é o maior divisor comum. Encontre o maior número que divide as duas dimensões uniformemente e divida ambas por ela. Para 1920 e 1080 esse número é 120: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9. Proporção 16:9.
É aqui que as respostas ficam interessantes, porque os tamanhos do mundo real geralmente não reduza para uma proporção amigável ao marketing Um monitor ultralargo 3440 × 1440 reduz para 43:18. um 2560 × 1080 reduz para 64:27. ambos são vendidos como "21:9 & quot;, e nem realmente é - 21:9 seria 3360 × 1440. o rótulo é um arredondamento do decimal (2.39:1 e 2.37:1) em algo que soa arrumado ao lado de 16:9. A calculadora dá a você a verdadeira proporção reduzida e o decimal, para que você possa dimensionar a partir da realidade, em vez de uma folha de especificações.
Escalonamento e encaixe
Duas variantes da mesma ideia. escalada multiplica ambas as dimensões pelo mesmo fator, que por definição preserva a proporção - uma escala de 50% de 1920 × 1080 é 960 × 540, ainda 16:9. apropriado Encolhe o tamanho da fonte até que fique dentro de uma caixa delimitadora sem distorção: tome o menor boxWidth ÷ sourceWidth e boxHeight ÷ sourceHeight e escala por isso. Uma foto de 4000 × 3000 instalada em uma caixa de 1200 × 1200 torna-se 1200 × 900. isso é exatamente o css object-fit: contain faz, e exatamente o que uma CDN de imagem faz quando você pede um redimensionamento de dimensão máxima.
Características-chave da calculadora de proporção
Dez presets, rotulados com onde eles são realmente usados
16:9 para vídeo padrão e a maioria dos monitores. 9:16 para bobinas, shorts, tiktok e histórias. 1:1 para postagens e avatares sociais quadrados. 4:3 para monitores mais antigos e iPad. 3:2 para fotografia DSLR e filme de 35 mm. 2:3 para impressões de retratos. 5:4 para impressões 8×10. 21:9 para ultra-largo. 1.91:1 Para imagens do OpenGraph Link-Visualizar. 2.39:1 Para tela widescreen anamórfica. Passar de um lado para o outro, informa para que serve, o que importa mais do que o número quando você está tentando lembrar qual do Instagram deseja.
A fórmula em cada resposta
O painel de resultados mostra a aritmética exata - 1280 × (9 ÷ 16) = 720. Em parte, para que você possa verificá-lo, em parte para que possa levantá-lo em uma planilha ou em um script. Se você vai codificar uma dimensão em um arquivo CSS ou uma configuração do Tailwind, você deve ser capaz de ver de onde veio o número.
A taxa reduzida, o decimal e o nome
Cada resultado relata todas as três representações: a razão inteira reduzida (16:9), sua forma decimal (1,778:1) e um nome comum, se houver. Decimal é o que você compara; o nome é o que você digita em um briefing de design.
Megapixels e contagem total de pixels
Cada resultado inclui a contagem de pixels em megapixels Este é o número que realmente prevê o uso de memória e tamanho do arquivo quando você está redimensionando imagens - uma foto 4000 × 3000 é 12 MP, e dobrando suas dimensões quadruplica que para 48 MP, não duplica se você está gerando conjuntos de imagens responsivas, essa relação quadrática é a coisa a manter em sua cabeça Quando você terminar de dimensionar, que a relação quadrática é a coisa a manter em sua cabeça Redimensionamento da imagem e imagem compactar Faça o trabalho real, no navegador.
Uma prévia de forma ao vivo
Um retângulo no painel de resultados, desenhado para a proporção que você acabou de calcular Parece decorativo e não é - a maneira mais rápida de pegar que você digitou 9:16 quando você quis dizer 16:9 é olhar para uma caixa alta quando esperava uma ampla.
Lado do cliente, offline, sem inscrição
Aritmética simples de JavaScript no seu navegador. Nada é enviado a lugar nenhum, nada é registrado e a página continua trabalhando com a rede desligada.
Qual proporção devo usar?
| proporção | decimal | onde é usado | Tamanho típico do pixel |
|---|---|---|---|
| 16:9 | 1.778 | YouTube, HD/4K, a maioria dos monitores, TVs | 1920 × 1080, 3840 × 2160 |
| 9:16 | 0,563 | Bobinas do Instagram, TikTok, Shorts do YouTube, Histórias | 1080 x 1920 |
| 1:1 | 1.0 | Postagens de feed do Instagram, avatares, miniaturas de produtos | 1080 × 1080 |
| 4:5 | 0,8 | Postagem de feed de retratos do Instagram (maior pegada de feed) | 1080 × 1350 |
| 1.91:1 | 1.91 | Visualizações de links do OpenGraph / Cartão do Twitter | 1200 × 630 |
| 4:3 | 1.333 | iPad, monitores mais antigos, muitos sensores de câmera | 2048 × 1536 |
| 3:2 | 1.5 | DSLR e fotos sem espelho, filme de 35 mm, impressões de fotos | 6000 × 4.000 |
| 21:9 (realmente ~2,37–2,39:1) | ~2,38 | Monitores ultrawide, culturas cinematográficas | 3440 × 1440 |
| 2.39:1 | 2.39 | Cinema anamórfico de tela ampla | 4096 × 1716 |
Duas notas práticas O tamanho 1200 × 630 OpenGraph reduz para 40:21, um decimal de 1.905 - perto o suficiente de 1.91:1 que todo mundo chama assim, e é o tamanho Facebook, LinkedIn, e X todos renderizar limpo Verifique o resultado com o Abrir visualização do gráfico Ferramenta antes de enviá-la, porque uma imagem de visualização mal cortada é o bug mais visível em um link que ninguém clica. E 4:5 vale a pena conhecer especificamente para o Instagram: ocupa mais espaço vertical no feed do que 1:1, o que é de graça.
Casos de uso comuns
Dimensionando imagens responsivas sem distorção
Você está construindo uma grade de cartão e o design exige miniaturas de 16:9 com uma largura de contêiner de 384 pixels. Calcule: 384 × 9 ÷ 16 = 216. Agora você tem um tamanho concreto para o seu CSS aspect-ratio: 16 / 9 declaração e sua exportação de imagem, e eles concordam uns com os outros O CSS moderno torna isso mais fácil do que costumava ser - aspect-ratio em CSS toma a razão diretamente e deixa o navegador fazer a aritmética - mas você ainda precisa as dimensões de pixel para o próprio ativo.
Exportando vídeo para uma plataforma específica
Você disparou 16:9 e precisa de um corte vertical de 9:16 A altura fica em 1920, então a largura é 1920 × 9 ÷ 16 = 1080. esse é o seu tamanho de exportação - e a razão pela qual os números parecem familiares é que 1080 × 1920 é simplesmente 1920 × 1080 com os eixos trocados, que é o que " vídeo vertical " significa.
Uma coisa que a calculadora não fará por você: H.264 requer dimensões uniformes. Se sua matemática chegar a um número ímpar, arredonde o lado ímpar para baixo em um pixel ou seu codificador recusará o trabalho.
Descobrir o que realmente é um ativo misterioso
Um cliente envia ativos em 1440 × 1800 e pergunta por que eles cortam mal na página inicial Reduza-o: GCD de 1440 e 1800 é 360, dando 4:5. seus slots de página inicial são 16:9. essas duas formas não podem ser satisfeitas sem cortar - agora você tem uma resposta concreta e uma decisão a tomar, em vez de uma vaga sensação de que algo está desligado.
Verificar se um conjunto de ativos é consistente
Antes de um lançamento, execute todas as dimensões do Hero Image's por meio do modo de proporção. Se um dos trinta voltar como 1,6:1, enquanto o restante for 1,778:1, você encontrará o ativo que parecerá sutilmente errado no site ao vivo e o encontrará antes que o usuário o faça.
Notas técnicas que vale a pena conhecer
arredondamento. A maioria dos cálculos de proporção não pousa em pixels inteiros.16:9 a uma largura de 1000 dá uma altura de 562,5. a calculadora arredonda para o pixel inteiro mais próximo, então você obtém 563 - uma forma que é 1,7762:1 em vez de 1,7778:1, uma diferença de cerca de um décimo de um por cento, e invisível Não a persiga Perceba que consistentemente arredonda por baixo Em um conjunto de imagens, você pode acumular uma deriva visível se você estiver empilhando elementos; arredondando a partir da dimensão da origem, em vez do resultado anterior.
A proporção do pixel vs relação do aspecto do visor. No vídeo transmitido, eles podem diferir: imagens DV antigas armazenavam 720 × 480 pixels, mas as exibiam como 4:3, tornando cada pixel não quadrado. Quase nada que você toca hoje faz isso - tudo são pixels quadrados - mas se você estiver trabalhando com imagens legadas e a matemática se recusar a somar, é por isso.
aspect-ratio em CSS. Desde 2021 você pode escrever aspect-ratio: 16 / 9 E deixe o navegador segurar a forma enquanto uma dimensão é fluida. use-o. Ele remove uma classe inteira de hacks de percentagem de preenchimento que costumavam ser necessários e significa que seu layout permanece correto em larguras que você nunca testou. Você ainda deseja a calculadora para a exportação de ativos, porque o arquivo de imagem deve ser um número real de pixels.
O corte não é escala. Se uma proporção de origem e destino diferir, você não poderá redimensionar entre eles - você deve cortar, caixa de correio ou distorcer Escolha deliberadamente. object-fit: cover colheitas (e geralmente é o que você deseja para fotos), contain caixas de correio (geralmente o que você deseja para os logotipos) e fill Distorce (quase nunca o que você quer e a causa dos meus rostos mutilados é bug no topo deste artigo).
FAQ
Como faço para calcular a proporção da largura e da altura?
Divida os dois números pelo seu maior divisor comum. Para 1920 × 1080, o GCD é 120, então a proporção se reduz para 16:9. Mude esta calculadora para obter o modo de proporção, insira ambas as dimensões e ele fará a redução e nomeie a proporção para você.
Que altura eu preciso para uma imagem 16:9 com 1280 pixels de largura?
Multiplique a largura por 9 e divida por 16: 1280 × 9 ÷ 16 = 720. Portanto, uma imagem 16:9 de 1280 pixels de largura tem 720 pixels de altura. Insira a predefinição 16:9 e uma largura de 1280 para confirmá-la.
Qual é a diferença entre proporção e resolução?
A proporção de aspecto é a forma - a proporção de largura para altura A resolução é a contagem real de pixels. 1280 × 720 e 1920 × 1080 são resoluções diferentes com a mesma proporção de aspecto 16:9, razão pela qual uma escala para a outra sem distorção ou corte.
Qual proporção devo usar para as mídias sociais?
Use 1:1 ou 4:5 para postagens de feed do Instagram, 9:16 para Reels, Stories, TikTok e Shorts do YouTube, 16:9 para vídeo padrão do YouTube e 1.91:1 para Gráfico aberto link de imagens de visualização no Facebook, LinkedIn e X. As predefinições nesta ferramenta incluem todos estes.
Por que minha imagem redimensionada parece esticada?
A nova largura e altura não correspondem à proporção original, então a imagem está sendo esmagada ao longo de um eixo Calcule a altura alvo a partir da largura alvo usando a proporção original em vez de digitar os dois números manualmente - é exatamente para isso que serve o modo resolver-por-lado ausente.
O que realmente significa 21:9?
É um rótulo de marketing para displays ultra-wide. A relação verdadeira de um monitor de 3440 × 1440 é 43:18, aproximadamente 2,39:1 e um painel 2560 × 1080 é 64:27. Ambos são arredondados para "21:9" em listas de produtos. Se você precisar de dimensões exatas de pixel, calcule a partir da resolução do painel real em vez do rótulo.
Como faço para manter uma proporção quando o resultado não é um número inteiro?
A calculadora arredonda para o pixel inteiro mais próximo, que introduz no máximo meio pixel de deriva - invisível na prática Os codificadores de vídeo são mais rigorosos: H.264 requer dimensões pares, portanto, arredonde o lado ímpar para baixo em um pixel se um codificador rejeitar seu tamanho.
Essa calculadora funciona offline?
Sim. Cada cálculo é uma aritmética simples de JavaScript em execução no seu navegador. Nenhuma dimensão é enviada para um servidor, nada é registrado e a ferramenta continua a funcionar sem conexão com a Internet depois que a página for carregada.
Ferramentas relacionadas
- Redimensionamento da imagem- aplique as dimensões que acabou de calcular, no navegador
- imagem compactar- encolha o arquivo assim que o formato estiver correto
- calculadora de porcentagem- para a escala por cento metade do trabalho
- Abrir visualização do gráfico- verifique essa imagem 1.91:1 antes de enviar o link
- conversor de formato- WebP e AVIF para os ativos que você acabou de dimensionar
Leitura adicional: O guia completo para compressão de imagens e Ferramentas de imagem essenciais para a web.
