Cómo usar un conversor de píxeles (paso a paso)

Screen Ruler TeamApril 28, 202610 min read
how to use pixel converterpixels to mmpixels to inchesDPI conversion

No necesitas una tabla, una calculadora ni buscar "cuántos mm hay en 96 px" para convertir píxeles a unidades físicas. El conversor de píxeles gratuito de Screen Ruler Online hace los cálculos al instante, pero solo si sabes qué DPI elegir. Esta guía recorre todo el flujo de trabajo: pegar un valor, elegir el DPI según tu contexto y leer la unidad correcta al otro lado. Al terminar habrás hecho la conversión de tres formas distintas para tres situaciones distintas: diseño web, preparación para impresión y copias fotográficas.

La versión de 30 segundos

Si tienes prisa, los pasos son:

  1. Abre screenruler.online/pixel-converter.
  2. Escribe o pega tu valor en el campo de entrada.
  3. Pulsa el chip de unidad (px / mm / cm / inch) que coincida con tu valor.
  4. Elige un preajuste de DPI: 96 para web, 300 para impresión, 600 para fotografía.
  5. Lee los valores convertidos en el panel de resultados. Pulsa Copy junto a cualquier unidad para llevarla al portapapeles.

Eso es todo. El resto de la guía es para cuando necesites saber por qué elegiste 96 en lugar de 300, o cuando el resultado no coincida con lo que indica tu herramienta de diseño, o cuando la conversión vaya en sentido contrario.

Paso 1: abre el conversor

Navega a https://screenruler.online/pixel-converter. La página carga al instante: no hay cuenta, ni registro, y el conversor se renderiza en el servidor para que los cálculos funcionen incluso con una conexión lenta. Guárdalo en marcadores; volverás.

La página tiene tres regiones: una entrada de valor en la parte superior izquierda, un selector de DPI en la parte superior derecha y un panel de resultados debajo que muestra las cuatro unidades a la vez (píxeles, milímetros, centímetros y pulgadas). En cuanto carga la página, el estado por defecto es 100 px a 96 DPI, que ya muestra ~26,46 mm / ~2,65 cm / ~1,04 pulgadas. Así puedes comprobar que la página funciona antes de escribir nada.

Paso 2: introduce tu valor

Pulsa el campo etiquetado como "Value to convert" y escribe o pega tu número. El conversor acepta:

  • Enteros sencillos: 100
  • Decimales: 42.5, 0.75
  • Números con separadores de miles: 1,920 se interpreta como 1920
  • Espacios alrededor: 100 funciona
  • Cero: una entrada válida; devuelve 0 en todas las unidades

No acepta números negativos (la longitud no puede ser negativa) ni cadenas no numéricas. Si tu entrada no es válida, el panel de resultados muestra "Enter a non-negative number to see the conversions." en lugar de números obsoletos, así nunca copiarás un valor engañoso por accidente.

Paso 3: elige la unidad de origen

Bajo el campo de entrada hay cuatro chips de unidad: Pixels / Millimeters / Centimeters / Inches. Pulsa el que coincida con el número que acabas de escribir. El conversor resalta el chip activo en azul y trata tu entrada como esa unidad; las otras tres filas del panel de resultados pasan a ser las conversiones.

Patrones habituales:

  • Desde una herramienta de diseño (Figma, Photoshop, Sketch, Adobe XD): casi siempre tienes píxeles, así que deja Pixels seleccionado.
  • Desde la especificación de una imprenta o un PDF: normalmente milímetros o pulgadas. Pulsa el chip correspondiente.
  • Desde una regla CSS (width: 1024px): píxeles.
  • Desde una maqueta de impresión ("logo de 100 mm × 50 mm"): pulsa Millimeters para una dimensión cada vez.

Paso 4: elige el DPI correcto

Este es el paso que confunde a la gente. El conversor usa 96 DPI por defecto: la resolución de referencia de CSS que navegadores y sistemas operativos estandarizaron. Es correcta para trabajo web, pero no para impresión ni fotografía. El menú desplegable de DPI ofrece cinco preajustes:

Preajuste DPI Cuándo usarlo
Web standard 96 CSS, navegadores, referencia del SO
Mac legacy 72 Tipografía antigua de Apple (rara vez necesaria hoy)
Print draft 150 Pósteres, banners, pruebas de gran formato
Print high quality 300 Revistas, libros, packaging: el DPI de impresión más común
Photo print 600 Impresiones de bellas artes, dibujo lineal, texto bajo aumento

También hay una opción Custom que te permite introducir cualquier DPI, útil para hardware no estándar (un iPad de 220 PPI, un proofer de 300 DPI o un cabezal industrial a 1200 DPI).

Una regla práctica sencilla: si va a mostrarse en una pantalla, usa 96; si va a imprimirse, usa 300; si es una copia fotográfica que se ve de cerca, usa 600.

Paso 5: lee el resultado

El panel de resultados muestra las cuatro unidades a la vez. La unidad que seleccionaste como entrada queda resaltada (para que no leas por error tu propio número como si fuese una conversión). Cada fila muestra el valor con la precisión adecuada:

  • Pixels: entero (los píxeles del navegador son discretos)
  • Millimeters: 2 decimales (26.46)
  • Centimeters: 3 decimales (2.646)
  • Inches: 4 decimales (1.0417; la tipografía usa 1/1000 de pulgada)

Pulsa Copy junto a cualquier unidad para llevar <valor> <unidad> al portapapeles. El botón muestra brevemente "Copied!" para que sepas que se ha copiado.

Paso 6: comparte o guarda en marcadores

El conversor refleja tu estado actual en la URL como parámetros de consulta: ?value=100&from=px&dpi=96. Esto significa que puedes:

  • Compartir la URL con un compañero para que vea la misma conversión.
  • Guardar una configuración concreta como marcador, por ejemplo "300 mm a 300 DPI" para una verificación recurrente de especificación de impresión.
  • Recargar sin perder tus números.

La URL se actualiza mientras escribes, así que no hay un botón de guardar que recordar.

Ejemplo práctico 1: tamaño de un banner web

Te han pedido diseñar una imagen de cabecera a "1920 × 720 px", pero el equipo de marketing quiere saber cómo de grande es eso en un monitor de escritorio típico.

  1. Escribe 1920 en la entrada.
  2. El chip Pixels ya está seleccionado (por defecto).
  3. El DPI ya es 96 (web).
  4. Lee la fila de milímetros: 508.00 mm, unos 50 cm de ancho.
  5. Cambia la entrada a 720 para obtener el alto: 190.50 mm, unos 19 cm de alto.

Así que el banner ocupa físicamente unos 50 × 19 cm en un monitor 1080p estándar. En una pantalla 4K con escalado al 200 %, las mismas dimensiones CSS siguen cubriendo esa misma área física; en una pantalla 4K al 100 %, sería la mitad de tamaño, por lo que CSS usa 96 píxeles de referencia independientemente de la densidad física de píxeles.

Ejemplo práctico 2: logo impreso a tamaño exacto

Una imprenta te pide entregar un logo que se imprima "exactamente a 50 mm de ancho en un folleto a 300 DPI". Necesitas saber cuántos píxeles de detalle de origen aportar.

  1. Escribe 50 en la entrada.
  2. Pulsa el chip Millimeters.
  3. Cambia el DPI a Print high quality (300).
  4. Lee la fila de píxeles: 591 píxeles.

Así que tu archivo fuente debe tener al menos 591 píxeles de ancho. Si exportas a 600 px, tienes un 1,5 % de margen para recortes y se imprimirá nítido a 305 DPI. Si exportas a 400 px, la imprenta escalará a 591 efectivos a 200 DPI: visiblemente borroso en papel satinado.

El conversor funciona en ambas direcciones: también puedes empezar por la cantidad de píxeles deseada, ajustar el DPI al medio y leer el tamaño físico correspondiente.

Ejemplo práctico 3: copia fotográfica desde la cámara

Has hecho una foto a 6000 × 4000 píxeles con una cámara de 24 megapíxeles. Quieres imprimirla a 300 DPI en papel fotográfico satinado. ¿De qué tamaño puede ser la copia?

  1. Escribe 6000 en la entrada.
  2. Chip Pixels seleccionado.
  3. DPI = 300.
  4. Lee pulgadas: 20.0000 inches, y centímetros: 50.800 cm.

Así que el lado más largo se imprime exactamente a 50,8 cm a resolución nativa. Aumentar el tamaño implica reescalar: 70 cm a 300 DPI necesitaría 8268 píxeles, y solo tienes 6000. Puedes aceptar una copia más blanda (unos 215 DPI efectivos) o reducir la copia a ~63 cm y mantener la resolución nativa.

En sentido contrario: dimensiones a píxeles

La mayoría de las veces partes de píxeles y conviertes a unidades físicas. Pero también funciona al revés:

  • Especificación de impresión: "Necesito un icono de 100 × 100 mm a 300 DPI." → Escribe 100 mm a 300 DPI → 1181 píxeles por lado.
  • Anuncio en banner: "210 mm de ancho a 96 DPI para un lector de PDF A4." → 794 píxeles.
  • Panel de pantalla: "Una pantalla de 11,6 pulgadas a 1080p, ¿cuál es el DPI?" → Despeja el DPI: 1920 px / 11,6 inch ≈ 165 DPI. Cambia a Custom DPI = 165.

Para el tercer caso el conversor no tiene un modo "calcular DPI", pero puedes verificarlo escribiendo 11.6 inch al DPI candidato y comprobando que los píxeles coinciden.

Errores comunes

Olvidar cambiar el DPI para impresión. Un "logo de 100 mm a 300 DPI" da 1181 píxeles. Si lo olvidas y usas el 96 DPI por defecto, el conversor dice 378 píxeles, y tu imprenta te dirá que el archivo es demasiado pequeño. Comprueba siempre el menú de DPI antes de leer cifras de impresión.

Fiarte del DPI guardado en el archivo. "Save for Web" de Photoshop fija los metadatos del archivo a 72 DPI. El navegador los ignora. La rotativa usa lo que le indica la herramienta de maquetación, no la etiqueta del archivo. El conversor también la ignora: te pregunta qué DPI usar, cada vez.

Mezclar píxeles CSS y píxeles físicos en Retina. Cuando mides una pantalla Retina con una regla física e intentas calcular el DPI a la inversa, obtienes ~163 PPI en un iPhone. CSS sigue usando 96. Ambas cifras son correctas; describen cosas distintas. El conversor habla en píxeles CSS. Para medir píxeles físicos en una pantalla concreta, calibra con la herramienta Screen Ruler.

Ignorar el resaltado de la fila de entrada. Cuando la fila Pixels está resaltada, el valor de esa fila es tu entrada, no una conversión. Lee las otras tres filas. (Esto pilla a más diseñadores de los que cabría pensar.)

Próximos pasos

Cuando el conversor forme parte de tu flujo de trabajo, suelen aparecer dos herramientas relacionadas:

  • La calculadora de relación de aspecto resuelve el problema ortogonal: "¿1920 × 1080 tiene la misma forma que 3840 × 2160?". Úsala junto al conversor de píxeles cuando estés rehaciendo un activo para otro medio y tanto las dimensiones como la forma importen.
  • La Screen Ruler se encarga de la calibración real: muestra una regla 1:1 en tu pantalla para que compares una medida CSS con un objeto físico (una tarjeta de crédito, una impresión, una moneda). Cuando sospechas que hay un desajuste de DPI en una pantalla concreta, esa es la herramienta que lo confirma.

Guarda las tres en marcadores y todo el flujo de píxel a unidad física estará a una pestaña de distancia.

Relacionados

Artículos relacionados