Relación de aspecto explicada: 1:1, 4:5, 9:16, 16:9 y más

La relación de aspecto es la forma de una imagen: su ancho comparado con su alto, escrita con dos números como 16:9. Un vídeo de 1920×1080 y una miniatura de 1280×720 tienen tamaños distintos pero la misma relación de aspecto 16:9, así que uno se escala al otro sin recortes. La mayoría de los problemas de diseño con «el tamaño equivocado» son en realidad problemas de forma equivocada.

Las relaciones de aspecto comunes y dónde se usan

Los tamaños exactos en píxeles de cada plataforma están en los tamaños de imagen para redes sociales. Fíjate en lo pocas que son las formas: si sabes diseñar bien en 1:1, 4:5, 9:16 y 16:9, cubres la mayor parte de la presencia social de una marca.

Cómo calcular una relación de aspecto

Toma el ancho y el alto y divide ambos entre el mayor número que cabe exactamente en los dos, llamado máximo común divisor. Lo que queda es la relación en su forma más simple.

1. 1

   Empieza por el tamaño

   Digamos 1080×1350, una publicación vertical de Instagram.

2. 2

   Halla el máximo común divisor

   El mayor número que divide exactamente 1080 y 1350 es 270.

3. 3

   Divide ambos lados

   1080 ÷ 270 = 4 y 1350 ÷ 270 = 5. La relación de aspecto es 4:5.

4. 4

   O usa un decimal

   Divide el ancho entre el alto: 1080 ÷ 1350 = 0,8. Los decimales son útiles para formas incómodas como 1200×630, que es cerca de 1,91, de ahí 1,91:1.

Si prefieres no hacerlo a mano, estas pocas líneas de JavaScript hacen lo mismo en la consola de un navegador.

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

Convertir tamaños sin cambiar la forma

Para escalar una imagen y mantener su relación de aspecto, usa una sola fórmula: alto nuevo = ancho nuevo × alto de la relación ÷ ancho de la relación. Para un marco 16:9 de 1280 píxeles de ancho, es 1280 × 9 ÷ 16 = 720. Para un marco 4:5 de 1600 píxeles de ancho, es 1600 × 5 ÷ 4 = 2000.

Hacerlo al revés es igual de sencillo: ancho nuevo = alto nuevo × ancho de la relación ÷ alto de la relación. Un vídeo 9:16 que debe medir 1280 de alto mide 1280 × 9 ÷ 16 = 720 de ancho. Si el resultado sale con decimales, redondea al píxel entero más cercano; la diferencia es invisible.

Qué pasa cuando cambias la relación de aspecto

Escalar mantiene la forma. Cambiar la relación no, y solo tienes tres opciones honestas: recortar parte de la imagen, añadir espacio a su alrededor o reordenar el diseño para la nueva forma. La cuarta opción, estirar, deforma cada letra y cada círculo, y la gente lo nota enseguida.

Esto es lo que hace el cambio de tamaño en Gradiently con Pro: eliges los tamaños que necesitas y cada copia se recompone para su forma, mientras que el Mark que hay detrás se genera de nuevo en cada relación en lugar de recortarse de una sola imagen. Un mismo estilo, todos los tamaños lo explica paso a paso.

Qué relación de aspecto elegir para una publicación

Cuando una plataforma admite varias formas, elige la que ocupa más espacio en la pantalla de un móvil. En Instagram es 4:5, que es más alta que un cuadrado y soporta mejor el recorte de la cuadrícula del perfil; el tamaño de las publicaciones de Instagram explica por qué. En Pinterest, un pin 2:3 es el estándar; existen pines más largos, pero pueden cortarse en el feed, como se explica en el tamaño de los pines de Pinterest.

Para todo lo que se ve en una televisión o un portátil, 16:9 es la opción segura, y por eso las miniaturas de YouTube y las presentaciones la usan. Para todo lo que se ve a pantalla completa en un móvil, 9:16 es la única forma que lo llena. Ante la duda, diseña primero las versiones vertical y panorámica: el cuadrado y el 4:5 caben cómodamente entre ellas.

Relación de aspecto en CSS

En la web, la propiedad CSS aspect-ratio mantiene la forma de una caja a cualquier ancho, lo que evita que los diseños den saltos mientras cargan imágenes y vídeos. Es compatible con todos los navegadores actuales; consulta la referencia de aspect-ratio de MDN.

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

Las relaciones también importan en impresión y vídeo, con sus propias convenciones. Para los formatos de vídeo consulta los tamaños de vídeo para redes sociales, y para saber cómo se relacionan los píxeles con el tamaño físico, DPI frente a PPI.