Verificador de relación de aspecto de imagen
Analiza fracciones exactas de relación de aspecto, proporciones decimales, compatibilidad con redes sociales y código CSS aspect-ratio en tu navegador.
Arrastra y suelta tu imagen aquí o haz clic para explorar
Descubre proporciones exactas, verifica compatibilidad en redes sociales, escala dimensiones y genera código CSS sin subir archivos al servidor
Soporta JPG, PNG, WebP, SVG, GIF, AVIF, BMP, ICO y TIFF • Pega con Ctrl+V
¿Qué es la relación de aspecto de una imagen y por qué es importante?
La relación de aspecto de una imagen describe la relación proporcional entre su ancho y su alto, expresada como dos números separados por dos puntos (como 16:9, 4:3 o 1:1). A diferencia de las dimensiones en píxeles que miden la resolución total (ej. 1920 × 1080 píxeles), la relación de aspecto define la forma visual de la imagen independientemente de su tamaño en pantalla.
Comprender la relación de aspecto es fundamental para diseñadores gráficos, fotógrafos y desarrolladores web. Utilizar una proporción incorrecta provoca recortes indeseados, deformaciones de imagen o bandas negras. El verificador de ImgFeel calcula proporciones y genera código CSS al instante sin subir archivos a servidores externos.
Relación y decimales al instante
Calcula fracciones simplificadas (16:9, 4:3, 1:1) y factores decimales exactos.
Compatibilidad con redes sociales
Comprueba la adaptación en Instagram, YouTube, TikTok, Facebook, X y LinkedIn.
Código CSS listo para usar
Genera propiedades CSS aspect-ratio y etiquetas HTML de imagen adaptables.
100% Privado en el navegador
Todo el cálculo se ejecuta en JavaScript local sin enviar datos al servidor.
Cómo se calcula la relación de aspecto (El método matemático)
Para calcular matemáticamente la relación de aspecto, se busca el Máximo Común Divisor (MCD) del ancho y el alto en píxeles, y luego se dividen ambos valores por ese divisor. Por ejemplo, en una imagen de 3840 × 2160 píxeles, el MCD es 240. Al dividir 3840 entre 240 obtenemos 16, y al dividir 2160 entre 240 obtenemos 9, resultando en una proporción de 16:9.
Alternativamente, al dividir el ancho entre el alto se obtiene la relación decimal (3840 ÷ 2160 = 1.778). Las siguientes fórmulas ilustran ambos 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). Relación de aspecto vs. Resolución de imagen: ¿Cuál es la diferencia?
Es habitual confundir relación de aspecto con resolución de imagen. La resolución representa el total de píxeles (ancho en píxeles × alto en píxeles, o megapíxeles). La relación de aspecto define exclusivamente la geometría proporcional.
Por ejemplo, una imagen de 1280 × 720 (0.92 MP), una de 1920 × 1080 (2.07 MP) y una de 3840 × 2160 (8.29 MP) tienen resoluciones y pesos muy distintos, pero comparten exactamente la misma relación de aspecto 16:9. La siguiente tabla resume estas diferencias:
| 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) |
Tabla de relaciones de aspecto estándar más comunes
Las distintas pantallas digitales, cámaras y redes sociales se basan en estándares específicos para asegurar que el contenido se visualice perfectamente:
| 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 |
Guía de proporciones para redes sociales (Instagram, YouTube, TikTok y más)
Cada red social optimiza sus publicaciones para relaciones específicas. Instagram prefiere 1:1 para publicaciones cuadradas, 4:5 para retratos verticales y 9:16 para Stories y Reels. YouTube utiliza 16:9 para vídeos horizontales y miniaturas, y 9:16 para Shorts. TikTok requiere formato vertical completo 9:16. Usar la proporción adecuada evita recortes automáticos.
Desarrollo web moderno: La propiedad CSS aspect-ratio y prevención de CLS
En el diseño web actual, la propiedad CSS `aspect-ratio` permite a los navegadores reservar el espacio exacto para imágenes y contenedores antes de que se descarguen. Esto elimina los saltos visuales en la página (Cumulative Layout Shift o CLS), mejorando los Core Web Vitals de Google.
Antes se utilizaba el truco de porcentaje con padding-top (`padding-top: 56.25%` para 16:9). Hoy en día basta con declarar `aspect-ratio: 16 / 9;` en el contenedor o elemento `<img>`.
Recortar vs. Redimensionar vs. Añadir barras (Letterboxing)
Al adaptar una imagen a otra relación de aspecto existen tres opciones: (1) Recortar elimina píxeles de los bordes para encajar la proporción manteniendo nitidez; (2) Redimensionar sin bloquear proporciones deforma y estira la imagen; (3) Añadir barras rellena los laterales con bordes neutros sin alterar el encuadre original.
Cómo comprobar la relación de aspecto en Windows, Mac, iOS y Android
Para verificar las dimensiones y calcular la relación en tu dispositivo sin programas adicionales:
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.
Preguntas frecuentes (FAQ)
¿Cómo compruebo la relación de aspecto de una imagen gratis online?
Arrastra tu imagen a la herramienta de ImgFeel o pulsa en seleccionar archivo. También puedes pegar con Ctrl+V. La herramienta calcula de inmediato la fracción (16:9, 4:3, 1:1), el valor decimal, la compatibilidad social y el código CSS.
¿Cuál es la relación de aspecto más común para fotos y vídeos?
16:9 es el estándar universal para vídeo panorámico, televisiones y monitores. Para teléfonos móviles y redes sociales, 9:16 y 4:5 son las más utilizadas. En cámaras fotográficas réflex, 3:2 es el formato tradicional.
¿Cambiar la relación de aspecto reduce la calidad de la imagen?
Recortar una imagen para cambiar su relación de aspecto elimina píxeles exteriores, reduciendo el recuento total pero manteniendo los píxeles restantes 100% nítidos. Estirar la imagen sin bloquear proporciones deformará el contenido.
¿Cómo se calcula la relación de aspecto a partir del ancho y alto?
Divide el ancho y el alto por su máximo común divisor (MCD). Por ejemplo, en 1920 × 1080, dividir ambos por 120 da 16:9. También puedes dividir el ancho entre el alto (1920 ÷ 1080 = 1.78) para obtener la relación decimal.
¿Qué relación de aspecto es ideal para publicaciones de Instagram?
Para publicaciones de feed vertical, 4:5 (1080 × 1350 px) ofrece el mayor espacio en pantalla. Las publicaciones cuadradas usan 1:1 (1080 × 1080 px) y las Stories/Reels usan 9:16 (1080 × 1920 px).
¿Qué es la propiedad CSS aspect-ratio?
Es una propiedad moderna de CSS que define la relación de aspecto preferida de un elemento (ej. `aspect-ratio: 16 / 9;`), evitando desplazamientos de diseño mientras se carga la imagen.
¿Mis imágenes se suben a algún servidor al usar esta herramienta?
No. Todos los análisis de relación de aspecto se realizan 100% en local en tu navegador con JavaScript. Tus imágenes nunca abandonan tu dispositivo.