# Calculadora de Relación de Aspecto para Imágenes y Video: Arquitectura Técnica y Guía Exhaustiva

La ingeniería de pantallas, la cinematografía digital, la computación gráfica y el diseño web responsivo dependen de proporciones geométricas rigurosas. Ya sea al masterizar un largometraje para cine digital (DCI), codificar transmisiones adaptativas (HLS/DASH), maquetar interfaces CSS que eliminen el Cumulative Layout Shift (CLS) o configurar monitores ultrapanorámicos, calcular la relación de aspecto (aspect ratio) es una disciplina técnica fundamental.

La relación de aspecto define la proporción entre ancho y alto de una imagen o fotograma. Traducir entre resoluciones (1920×1080 o 3840×2160), notaciones canónicas (16:9, 4:3, 21:9) y restricciones de códecs (como divisibilidad mod 2 o mod 16) suele causar fallos de renderizado y cierres en codificadores.

La Calculadora de Relación de Aspecto de ToolsAA integra una calculadora de relación de aspecto interactiva, una calculadora de resolución 16:9, un escalador para códecs y un analizador de metadatos. Con arquitectura 100% en el cliente ("use client"), todos los cálculos y vistas previas en canvas se procesan en la memoria local del navegador. Cero datos o archivos salen de su dispositivo, garantizando privacidad absoluta.

# Visión General y Casos de Uso en Entornos de Producción

En su fundamento matemático, una relación de aspecto expresa:

$$\text{Relación de Aspecto} = \frac{\text{Ancho } (W)}{\text{Alto } (H)}$$

Históricamente, los medios audiovisuales usaron aperturas fijas, desde el $4:3$ mudo de Edison hasta el estándar de la Academia ($1.375:1$). Los flujos digitales modernos gestionan geometrías horizontales, verticales y anamórficas en múltiples dispositivos.

+-----------------------------------------------------------------------------------------+
|                  Flujo de Geometría de Pantallas y Formatos de Video Modernos           |
|  32:9 Super Ultrapanorámico (5120x1440)  | 16:9 Estándar Panorámico (3840x2160, 1920x1080) |
|  21:9 Ultrapanorámico Cinema (3440x1440) | 16:10 Pantallas Portátiles (2560x1600, MacBook) |
|  4:3 Estándar Clásico (1024x768)         | 9:16 Video Vertical (1080x1920, TikTok/Reels)   |
+-----------------------------------------------------------------------------------------+

# Casos de Uso Críticos en Ingeniería de Software

• Diseño Web Responsivo (Prevención de CLS): aspect-ratio: 16 / 9 (W3C CSS Box Sizing 4) reserva espacio antes de descargar el recurso, eliminando el Cumulative Layout Shift (CLS).
• Streaming Adaptativo (HLS/DASH): Las escaleras de transcodificación exigen que cada perfil (1080p a 360p) mantenga idéntica geometría respetando macrobloques (mod 2 o mod 16).
• Redes Sociales Multiplataforma: Adaptación de masters 4K UHD (3840×2160, $16:9$) a video vertical (1080×1920, $9:16$) y retrato (1080×1350, $4:5$) sin distorsión.
• Optimización de Pantallas: Calibración de la relación de aspecto de pantalla, tasas de refresco y campo visual (FOV) en paneles nativos ($16:9$, $21:9$ o $32:9$).
• Cinematografía Anamórfica: Descompresión óptica desde la relación del sensor (SAR) a la relación de visualización (DAR).

# Procesamiento en el Cliente para Cero Fugas de Datos

Las utilidades web convencionales suben archivos a servidores remotos, exponiendo metraje confidencial y vulnerando SOC 2, HIPAA y RGPD. ToolsAA opera 100% en el navegador mediante Web APIs modernas, garantizando que cero bytes salgan de su equipo.

# Arquitectura Técnica y Funcionamiento Interno

Calcular y escalar dimensiones multimedia exige aritmética euclidiana, particionamiento de macrobloques en códecs y APIs web de alto rendimiento.

# 1. Máximo Común Divisor (MCD) y el Algoritmo de Euclides

Para reducir dimensiones $(W, H)$ a su relación irreducible $(w:h)$, los valores se dividen por su Máximo Común Divisor (MCD) en tiempo logarítmico $O(\log(\min(W, H)))$:

$$\gcd(a, b) = \begin{cases} a & \text{si } b = 0 \\ \gcd(b, a \bmod b) & \text{si } b > 0 \end{cases}$$

Para Full HD ($1920 \times 1080$), $\gcd(1920, 1080) = 120$. Dividir entre 120 produce $16$ y $9$, confirmando formalmente la proporción 16:9.

# 2. Aproximaciones Racionales y Fracciones Continuas

Ratios como CinemaScope ($2.39:1$) o Academy Flat ($1.85:1$) son valores sobre 1. Además, el término comercial "21:9" no equivale a $21/9 \approx 2.333$; es una designación para $64:27$ ($2.37037$) o $43:18$ ($2.3888$). ToolsAA usa el Método de Fracciones Continuas para aproximar reales mediante convergentes $pk / qk$:

$$x = a0 + \cfrac{1}{a1 + \cfrac{1}{a_2 + \dots}}$$

Evaluar convergentes con $\epsilon \le 10^{-5}$ mapea valores como $2.3704$ a fracciones exactas como $64:27$.

# 3. Macrobloques en Códecs de Video y Restricciones de Divisibilidad

En codificación de video, dimensiones arbitrarias generan fallos:

• Submuestreo Cromático (YUV 4:2:0) y Mod-2: Canales de color ($U, V$) tienen la mitad de resolución que luminancia ($Y$). Las dimensiones deben ser divisibles entre 2 ($\text{mod } 2$).
• Alineación de Macrobloques y Mod-16: H.264 divide fotogramas en bloques de $16 \times 16$. Si la altura no es divisible por 16 ($1080 / 16 = 67.5$), los codificadores rellenan a 1088 o fallan.
• HEVC / AV1 (CTUs) y Mod-8: Códecs modernos agrupan píxeles en bloques de $64 \times 64$, requiriendo alineación a $\text{mod } 8$.

# 4. DAR vs. SAR vs. PAR: Transformación Anamórfica

La ingeniería de video distingue tres relaciones geométricas: $$\text{DAR} = \text{SAR} \times \text{PAR} = \left(\frac{W{\text{almacenamiento}}}{H{\text{almacenamiento}}}\right) \times \left(\frac{\text{PAR}x}{\text{PAR}y}\right)$$ Al reescalar metraje anamórfico, aplique el factor de descompresión (de-squeeze de $1.33\times$, $1.5\times$ o $2.0\times$) para evitar distorsiones.

# 5. Web APIs del Navegador: Extracción Local de Metadatos

• URLs de Objeto (URL.createObjectURL): Punteros en memoria (blob:...) hacia búferes locales.
• Elementos Multimedia HTML5: Image y HTMLVideoElement capturan dimensiones en loadedmetadata.
• HTML5 Canvas: Renderiza vistas de encuadre (letterbox/pillarbox) sin costes de reflujo del DOM.
• Liberación de Memoria: Revoca punteros con URL.revokeObjectURL() tras extraer dimensiones.

# Guía Práctica de Uso Paso a Paso

# Paso 1: Introducir Dimensiones o Seleccionar Preajustes

Abra la pestaña Calculadora. Ingrese ancho y alto (ej. 1920 y 1080), o elija un preajuste: 16:9 (HDTV/monitores), 9:16 (TikTok/Reels), 21:9 (Ultrapanorámico), 4:3 (Retro/iPad), 16:10 (MacBook Pro), 1:1 (Cuadrado) o 2.39:1 (CinemaScope).

# Paso 2: Bloquear una Dimensión y Calcular Objetivos Proporcionales

Al generar escaleras de transcodificación:

1. Active Bloquear Ancho o Bloquear Alto.
2. Ingrese la dimensión objetivo (ej. ancho 1280).
3. El motor calcula la dimensión proporcional ($1280 \times 720$), mostrando píxeles totales, megapíxeles ($0.92\text{ MP}$) y ratio ($1.7778$).

# Paso 3: Configurar Modos de Redondeo para Códecs de Video

Seleccione el límite de códec en el selector Modo de Redondeo:

• Redondear a Par (mod 2): Obligatorio para codificación $YUV 4:2:0$.
• Mod-4 / Mod-8: Recomendado para streaming móvil eficiente.
• Mod-16: Exigido para perfiles baseline H.264 por hardware.

# Paso 4: Inspeccionar Archivos Multimedia Locales con Privacidad

Abra Inspector de Archivos. Arrastre imágenes o videos. El navegador extrae dimensiones vía Blob, calcula la proporción por MCD y genera una vista previa. Cero bytes salen de su equipo.

# Paso 5: Exportar Fragmentos de Código y Reglas CSS Responsivas

Haga clic en Exportar para copiar fragmentos listos para producción:

• Regla CSS: aspect-ratio: 16 / 9; width: 100%; object-fit: cover;
• Utilidad Tailwind: aspect-video o aspect-[16/9]
• Filtro FFmpeg: -vf "scale=1920:1080:forceoriginalaspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2"

# Implementaciones de Código en TypeScript Moderno y Python

Las siguientes implementaciones demuestran la reducción canónica por MCD de Euclides, el escalado geométrico condicionado por códecs y el análisis de proporciones.

# Implementación en TypeScript / JavaScript Moderno

export type CodecMode = "none" | "even" | "mod16";

export function calcGCD(a: number, b: number): number {
  let [x, y] = [Math.abs(Math.round(a)), Math.abs(Math.round(b))];
  while (y) [x, y] = [y, x % y];
  return x || 1;
}

export function calcAspectRatio(w: number, h: number) {
  const d = calcGCD(w, h);
  return { ratio: `${w / d}:${h / d}`, decimal: Number((w / h).toFixed(4)), gcd: d };
}

export function scaleDimension(
  targetW: number | null, targetH: number | null,
  rw: number, rh: number, mode: CodecMode = "even"
) {
  const align = (v: number) => {
    const r = Math.round(v);
    if (mode === "even") return r % 2 === 0 ? r : r + 1;
    if (mode === "mod16") return Math.round(r / 16) * 16;
    return r;
  };
  const w = targetW !== null ? align(targetW) : align((targetH! * rw) / rh);
  const h = targetH !== null ? align(targetH) : align((w * rh) / rw);
  return { width: w, height: h, pixels: w * h };
}

# Modern Python 3.10+ Implementation

import math
from typing import Literal, Optional

CodecMode = Literal["none", "even", "mod16"]

def calc_aspect_ratio(w: int, h: int) -> tuple[str, float, int]:
    d = math.gcd(w, h)
    return f"{w // d}:{h // d}", round(w / h, 4), d

def scale_dimension(
    target_w: Optional[int], target_h: Optional[int],
    rw: int, rh: int, mode: CodecMode = "even"
) -> tuple[int, int, str]:
    def align(v: float) -> int:
        r = round(v)
        if mode == "even": return r if r % 2 == 0 else r + 1
        if mode == "mod16": return round(r / 16) * 16
        return r
    w = align(float(target_w)) if target_w else align((float(target_h) * rw) / rh)
    h = align(float(target_h)) if target_h else align((float(w) * rh) / rw)
    return w, h, f"scale={w}:{h}:flags=lanczos"

# Errores Frecuentes, Casos Extremos y Guía de Resolución de Problemas

# 1. El Error Crítico "width / height not divisible by 2" en FFmpeg

• El Síntoma: Filtros como -vf "scale=720:-1" fallan con width not divisible by 2 (720x405).
• La Causa: El submuestreo $YUV 4:2:0$ no puede dividir planos impares.
• La Solución: Use -2 en vez de -1 (scale=720:-2) para forzar dimensiones pares ($406$).

# 2. Renderizado de Subpíxeles y Sangrado de 1px en Bordes CSS

• El Síntoma: Líneas de 1px parpadean en bordes con aspect-ratio: 16 / 9.
• La Causa: Alturas fraccionales (ej. $341.33\text{px}$) generan desfases con el fondo.
• La Solución: Aplique transform: translateZ(0) o backface-visibility: hidden para forzar rasterización en GPU.

# 3. Confusión entre el "21:9" Comercial y las Proporciones Matemáticas Reales

• El Síntoma: Diseñar a $21/9$ provoca barras negras (pillarboxing) en pantallas ultrapanorámicas.
• La Causa: Los monitores usan $64:27$ ($2560\times1080$) o $43:18$ ($3440\times1440$), no $21/9$ ($2.333$).
• La Solución: Programe sobre fracciones nativas ($64:27$ o $43:18$) en coordenadas de diseño.

# 4. Cumulative Layout Shift (CLS) por Omisión de Dimensiones

• El Síntoma: La página salta durante la carga de imágenes.
• La Causa: El navegador no calcula la geometría antes de descargar el archivo.
• La Solución: Declare atributos width y height junto con aspect-ratio: 16 / 9.

# 5. Distorsión en Metraje Anamórfico por Confundir SAR con DAR

• El Síntoma: Videos grabados con lentes anamórficas se importan achatados horizontalmente.
• La Causa: La compresión óptica exige descompresión geométrica ($\text{DAR} = \text{SAR} \times \text{PAR}$).
• La Solución: Aplique el factor de descompresión ($1.33\times$, $1.5\times$ o $2.0\times$) en la línea de tiempo.

# Preguntas Frecuentes Técnicas (FAQ)

# Q1: ¿Cómo calculo la relación de aspecto de cualquier resolución personalizada?

Respuesta: Divida ancho y alto por su Máximo Común Divisor (MCD) con el algoritmo de Euclides. Para $1200 \times 800$, $\gcd(1200, 800) = 400$. Dividir entre 400 da la proporción canónica irreductible de $3:2$.

# Q2: ¿Por qué FFmpeg arroja el error "width not divisible by 2" al redimensionar videos?

Respuesta: Códecs como H.264 usan submuestreo $YUV 4:2:0$, requiriendo dimensiones pares para planos de color. Use -2 en el filtro de escala (scale=720:-2) para redondear a pares automáticamente.

# Q3: ¿Un monitor ultrapanorámico 21:9 equivale realmente a dividir 21 entre 9?

Respuesta: No. "21:9" es una etiqueta comercial. El hardware nativo usa $64:27$ ($2560\times1080$, $2.370:1$) o $43:18$ ($3440\times1440$, $2.388:1$), mientras que la división $21/9$ equivale a $2.333:1$.

# Q4: ¿Cuál es la diferencia entre DAR, SAR y PAR en ingeniería de video?

Respuesta: DAR (Display Aspect Ratio) es la proporción visible en pantalla ($16:9$). SAR (Storage Aspect Ratio) es el cociente de píxeles almacenados ($720/480$). PAR (Pixel Aspect Ratio) es la forma geométrica del píxel. Se vinculan mediante $\text{DAR} = \text{SAR} \times \text{PAR}$.

# Q5: ¿Cómo evito el Cumulative Layout Shift (CLS) usando CSS aspect-ratio?

Respuesta: Defina aspect-ratio: 16 / 9; width: 100%; object-fit: cover; en CSS junto con atributos HTML width y height. El navegador reserva el espacio antes de descargar la imagen.

# Q6: ¿Cuáles son las resoluciones estándar para el formato panorámico 16:9?

Respuesta: Incluyen $720\text{p}$ ($1280\times720$), $1080\text{p}$ FHD ($1920\times1080$), $1440\text{p}$ QHD ($2560\times1440$), $4\text{K}$ UHD ($3840\times2160$) y $8\text{K}$ ($7680\times4320$).

# Q7: ¿La Calculadora de Relación de Aspecto de ToolsAA sube mis archivos a un servidor?

Respuesta: No. ToolsAA opera 100% en el cliente ("use client"). Los cálculos de MCD e inspecciones se ejecutan en la memoria del navegador vía Web APIs y objetos Blob, con cero transmisión de red.

# Matriz de Referencia Técnica: Resoluciones y Relaciones de Aspecto Estándar

# Conclusión

La ingeniería visual exige precisión al configurar geometrías de imagen, proporciones cinematográficas y maquetación web responsiva. Un error de redondeo puede causar fallos en codificadores, defectos de renderizado o penalizaciones de Cumulative Layout Shift.

Al combinar la simplificación euclidiana por MCD con las restricciones de códecs (mod 2, mod 8, mod 16), desarrolladores y creadores pueden formatear cualquier archivo de manera predecible. La Calculadora de Relación de Aspecto de ToolsAA ofrece una interactiva calculadora de relación de aspecto, una completa calculadora de resolución 16:9 y un versátil inspector de relación de aspecto de pantalla en una interfaz unificada.

Operando en el navegador bajo arquitectura en el cliente ("use client"), ToolsAA procesa cálculos, vistas previas e inspecciones localmente en memoria. Esto asegura máximo rendimiento, latencia nula y confidencialidad absoluta para todos sus activos digitales.\n