DPI y PPI

PPI es la abreviatura de Pixels Per Inch, que significa píxeles por pulgada. La pulgada es una unidad de longitud de uso común, que mide aproximadamente 2,54 centímetros. Pixel es un concepto específico de pantalla, que se refiere al punto más pequeño que la pantalla puede distinguir. Entonces, el valor de PPI es la densidad de píxeles en la pantalla. Cuanto mayor sea el PPI, más clara será la imagen.

Por ejemplo, si la pantalla de tu ordenador tiene una resolución de 2K, o 1920×1080 píxeles, el ancho de su imagen será de 1920 píxeles. Y si el ancho físico de la pantalla de la computadora es de 19,2 pulgadas, entonces la resolución de la pantalla de la computadora es 1920/19,2 = 100 PPI.

DPI es la abreviatura del inglés Dots Per Inch, que significa puntos por pulgada. Deberías ser más grueso que esa pulgada, pero los puntos significan mucho. En términos generales, se puede entender Dot como un punto de muestreo, que es la unidad más pequeña que un dispositivo físico puede analizar. Al imprimir, se puede utilizar como punto de impresión. En dispositivos electrónicos como un mouse, puede entenderse como el umbral operativo mínimo (es decir, cualquier distancia entre dos puntos se considera un punto).

Tomemos como ejemplo una imagen de 1920×1080 píxeles. Si la resolución del dispositivo de impresión es exactamente 100 ppp y el tamaño del papel que desea imprimir es exactamente 19,2 pulgadas, entonces el dispositivo de impresión puede tomar exactamente un píxel como punto de muestreo y la fidelidad de la imagen impresa será del 100%. (es decir, la fidelidad de la imagen impresa será del 100%). En la mayoría de los casos estos valores no son muy buenos, por lo que se produce una pérdida de fidelidad.

1. Si las condiciones lo permiten, cuanto mayor sea la resolución de la imagen, mejor. Es posible que no tengamos la energía para preocuparnos por el DPI de la información de la imagen, el DPI del dispositivo de impresión y otros detalles. Pero una cosa es segura: siempre que la imagen sea lo suficientemente grande, quedará muy clara al imprimirla.

2. Si es posible, utilice valores precisos. Muchos programas pueden ayudarle a comprender el PPI del tamaño real de la imagen. Por ejemplo, con Photoshop, puede crear un archivo A4 (tamaño 21×29,7 cm, resolución correspondiente 2480×3508 píxeles) y hacer una imagen de 300 PPI, por lo que se puede imprimir perfectamente en la mayoría de los casos.

Como se mencionó anteriormente, la resolución de la mayoría de los dispositivos de impresión es de 300 ppp, por lo que dada la cantidad de información en esta imagen, 1 píxel corresponde exactamente a 1 punto, incluso sin procesamiento rasterizado. Y si utiliza a la fuerza 400 PPI para crear un archivo de tamaño A4, el dispositivo de 300 PPP se rasterizará y es posible que la calidad no sea tan buena como la de 300 PPP (después de todo, es un procesamiento con pérdidas, pero la diferencia puede no ser obvia).

La siguiente imagen es la introducción oficial de Apple a los modelos de iPhone:

Tome el iPhone7 Plus como ejemplo:

Tamaño de pantalla: 5,5 pulgadas

Resolución del teléfono móvil (píxeles): 1920 (alto) x 1080 (ancho)

Índice de precios al productor: 401

Tamaño de pantalla: indica la longitud diagonal de la pantalla del teléfono móvil, unidad en pulgadas. 1 pulgada) = 2,54 centímetros.

Resolución del teléfono móvil: La resolución se puede clasificar desde dos direcciones: resolución de pantalla y resolución de imagen.

Resolución de pantalla (resolución de pantalla): La precisión de la imagen de la pantalla se refiere al número de píxeles que el monitor puede mostrar. Debido a que todos los puntos, líneas y superficies de la pantalla están compuestos de píxeles, cuantos más píxeles pueda mostrar el monitor, más detallada será la imagen y más información se podrá mostrar en la misma área de la pantalla.

Resolución de imagen: Número de píxeles contenidos en una unidad de pulgada, su definición se acerca más a la definición de resolución en sí.

Unidades de resolución: (ppp puntos por pulgada), lpi (líneas por pulgada) y ppi (píxeles por pulgada). Pero sólo lpi describe la escala de resolución óptica. Aunque dpi y ppi también pertenecen al rango de resolución, su significado es diferente al de lpi. Además, los lpi y los dpi no se pueden convertir y solo se pueden estimar según la experiencia. Ppi y dpi a menudo se usan indistintamente. Pero los campos que utilizan también son diferentes. Técnicamente hablando, los "píxeles" sólo existen en el campo de las pantallas de computadora, y los "puntos" solo aparecen en el campo de la impresión o la impresión.

Ppi: número de píxeles por pulgada, número de píxeles por pulgada de pantalla, número de píxeles por pulgada de pantalla, utilizado en el campo de visualización de computadoras.

Dpi: puntos por pulgada, puntos por pulgada, utilizados en el campo de la impresión.

La relación entre píxeles de pantalla por pulgada, resolución y tamaño de pantalla

Entonces, el tamaño del dibujo PS utilizado por los artistas es el tamaño de la resolución del teléfono móvil.

Si necesitas diseñar un teléfono móvil adecuado para iPhone7, el tamaño que utilizamos es 1334 x 750px.

Pero hay una cosa especial, es decir, para iPhone6(s) plus y iPhone7 plus, necesitamos usar el tamaño de 2208 x 1242px.

Motivo:

Los teléfonos móviles PPI 326 utilizan material @2x.

Para un teléfono móvil con un ppi de 401, en teoría Apple debería usar material 401/326 * @2x=@2.46x. Pero con proporciones tan fantásticas, a los desarrolladores les resulta difícil recortar la imagen. Entonces Apple usó material @3x para comodidad de los desarrolladores y luego lo escaló a @2.46x, que en realidad es 2.46/3=83%. De hecho, Apple eligió una proporción cercana al 87%.

De esta forma, la relación entre resolución física y puntuación virtual es del 87%, es decir, 1920/0,87=2208, 1080/0,87=1242.

La ventaja es que es más conveniente para los desarrolladores. Por ejemplo, al preparar materiales, el tamaño de fuente se puede ajustar directamente a 3x.

Resumen

Vi la conferencia de prensa de Xiaomi 8 hace algún tiempo y los parámetros de la pantalla se introdujeron de la siguiente manera:

En ese momento, me preguntaba cómo esto fue calculado. Aunque sé que PPI se refiere a los píxeles contenidos en cada pulgada de la pantalla, después de pensarlo un poco más profundamente, descubrí que estaba realmente confundido acerca de estos parámetros y mi curiosidad me impulsó a investigar un poco.

Pixel, conocido como pixel en inglés, es el que más conocemos en nuestro día a día, sin embargo, si lo estudias en profundidad comprobarás que la cantidad de conocimiento que contiene es enorme. Este artículo sólo toca el tema de los píxeles, que será fascinante.

La discusión sobre los píxeles debe dividirse en diferentes escenarios: 1. Imágenes digitales La mayoría de los píxeles con los que los programadores entramos en contacto y discutimos en nuestro trabajo diario se refieren a esta categoría.

Los mapas de bits son las imágenes más utilizadas en nuestra vida diaria, como jpg, jpeg, png, gif, bmp, etc. Otra imagen común es una imagen vectorial. Las imágenes rasterizadas están compuestas de píxeles, entonces, ¿qué información contienen los píxeles? Tienes las dimensiones reales?

Cada píxel consta de información de color, algunos de los cuales también contienen información de transparencia. Debido a que se pueden mezclar muchos colores a partir de los tres colores primarios rojo, azul y verde, un píxel se puede representar mediante una estructura de datos que almacene estos tres colores. El tamaño de la memoria que ocupa un píxel está relacionado con la cantidad de bits que se utilizan para representar esos colores. Por ejemplo, el píxel más simple tiene sólo un bit, por lo que sólo puede representar dos estados, 0 o 1, correspondientes al blanco y negro de la imagen. Cuando un píxel alcanza los 24 bits, cada canal RGB ocupa 8 bits, y ya hay 16,77 millones de colores que se pueden combinar (256 256 256 = 16.777.216. Sólo hay unos 10 millones de colores que el ojo humano puede distinguir, es decir, este). tiempo. Por supuesto, también existe la naturaleza de 32 bits, y aquellos que estén interesados ​​pueden estudiarla.

Imagen de Wikipedia.

Entonces podemos sacar una conclusión de la introducción anterior. Los píxeles aquí no tienen tamaño físico, son solo algunos datos y solo tendrán tamaño físico cuando se muestren en un dispositivo físico.

Puedes sentirlo a través de la imagen de abajo.

Fuente de la imagen

La discusión sobre la resolución aún debe dividirse en el escenario 1. En este momento, la resolución de la imagen digital se utiliza para describir la información de píxeles de la imagen. Por ejemplo, si decimos que la resolución de una imagen es 1280 720, solo significa que la imagen se compone de 1280 píxeles y 720 píxeles. Como se muestra en la figura siguiente, el tamaño de esta imagen, ya sea clara o borrosa, depende de su formato de almacenamiento y del dispositivo utilizado para mostrarla.

2. El dispositivo de visualización de hardware se refiere a los píxeles contenidos en esta pantalla (este píxel es físico, como comentamos anteriormente). Por ejemplo, la resolución de pantalla del Xiaomi Mi 8 es 2248x1080, lo que demuestra que esta pantalla contiene tantos píxeles físicos.

Entonces, ¿cuál es la relación entre la resolución de la imagen y la resolución de la pantalla? Esto requiere un PPI claro para responder a esta pregunta.

DPI es una unidad utilizada por la industria de la impresión y representa el número de puntos de tinta contenidos por pulgada de papel de impresión, mientras que PPI es la unidad de visualización física y física direccionable contenida por pulgada de pantallas electrónicas. Entre ellas, la pulgada es la unidad de longitud habitual en Occidente y equivale a 2,54 centímetros. La razón por la que estos dos conceptos se confunden tan fácilmente es porque algunos proveedores de software han hecho el mal, como Microsoft, Adobe, Apple, etc. A menudo utilizan los dos conceptos indistintamente.

PPI: Píxeles por pulgada, es decir, el número de píxeles por pulgada. Cuanto mayor sea el valor, mayor será la capacidad de visualización de la pantalla. Por ejemplo, el método de cálculo de Xiaomi 8 PPI se muestra en la siguiente figura.

Puedes ver que el PPI del Xiaomi Mi 8 es 401,6, y la afirmación oficial es 402. Probablemente esté redondeado, pero no sé cómo lidiar con medio píxel. Si lo sabes, puedes decírmelo.

DPI: puntos por pulgada, puntos por pulgada. El método de cálculo es el mismo que el del PPI, pero los campos de aplicación son diferentes. Éste es para la industria gráfica.

Llegados a este punto podemos responder a la relación entre resolución de imagen y resolución de pantalla. Tomando Xiaomi 8 como ejemplo, muestre una imagen en pantalla completa de acuerdo con la relación de aspecto: primero, cuando se muestra una imagen de 1080 2248 píxeles en Mi 8, cada píxel físico en la pantalla corresponde a un píxel de la imagen, que se puede mostrar perfectamente. En segundo lugar, cuando se muestra una imagen de 2000-2248 píxeles en el Mi8, la pantalla del Mi8 no se puede mostrar en ancho, por lo que la tarjeta gráfica rasterizará la imagen y reducirá los 2000 píxeles a 1080 píxeles mediante un determinado algoritmo. Debido a que se procesa de mayor a menor, la imagen es clara.

En tercer lugar, al mostrar una imagen de 720*1280 píxeles en Mi8, la tarjeta gráfica rasterizará la imagen. Si se utiliza un lado como estándar para estirar, la imagen aparecerá borrosa.

Pt: Traducido al chino como una lista, es el tamaño físico, la longitud es 1/72 de pulgada. Conceptualmente, los hilos pt y Px no están relacionados, pero sí en Photoshop. pt en Photoshop es una unidad relativa (una mezcla de estos dos productos).

Fórmula de conversión: 1pt= (DPI/72) px.

Dp: Píxeles independientes de la densidad es una unidad abstraída del ppi de Android basada en dispositivos físicos. Se define en base a una pantalla de 160dpi. En una pantalla de 160 ppp, 1 dp = 1 px, entonces podemos obtenerlo.

Fórmula de conversión: 1dp=(pantalla ppi/ 160)px.

La clasificación de pantalla actual es la siguiente | XHDPI | 320 ppp | | XHDPI |

Sp: píxel independiente de la escala, básicamente lo mismo que dp e independiente del píxel, pero se utiliza para describir el tamaño de fuente. Su tamaño corresponderá a la densidad de la pantalla y a las preferencias de tipografía del usuario. Por ejemplo, cuando la fuente del teléfono móvil está configurada en el tamaño predeterminado, dp y sp se utilizan para describir el mismo tamaño de fuente, como se muestra en la siguiente figura.

Pero cuando cambiamos el tamaño de fuente predeterminado del teléfono móvil, el tamaño de fuente descrito por dp no cambia, pero el tamaño de fuente descrito por sp cambia en consecuencia, como se muestra a continuación.

Además, no hay diferencia entre dp y sp. Generalmente se recomienda utilizar sp como unidad para las fuentes.

Dip es otro nombre para dp, no hay diferencia. Su relación con px se muestra arriba.

Lo anterior es lo que los programadores deben saber al desarrollar una GUI de contacto. Pensé que era simple, pero después de investigar, descubrí que si profundizo más, me quedaré atrapado en el atolladero. Al mismo tiempo, también creo que con el desarrollo de la sociedad humana hasta su nivel actual, cualquier tipo de conocimiento es suficiente para que una persona dedique toda su vida a la investigación. Entonces, además de ganar dinero para mantener a nuestras familias, ¿deberíamos los programadores encontrar una dirección que nos interese e invertir nuestro tiempo libre para intentar investigarla? Me siento muy perdido aquí, y de repente me doy cuenta de que no tengo ningún pasatiempo a una edad tan avanzada, si no contamos el pasatiempo de la belleza. . . !

Nuestra imagen original es una imagen con una longitud y un ancho de 1800 píxeles.

El largo y ancho de esta imagen son 1800 píxeles. Por sí solos, el DPI y el PPI no tienen sentido.

Su parámetro de resolución es de tan solo 1800 píxeles.

Suponiendo que todas nuestras prensas, impresoras e impresoras de inyección de tinta asignan 1 píxel a 1 punto (es decir, 1 px/puntos) en el tamaño original, se puede realizar el siguiente cálculo.

Si utilizamos una impresora de 300 ppp para imprimir el tamaño completo de esta imagen, entonces su largo y ancho son:

1800 px/(1 px/puntos)/300 ppp = 6 pulgadas , es decir, el largo y el ancho son ambos de 6 pulgadas (15,24 cm).

Si utilizamos una impresora de 220DPI para imprimir el tamaño completo de esta imagen, entonces su largo y ancho son:

1800 px/(1px/puntos)/220 dpi≈ 8.19 in , es decir, el largo y el ancho son ambos de 8,19 pulgadas (20,8 cm).

Si utilizamos una impresora de inyección de tinta de 72DPI para imprimir esta imagen en su tamaño original, su largo y ancho son:

1800 px/(1px/puntos)/72 dpi = 25 pulgadas, es decir, el largo y el ancho son ambos de 25 pulgadas (63,5 cm).

Utilizando un monitor universal con 81PPI, esta imagen se muestra en su tamaño original, por lo que su largo y ancho son:

1800px/81ppi ≈ 22,2 pulgadas, es decir, el largo y El ancho es de 22,2 pulgadas (56,4 cm).

PPI del monitor Suponemos que el monitor tiene píxeles cuadrados, entonces el PPI del monitor está determinado por su resolución, largo y ancho.

Es decir, el PPI horizontal del monitor = la resolución horizontal del monitor (px) / el ancho del monitor (pulg).

Solemos decir que el número de pulgadas de un monitor es la longitud de su diagonal.

Para una pantalla de 16:9, el PPI se puede calcular de la siguiente manera:

PPI = sqrt {(ancho de píxel * alto de píxel)/[16 * 9 * pulgadas 2/(16 2+9 2)]}

Por ejemplo, para un monitor de 24 pulgadas con 1920*1080 píxeles, el PPI es:

PPI = sqrt {(1920 * 1080)/[16 * 9 * 24^ 2/(16^2 +9^2)]}≈91.7878

La siguiente tabla calcula el PPI para tamaños de monitor comunes; puede utilizar esta fórmula para comprobarlo: