¿Cómo calcula Convertitive la relación de aspecto?

Dadas las dimensiones en píxeles W × H, calculamos MCD(W, H) usando el algoritmo de Euclides (Elementos de Euclides, Libro VII, c. 300 a.C.) y devolvemos W/MCD : H/MCD como el ratio reducido. Por ejemplo, 1920 × 1080: MCD(1920, 1080) = 120, por lo que el ratio es 16:9. Las relaciones no enteras (p. ej., 2.35:1 del cine anamórfico) se muestran como decimal cuando no existe ninguna reducción de enteros pequeños dentro de una tolerancia de 0.01.

¿Qué fórmula usa la calculadora DPI / PPI?

PPI = √(W² + H²) / diagonal_pulgadas, donde W y H son conteos de píxeles y diagonal_pulgadas es la diagonal física de la pantalla. Esta es la fórmula estándar de densidad de píxeles diagonal. Nota: PPI es técnicamente píxeles por pulgada a lo largo de cualquier eje solo si los píxeles son cuadrados: los píxeles no cuadrados (comunes en vídeo de difusión, p. ej., el 720 × 576 de DVB con relación de aspecto de visualización 16:9) requieren valores PPI horizontales y verticales separados.

¿Cuál es la diferencia entre DPI y PPI?

DPI (puntos por pulgada) se refiere a la resolución de salida de la impresora: cuántos puntos de tinta coloca una impresora por pulgada lineal. PPI (píxeles por pulgada) se refiere a la densidad de píxeles de la pantalla. Los dos son numéricamente intercambiables al establecer metadatos de resolución de imagen para imprimir, pero describen cantidades físicamente diferentes. CSS usa 'dpi' como unidad de media query (CSS Values Level 4) donde 1dppx = 96dpi por definición.

¿Qué tan preciso es el cálculo de DPI?

La fórmula es matemáticamente exacta con entradas precisas. La principal fuente de error es la medición de la diagonal física: las cifras de diagonal informadas por el fabricante se redondean a 0.1 pulgadas, introduciendo una incertidumbre de ±0.05 pulgadas. Para una pantalla de 15.6 pulgadas con 1920 × 1080 esto da PPI = 141.2 ± 0.5. Los preajustes de dispositivo en nuestra calculadora usan la diagonal publicada por el fabricante, que puede diferir del valor físicamente medido en un 0-2%.

¿Cuál es la norma ISO para las relaciones de aspecto del papel?

ISO 216:2007 define los tamaños de papel de la serie A, la serie B y la serie C. Los papeles de la serie A tienen una relación de aspecto de 1:√2 ≈ 1:1.41421356… Esta es la única relación de aspecto donde doblar una hoja por la mitad produce la misma relación de aspecto. A0 se define como exactamente 1 m² de área; cada tamaño An posterior tiene la mitad del área del anterior. La proporción √2 es la razón por la que A4 doblado produce exactamente A5.

Methodology

Metodología de diseño

Relación de aspecto mediante reducción por MCD. DPI como cantidad por eje con respaldo de preajustes de dispositivo.

By Buğra SözeriPublished May 15, 2026

El clúster de Diseño incluye dos calculadoras: relación de aspecto y DPI/PPI. Ambas son utilidades de matemáticas puras que todo desarrollador front-end y diseñador gráfico necesita varias veces por semana.

Relación de aspecto: el algoritmo de Euclides

Dado el ancho y la altura, la relación de aspecto reducida es ancho:altura dividido por su máximo común divisor. Usamos el algoritmo de Euclides (MCD recursivo) sobre entradas redondeadas a enteros:

mcd(a, b) = b == 0 ? a : mcd(b, a mod b)
ratio = (w / mcd, h / mcd)

Para 1920×1080, mcd(1920, 1080) = 120, por lo que el ratio reducido es 16:9. Para entradas no enteras (p. ej., 1920.5×1080.3), redondeamos al entero más cercano antes de reducir: las medidas de medio píxel son ruido del software de origen, no una relación real.

Escalado

El widget también admite la operación inversa: «dame una altura para el ancho X que coincida con mi ratio actual». La fórmula es simplemente nuevaAltura = nuevoAncho × h / w usando el ratio original (sin reducir) para que la deriva de punto flotante no se acumule.

¿Por qué no reducir siempre a la mínima expresión?

Algunos ratios estándar se reducen a números menos legibles. El ratio cinematográfico 2.39:1 es técnicamente 239:100, que es la forma reducida pero más difícil de reconocer. Mostramos el ratio reducido cuando ambos términos son menores de 1000; para ratios que no se reducen limpiamente mostramos la forma decimal (2.39:1).

DPI / PPI: píxeles por unidad física

DPI (puntos por pulgada) y PPI (píxeles por pulgada) son términos intercambiables en la práctica: ambos miden la densidad de píxeles por pulgada en contextos de impresión y pantalla. Las matemáticas:

DPI = √(w_px² + h_px²) / diagonal_pulgadas

Se usa la diagonal porque las pantallas se especifican por su dimensión diagonal (un «portátil de 15 pulgadas» significa una pantalla con 15 pulgadas de diagonal). El DPI por eje usa la misma fórmula aplicada por eje; para píxeles cuadrados (que tienen todas las pantallas modernas), los dos valores son idénticos.

La pregunta sobre la pantalla retina

Apple acuñó «retina» para describir pantallas donde la densidad de píxeles supera la capacidad del ojo humano para resolver píxeles individuales a la distancia de visión típica. El umbral:

Teléfono (visto a ~30 cm): 326 PPI
Tableta (~38 cm): 264 PPI
Portátil (~50 cm): 220 PPI
Monitor de escritorio (~76 cm): 150 PPI
TV (~3 m): 50 PPI

Estos no son umbrales rígidos: el ojo humano varía, y el supuesto de «distancia de visión típica» es la variable más importante. Los teléfonos modernos funcionan a 400-500 PPI, cómodamente por encima del umbral.

Derivar el DPI por eje a partir de una especificación diagonal

El marketing de pantallas especifica la diagonal en pulgadas (un portátil de 15.6 pulgadas), pero la calculadora necesita una densidad por eje. La derivación encadena el teorema de Pitágoras con la cuadrícula de píxeles enteros. Para una pantalla con resolución de píxeles (w_px, h_px) y diagonal D pulgadas, el ancho y la altura físicos en pulgadas satisfacen w_in² + h_in² = D². Si los píxeles son cuadrados, que asumen todas las pantallas de panel plano desde principios de los 2000, entonces w_in / h_in = w_px / h_px. Resolviendo las dos restricciones para w_in:

w_in = D × w_px / √(w_px² + h_px²)
DPI = w_px / w_in = √(w_px² + h_px²) / D

Esa forma diagonal de píxeles es la que incluye la calculadora. Para una pantalla de 2560 × 1440 en un monitor de 27 pulgadas: √(2560² + 1440²) ≈ 2938 píxeles de diagonal, dividido por 27 pulgadas, da 108.8 PPI. Los valores por eje son idénticos para píxeles cuadrados, por lo que la densidad horizontal y vertical coinciden. Los casos de píxeles no cuadrados (algunos formatos de vídeo SD heredados, escalado de hardware de proyector) requieren entradas separadas de w y h y rompen el acceso directo de solo diagonal.

Fuentes y referencias

El algoritmo MCD de Euclides (Elementos, Libro VII) es la cita principal para la reducción de la relación de aspecto. Las unidades de resolución CSS, incluida la relación entre dppx y dpi, están en la especificación W3C CSS Values Level 4. ISO 216 define los tamaños de papel de la serie A basados en √2 que anclan varios preajustes de DPI. Las cifras de PPI del «umbral retina» derivan del anuncio del iPhone 4 de Apple de 2010 y la posterior revisión de pares del umbral de agudeza visual de «1 minuto de arco» (Snellen 20/20).

Supuestos y limitaciones

Solo entradas de píxeles enteros. Las medidas de sub-píxel (1920.5 × 1080.3) se redondean al entero más cercano antes de la reducción por MCD. La respuesta de la relación de aspecto es para la cuadrícula redondeada, no para la fuente de punto flotante.
Se asumen píxeles cuadrados. Los paneles planos modernos tienen píxeles cuadrados; algunos contenidos NTSC/PAL heredados y el escalado de hardware de proyector tienen píxeles rectangulares y necesitarían entradas DPI por eje.
La entrada de diagonal en pulgadas ignora el bisel. La cifra de 15.6 pulgadas del portátil se refiere a la diagonal de la pantalla activa. Si mide el chasis obtendrá un DPI un ~5-10% menor que el DPI real de la pantalla.
Sin puente automático DPR a DPI. Los píxeles CSS y los píxeles de dispositivo están relacionados por el window.devicePixelRatio del navegador; la calculadora opera sobre píxeles físicos y deja la conversión al usuario.
Límite de visualización del ratio a 1000:1000. Los ratios que se reducen a términos superiores a 1000 (p. ej., 2.39:1 del cine) se muestran como decimales, lo que puede confundir a las herramientas que esperan pares de enteros.
Sin manejo de DPI para configuraciones de mosaico o múltiples monitores. La calculadora trabaja con una pantalla a la vez.

Por qué el «píxel CSS» es diferente del «píxel de dispositivo»

En una pantalla retina, un píxel CSS 1×1 es en realidad 2×2 o 3×3 píxeles de dispositivo: el navegador escala hacia arriba para mantener el texto legible a la distancia de visión típica. devicePixelRatio en el navegador expone este ratio. La calculadora de DPI opera sobre píxeles físicos; si está diseñando específicamente para píxeles CSS, divida el DPI reportado por el devicePixelRatio objetivo.

Frequently asked questions

¿Cómo calcula Convertitive la relación de aspecto?: Dadas las dimensiones en píxeles W × H, calculamos MCD(W, H) usando el algoritmo de Euclides (Elementos de Euclides, Libro VII, c. 300 a.C.) y devolvemos W/MCD : H/MCD como el ratio reducido. Por ejemplo, 1920 × 1080: MCD(1920, 1080) = 120, por lo que el ratio es 16:9. Las relaciones no enteras (p. ej., 2.35:1 del cine anamórfico) se muestran como decimal cuando no existe ninguna reducción de enteros pequeños dentro de una tolerancia de 0.01.
¿Qué fórmula usa la calculadora DPI / PPI?: PPI = √(W² + H²) / diagonal_pulgadas, donde W y H son conteos de píxeles y diagonal_pulgadas es la diagonal física de la pantalla. Esta es la fórmula estándar de densidad de píxeles diagonal. Nota: PPI es técnicamente píxeles por pulgada a lo largo de cualquier eje solo si los píxeles son cuadrados: los píxeles no cuadrados (comunes en vídeo de difusión, p. ej., el 720 × 576 de DVB con relación de aspecto de visualización 16:9) requieren valores PPI horizontales y verticales separados.
¿Cuál es la diferencia entre DPI y PPI?: DPI (puntos por pulgada) se refiere a la resolución de salida de la impresora: cuántos puntos de tinta coloca una impresora por pulgada lineal. PPI (píxeles por pulgada) se refiere a la densidad de píxeles de la pantalla. Los dos son numéricamente intercambiables al establecer metadatos de resolución de imagen para imprimir, pero describen cantidades físicamente diferentes. CSS usa 'dpi' como unidad de media query (CSS Values Level 4) donde 1dppx = 96dpi por definición.
¿Qué tan preciso es el cálculo de DPI?: La fórmula es matemáticamente exacta con entradas precisas. La principal fuente de error es la medición de la diagonal física: las cifras de diagonal informadas por el fabricante se redondean a 0.1 pulgadas, introduciendo una incertidumbre de ±0.05 pulgadas. Para una pantalla de 15.6 pulgadas con 1920 × 1080 esto da PPI = 141.2 ± 0.5. Los preajustes de dispositivo en nuestra calculadora usan la diagonal publicada por el fabricante, que puede diferir del valor físicamente medido en un 0-2%.
¿Cuál es la norma ISO para las relaciones de aspecto del papel?: ISO 216:2007 define los tamaños de papel de la serie A, la serie B y la serie C. Los papeles de la serie A tienen una relación de aspecto de 1:√2 ≈ 1:1.41421356… Esta es la única relación de aspecto donde doblar una hoja por la mitad produce la misma relación de aspecto. A0 se define como exactamente 1 m² de área; cada tamaño An posterior tiene la mitad del área del anterior. La proporción √2 es la razón por la que A4 doblado produce exactamente A5.

Published May 15, 2026