Verificador de Proporção de Imagem
Analise proporções exatas de aspecto, formato decimal, compatibilidade com redes sociais e código CSS aspect-ratio direto no navegador.
Arraste e solte sua imagem aqui ou clique para selecionar
Descubra frações simplificadas, valide compatibilidade em redes sociais, dimensione proporções e gere código CSS sem envio a servidores
Suporta JPG, PNG, WebP, SVG, GIF, AVIF, BMP, ICO e TIFF • Cole com Ctrl+V
O que é a proporção de aspecto de uma imagem e por que ela é importante?
A proporção de aspecto de uma imagem descreve a relação proporcional entre sua largura e sua altura, expressa por dois números separados por dois pontos (como 16:9, 4:3 ou 1:1). Diferente das dimensões em pixels que medem a resolução total (ex.: 1920 × 1080 pixels), a proporção de aspecto define a forma geométrica visual da imagem, independentemente do tamanho em que ela for exibida.
Compreender o aspect ratio é indispensável para designers gráficos, fotógrafos e desenvolvedores web. Usar uma proporção errada gera cortes automáticos indesejados, distorções ou barras pretas nas laterais. O verificador do ImgFeel calcula proporções e gera código CSS na hora sem fazer upload dos seus arquivos.
Proporção e Decimal Imediatos
Calcula frações simplificadas (16:9, 4:3, 1:1) e multiplicadores decimais exatos.
Compatibilidade com Redes Sociais
Avalia o enquadramento no Instagram, YouTube, TikTok, Facebook, X e LinkedIn.
Código CSS Pronto para Uso
Gera propriedades CSS aspect-ratio e tags HTML de imagens responsivas.
100% Privado no Navegador
Todo o processamento ocorre via JavaScript local sem envio para servidores.
Como calcular a proporção de aspecto (O método matemático)
Para calcular matematicamente a proporção de aspecto, encontra-se o Máximo Divisor Comum (MDC) da largura e da altura em pixels e divide-se ambos os valores por esse divisor. Por exemplo, em uma imagem de 3840 × 2160 pixels, o MDC é 240. Dividindo 3840 por 240 temos 16, e dividindo 2160 por 240 temos 9, resultando na proporção 16:9.
Alternativamente, dividir a largura pela altura gera a proporção decimal (3840 ÷ 2160 = 1.778). As fórmulas a seguir ilustram ambos os métodos:
Simplified Aspect Ratio = (Width ÷ GCD(Width, Height)) : (Height ÷ GCD(Width, Height)) Decimal Aspect Ratio = Width ÷ Height : 1 CSS Padding-Top Hack % = (Height ÷ Width) × 100% Example: For a 1920 × 1080 Full HD image, GCD is 120. (1920 ÷ 120) : (1080 ÷ 120) = 16:9 (1.78:1 decimal, 56.25% CSS height). Proporção de Aspecto vs. Resolução de Imagem: Qual a Diferença?
É muito comum confundir proporção de aspecto com resolução de imagem. Resolução refere-se à quantidade total de pixels (largura em pixels × altura em pixels, ou Megapixels). Proporção de aspecto trata exclusivamente da geometria da imagem.
Por exemplo, imagens de 1280 × 720 (0.92 MP), 1920 × 1080 (2.07 MP) e 3840 × 2160 (8.29 MP) têm resoluções e tamanhos em disco completamente diferentes, mas compartilham exatamente a mesma proporção de aspecto 16:9. A tabela a seguir sintetiza essas distinções:
| Concept | What It Measures | Standard Units | Example Values |
|---|---|---|---|
| Aspect Ratio | Proportional relationship between width & height | Ratio string (W:H) or decimal | 16:9, 4:3, 1:1, 9:16, 1.78:1 |
| Image Resolution | Total number of pixels in the digital image grid | Pixels (W × H) and Megapixels | 1920 × 1080 px (2.07 MP), 3840 × 2160 px (8.29 MP) |
| Print Density (DPI) | Physical ink dots per linear inch on printed media | Dots Per Inch (DPI) | 300 DPI (Fine photo), 150 DPI (Flyer) |
| Display Density (PPI) | Physical hardware pixel density of a screen panel | Pixels Per Inch (PPI) | 460 PPI (iPhone Super Retina), 163 PPI (4K Monitor) |
Guia de Proporções de Aspecto Padrão mais Populares
Telas digitais, câmeras e redes sociais adotam proporções específicas para garantir que o conteúdo seja exibido com perfeição:
| Ratio | Decimal | Standard Name | Primary Application | Common Resolutions |
|---|---|---|---|---|
| 16:9 | 1.78:1 | Widescreen (HD/4K) | YouTube videos, TVs, PC monitors, PowerPoint | 1920×1080, 2560×1440, 3840×2160 |
| 9:16 | 0.56:1 | Vertical Story / Reel | TikTok, Instagram Reels, YouTube Shorts, Snapchat | 1080×1920, 720×1280 |
| 1:1 | 1.00:1 | Square | Instagram feed, profile photos, product thumbnails | 1080×1080, 1200×1200, 500×500 |
| 4:5 | 0.80:1 | Social Portrait | Instagram feed portrait (maximum screen real estate) | 1080×1350 |
| 4:3 | 1.33:1 | Classic Standard | iPad displays, Micro Four Thirds cameras, CRT TV | 1024×768, 2048×1536 |
| 3:2 | 1.50:1 | Classic 35mm DSLR | Full-frame cameras, 4×6 photo prints, Surface laptops | 6000×4000, 3000×2000 |
| 21:9 | 2.33:1 | Ultrawide Cinema | Anamorphic cinema movies, curved ultrawide monitors | 2560×1080, 3440×1440, 5120×2160 |
| 1.91:1 | 1.91:1 | Social Landscape | Facebook feed link previews, Twitter / X summary cards | 1200×628, 1200×630 |
Guia de Proporções para Redes Sociais (Instagram, YouTube, TikTok e mais)
Cada rede social otimiza seus feeds para proporções específicas. O Instagram recomenda 1:1 para posts quadrados, 4:5 para retratos verticais e 9:16 para Stories e Reels. O YouTube utiliza 16:9 para vídeos e miniaturas, e 9:16 para Shorts. O TikTok funciona em 9:16 vertical. Usar a proporção certa evita que elementos cruciais sejam cortados pelos algoritmos.
Desenvolvimento Web Moderno: Propriedade CSS aspect-ratio e Prevenção de CLS
No design web responsivo atual, a propriedade CSS `aspect-ratio` permite que os navegadores reservem o espaço exato para imagens antes do download do arquivo terminar. Isso elimina os saltos visuais na página (Cumulative Layout Shift ou CLS), aprimorando o Core Web Vitals do Google.
Antigamente usava-se o hack de padding-top (`padding-top: 56.25%` para 16:9). Hoje basta declarar `aspect-ratio: 16 / 9;` diretamente no container ou elemento `<img>`.
Cortar vs. Redimensionar vs. Adicionar Barras (Letterboxing)
Ao adaptar uma imagem para outra proporção existem três caminhos: (1) Cortar remove pixels das bordas preservando nitidez; (2) Redimensionar sem travar proporções deforma e estica a imagem; (3) Adicionar barras preenche as laterais com bordas neutras sem alterar o enquadramento original.
Como Verificar a Proporção de Aspecto no Windows, Mac, iOS e Android
Para verificar as dimensões e calcular a proporção no seu próprio dispositivo sem instalar programas adicionais:
Windows
Right-click image > Properties > Details. Check Dimensions (e.g. 1920 × 1080) and divide Width by Height.
macOS
Select image and press Cmd + I or open in Preview and press Cmd + I to inspect pixel dimensions.
iPhone / iOS
Open image in Photos app and tap the (i) Info button to inspect resolution and proportions.
Android
Open image in Google Photos or Gallery, swipe up to view technical details, dimensions, and Megapixels.
Perguntas Frequentes (FAQ)
Como descubro a proporção de aspecto de uma imagem online grátis?
Arraste a imagem para a ferramenta do ImgFeel acima ou selecione um arquivo. Você também pode colar com Ctrl+V. A ferramenta calcula na hora a fração (16:9, 4:3, 1:1), o valor decimal, a compatibilidade com redes e o código CSS.
Qual é a proporção de aspecto mais comum para fotos e vídeos?
16:9 é o padrão universal para vídeos em widescreen, TVs e monitores. Para smartphones e redes sociais, 9:16 e 4:5 são as mais populares. Em câmeras fotográficas DSLR, 3:2 é o formato clássico.
Mudar a proporção diminui a qualidade da imagem?
Cortar uma imagem para mudar a proporção reduz a quantidade total de pixels das bordas, mas os pixels restantes permanecem 100% nítidos. Esticar a imagem sem travar proporções distorce os objetos.
Como calcular a proporção de aspecto a partir da largura e altura?
Divida a largura e a altura pelo máximo divisor comum (MDC). Em 1920 × 1080, dividindo ambos por 120 obtemos 16:9. Também é possível dividir largura por altura (1920 ÷ 1080 = 1.78) para ter a proporção decimal.
Qual é a melhor proporção de imagem para o Instagram?
Para publicações de feed vertical, 4:5 (1080 × 1350 px) garante o maior destaque na tela. Posts quadrados usam 1:1 (1080 × 1080 px) e Stories/Reels usam 9:16 (1080 × 1920 px).
O que é a propriedade CSS aspect-ratio?
É uma propriedade moderna do CSS que define a proporção de aspecto preferida de um elemento (ex.: `aspect-ratio: 16 / 9;`), prevenindo deslocamentos de layout durante o carregamento de imagens.
Minhas imagens são enviadas para algum servidor durante o teste?
Não. Todo o cálculo da proporção e das dimensões ocorre 100% no seu navegador via JavaScript. Seus arquivos jamais saem do seu computador ou celular.