Píxeles vs milímetros: guía completa de conversión de unidades

Cada pantalla y cada trabajo de impresión se asienta sobre la misma falla: un píxel no tiene un tamaño físico fijo. El mismo rectángulo de 100 píxeles se ve como 26 milímetros en un navegador típico, 8 milímetros en una página de revista y tan pequeño como 4 milímetros en una impresión de bellas artes. El número que traduce entre los píxeles digitales y la longitud del mundo real es DPI (puntos por pulgada), y acertar es la diferencia entre un botón que puedes pulsar cómodamente y uno al que el dedo se pasa, entre un logo que se imprime nítido y uno que sale borroso.

Esta guía recorre qué es realmente un píxel, por qué importa el DPI, las matemáticas que convierten entre píxeles y milímetros, los estándares de DPI con los que te encontrarás y los flujos de trabajo prácticos donde diseñadores, fotógrafos y desarrolladores tienen que hacer la conversión. Por el camino, señalaremos el Conversor de píxeles gratuito de Screen Ruler Online: ábrelo en otra pestaña y comprueba los números mientras lees.

¿Qué es un píxel?

Un píxel (abreviatura de "picture element", elemento de imagen) es la unidad discreta más pequeña de una imagen o pantalla digital. En una pantalla es un único punto direccionable, normalmente compuesto por tres subpíxeles —rojo, verde y azul— que se combinan para producir un color percibido. En un archivo de imagen es una sola entrada en una cuadrícula de valores de color. Lo crítico es que un píxel es una unidad lógica, no física. Su tamaño en el mundo real depende enteramente de cómo se haya calibrado el dispositivo que lo renderiza.

Considera una imagen de 1920×1080. En un monitor de 24 pulgadas funcionando a resolución nativa, cada píxel mide unos 0,265 mm de ancho. En un teléfono de 5,5 pulgadas que muestra la misma imagen escalada para encajar, cada píxel es de unos 0,06 mm. En una revista impresa a 300 DPI, cada píxel se convierte en 0,085 mm. La imagen es la misma; el tamaño físico de los píxeles es función del medio de salida.

Por eso las especificaciones que solo hablan de píxeles se rompen en cuanto cruzas medios. Una regla del tipo "haz este botón de 44 px de alto" que da un objetivo táctil cómodo en un iPhone produce una franja diminuta en un monitor 4K y una forma enorme en una valla publicitaria. Para hablar de tamaño real, hay que hablar de DPI.

¿Qué es DPI (y PPI)?

DPI significa "dots per inch" (puntos por pulgada): el número de píxeles (o puntos, en impresión) empaquetados en una pulgada lineal de superficie física. PPI es la misma idea aplicada específicamente a pantallas ("pixels per inch", píxeles por pulgada). Los dos términos se usan indistintamente en la escritura informal; esta guía dirá mayoritariamente DPI porque es de lo que dependen las matemáticas de conversión.

DPI es el factor de conversión:

inches = pixels / DPI
millimeters = (pixels / DPI) × 25.4

La constante 25,4 es fija: hay exactamente 25,4 milímetros en una pulgada por definición internacional. La variable es el DPI, y eso es lo que cambia entre medios:

Contexto	DPI típico	Qué significa
Web (píxeles CSS)	96 DPI	La resolución de referencia para navegadores y sistemas operativos
Tipografía Mac heredada	72 DPI	Un píxel = un punto tipográfico en el software temprano de Apple
Borrador / impresión de gran formato	150 DPI	Pósters, banners, pruebas
Impresión de alta calidad	300 DPI	Revistas, libros, packaging
Foto / bellas artes	600 DPI	Impresiones fotográficas, line art, texto bajo lupa

Los mismos 100 píxeles a estos cinco DPI se mapean a:

DPI	Pulgadas	Milímetros
72	1.389	35.28
96	1.042	26.46
150	0.667	16.93
300	0.333	8.47
600	0.167	4.23

Fíjate en lo drásticamente que se encoge la longitud física a medida que sube el DPI. La cantidad de píxeles nunca cambia; solo cambia la densidad asumida.

Las matemáticas, paso a paso

Supón que tienes un banner de 800 píxeles de ancho y quieres saber qué tamaño tendrá en pantalla. Empieza con la fórmula:

inches = pixels / DPI = 800 / 96 ≈ 8.33 inches
millimeters = inches × 25.4 ≈ 211.67 mm
centimeters = inches × 2.54 ≈ 21.17 cm

Así que 800 px al estándar web de 96 DPI son unos 21 cm de ancho, aproximadamente media hoja de papel A4.

Ahora mueve el mismo asset de 800 px a una impresión de 300 DPI:

inches = 800 / 300 ≈ 2.67 inches
millimeters ≈ 67.73 mm

Misma cantidad de píxeles, impresión drásticamente más pequeña. Para obtener el mismo tamaño físico en impresión, tendrías que triplicar el conteo de píxeles a unos 2400 px. Por eso los diseñadores de impresión piden "versiones a 300 DPI" de los assets web: la foto o el logo tiene que ser remuestreado o reexportado a mayor densidad de píxeles para que el mismo tamaño físico salga nítido.

La dirección inversa es igual de común. Una imprenta pide un logo de 100 mm × 50 mm a 300 DPI. Las dimensiones de píxeles requeridas son:

pixels = (millimeters / 25.4) × DPI
       = (100 / 25.4) × 300 ≈ 1181 px wide
       = (50 / 25.4) × 300 ≈ 591 px tall

El Conversor de píxeles hace esta ida y vuelta en tiempo real. Escribe 100 en el campo de milímetros, cambia el DPI a 300, y te muestra 1181 píxeles con un clic en una unidad.

Realidad web: 96 DPI y el píxel CSS

Los navegadores web modernos, los sistemas operativos y las especificaciones CSS estandarizan en 96 píxeles de referencia por pulgada. Esto significa que se supone que una línea de 96 px se renderiza como una pulgada de espacio físico de pantalla. En la práctica, varias cosas lo complican:

1. Escalado de pantalla. macOS y Windows pueden escalar la UI al 125%, 150%, 200%, etc. Una línea de 100 px en una pantalla 4K al 200% de escalado aparece al mismo tamaño físico que en una pantalla 1080p al 100%: un ajuste a nivel de sistema para que el texto no se reduzca a un tamaño ilegible en hardware de alto DPI.
2. Device pixel ratio (DPR). Una pantalla "Retina" o HiDPI renderiza varios píxeles físicos por cada píxel CSS. Las pantallas de iPhone suelen funcionar con DPR 3, lo que significa que el navegador dibuja 3 píxeles reales por cada píxel CSS que especifiques. Esto mantiene el texto nítido sin que tú hagas nada especial; CSS sigue hablando en píxeles CSS y la GPU se encarga del upsampling.
3. Zoom del navegador. El zoom iniciado por el usuario multiplica los píxeles CSS respecto a los píxeles físicos. Un zoom del 150% convierte una línea de 100 px en 150 píxeles CSS de trabajo para el motor de layout.

La conclusión: para diseño web, usa 96 DPI. Los píxeles CSS ya hablan el idioma correcto. Si estás produciendo una maqueta física que necesita imprimirse a tamaño exacto, cambia el conversor a 300 DPI y recalcula.

Realidad de impresión: 300 DPI y remuestreo

La impresión espera que cada píxel de los datos de origen esté físicamente empaquetado a la resolución del dispositivo. Una revista funcionando a 300 DPI quiere ver ~300 píxeles de detalle en cada pulgada impresa. Envía menos, y la prensa tendrá que interpolar: tus bordes se suavizan, las líneas finas se vuelven dentadas.

Los diseñadores convierten en dos fases:

1. Layout en unidades del mundo real. Un pliego de revista es "210 mm × 297 mm" (A4 vertical), no "2480 × 3508 píxeles". InDesign, Affinity Publisher y el modo de impresión de Photoshop te permiten configurar lienzos en milímetros o pulgadas.
2. Exportar al DPI objetivo. Cuando el layout se exporta a PDF o TIFF para la imprenta, el software remuestrea las imágenes raster al DPI objetivo. Una foto colocada al 100% de escala en una página de 300 DPI ya debería estar a 300 DPI en términos de píxeles. Si solo está a 150 DPI en términos de píxeles, será duplicada por la exportación, y ahí es cuando aparece la blandura.

El Conversor de píxeles es más útil durante la fase 1: averiguar cuántos píxeles obtener. Si necesitas que un logo se imprima a exactamente 50 mm de ancho en un folleto de 300 DPI, necesitas 591 px de detalle de origen. Sácalo a 300 px y verás borrosidad en imprenta.

Fotografía: del sensor a la impresión

Una cámara de 24 megapíxeles produce una imagen de unos 6000 × 4000 píxeles. Los fotógrafos convierten constantemente píxeles → tamaños físicos de impresión:

At 300 DPI: 6000 / 300 = 20 inches wide → 50.8 cm
At 240 DPI: 6000 / 240 = 25 inches wide → 63.5 cm
At 180 DPI: 6000 / 180 ≈ 33 inches wide → 84.7 cm

300 DPI es el estándar de oro para impresiones vistas a la distancia del brazo (libros, pruebas de galería). 240 DPI es aceptable cuando crece la distancia de visión: arte mural grande del que te alejas. 180 DPI es el suelo por debajo del cual la mayoría de la gente empieza a percibir blandura.

Los presets de 300 y 600 DPI del Conversor de píxeles cubren limpiamente el flujo de trabajo fotográfico: mete la cantidad de píxeles de tu sensor, ve las dimensiones de impresión en pulgadas y centímetros, decide si imprimir a resolución nativa o escalar.

Retina, HiDPI y el device pixel ratio

El iPhone 4 introdujo la marca "Retina" en 2010: una pantalla suficientemente densa como para que los píxeles individuales estén por debajo de la resolución de la visión humana a distancias de visualización típicas. Hoy, la mayoría de las pantallas de portátiles, tabletas y teléfonos son HiDPI, con dos o tres píxeles físicos por cada píxel CSS.

Para el conversor, esto no cambia nada. Los píxeles CSS siguen siendo 96 DPI por convención web. Las matemáticas de HiDPI las gestiona el navegador. Si estás haciendo diseño de iconos o exportación de assets específicamente apuntando a devicePixelRatio (por ejemplo, exportando versiones @2x y @3x del mismo asset), entonces sí, duplica o triplica la cantidad de píxeles de tu origen, pero la conversión a milímetros físicos sigue usando 96 DPI para la referencia CSS.

Si estás haciendo una maqueta visual a tamaño físico 1:1 en una pantalla HiDPI, puedes:

• Seguir trabajando en píxeles CSS a 96 DPI (recomendado: el OS gestiona el escalado)
• Multiplicar por window.devicePixelRatio para la cantidad real de píxeles físicos, y luego dividir por el PPI verdadero del dispositivo (que varía según el hardware) para el tamaño físico

El conversor hace la versión más simple. Para una medición precisa de tamaño físico en cualquier pantalla específica, calibra primero con la herramienta Screen Ruler.

Detalles comunes

Mezclar 72 y 96. Los assets antiguos de Mac exportados desde Illustrator o Photoshop a veces llevan una etiqueta de metadatos de 72 DPI. Si los importas a un layout de impresión a 300 DPI, el software podría escalarlos inesperadamente. Comprueba siempre las dimensiones "reales" en píxeles del archivo importado, no su etiqueta de DPI.

"DPI" en exportaciones web. El "Save for Web" de Photoshop pone el DPI a 72 por defecto, y no importa, porque los navegadores ignoran la etiqueta y asumen 96. No te preocupes. La cantidad de píxeles es lo que importa para web.

Reducir la impresión por debajo de la resolución nativa. Bajar de 200 DPI para impresión vista a distancia de lectura es cuando la blandura se vuelve obvia. El Conversor de píxeles no te detiene, pero las matemáticas te dirán la verdad: un asset de 600 px a 50 mm de ancho son 305 DPI; el mismo asset a 100 mm de ancho son solo 152 DPI.

Olvidar el escalado CSS en monitores 4K. Un diseño 1080p probado en un monitor 4K al 200% de escalado se ve bien. Baja el escalado al 100% y el mismo diseño se ve a la mitad del tamaño. Prueba siempre con el escalado típico del usuario, no a resolución nativa.

Deriva de relación de aspecto al remuestrear. Si escalas una imagen de 1920 × 1080 para encajar en un cuadrado de 1024 × 1024, vas a recortar o distorsionar. La cantidad de píxeles cambia; la relación de aspecto también importa. Combina el Conversor de píxeles con la Calculadora de relación de aspecto cuando ambos factores entren en juego.

Cuándo usar qué DPI

Una referencia rápida del DPI a elegir:

• Diseño web, UI de app, assets solo de navegador: 96 DPI. Siempre.
• Plantillas de documentos que pueden ir a impresión: 96 para layout, pero modela la salida impresa a 300 DPI antes de exportar.
• Pruebas de impresión, banners de gran formato, pósters vistos a distancia: 150 DPI está bien.
• Revistas, libros, packaging, material de marketing visto de cerca: 300 DPI es el suelo.
• Impresiones fotográficas, line art fino, layouts con mucho texto bajo lupa: 300-600 DPI.
• Assets antiguos heredados de Mac: 72 DPI existe por compatibilidad. No lo uses para trabajo nuevo.

Ante la duda, por defecto 96 para pantalla y 300 para impresión. El Conversor de píxeles tiene ambos como presets de un clic.

Poniéndolo todo junto

Un día típico de un diseñador de marca podría verse así. El product manager pide "un banner principal, 1920 × 720 px, que se imprima nítido a 300 DPI para un póster de evento". Abres el conversor, introduces 1920 en el campo de píxeles, cambias a 300 DPI: eso son 162,56 mm de ancho. La especificación del póster es 297 mm × 420 mm (A3). A 162,56 mm, el asset solo llenará la mitad superior, lo que significa que necesitas un origen de 3508 × 1316 px para 297 mm de ancho completo a 300 DPI. Ahora sabes qué pedirle al fotógrafo.

Un desarrollador web que adapta una maqueta de impresión va en la otra dirección. La maqueta tiene 100 mm de alto a 300 DPI, eso son 1181 px en el origen, pero la web se muestra a 96 DPI en pantalla. Si colocan el asset a 1181 px de alto en CSS, será de unos 308 mm de alto en pantalla, demasiado grande. Necesitan o bien reducir a 378 px (= 100 mm × 96 / 25.4) o establecer dimensiones CSS en unidades mm explícitamente.

Las conversiones son lo bastante simples como para memorizarlas tras unas cuantas rondas. Pero cuando estás moviendo assets entre medios a velocidad, tener una herramienta dedicada que gestione las matemáticas, recuerde los presets de DPI y te deje copiar el resultado es la diferencia entre un flujo de trabajo fluido y aritmética constante. Para eso es exactamente el Conversor de píxeles.

Relacionado

• Calculadora de relación de aspecto — cuando estás convirtiendo dimensiones de píxeles, la relación de aspecto también importa
• Screen Ruler — para medir objetos físicos contra tu pantalla a tamaño calibrado 1:1
• Base de datos de especificaciones de dispositivos — para consultar el PPI real de cualquier teléfono, tableta o portátil