¿Qué es exactamente un "píxel"?

"Pixel" siempre me confunde cada vez que hago un banner web.

Yo uso CorelDraw x5 para mi trabajo. Por lo general, prefiero usar pulgadas en lugar de píxeles, ya que las pulgadas son mucho más intuitivas para mí. Pero cuando hago una conversión de "pulgadas a píxeles", me confundo.

• En CorelDraw: 1 inch = 300px.

• En AuctionRepair.com : 1 inch = 75 pixels.

• En UnitConversion.org : 1 inch = 96 pixels.

Ahora mi cliente está pidiendo un banner de 1900x1200px. ¿Cómo debo hacer la conversión?

Solo piensa en el píxel como un átomo. El átomo es una partícula más pequeña de materia. Donde como un píxel es una partícula más pequeña de imagen digital.

Un átomo tiene neutrones, protones y electrones, mientras que un píxel tiene valores rojos, verdes y azules :)

El número de píxeles por pulgada o centímetro (cm), etc. se denomina "resolución".

Una resolución más alta significa más píxeles por unidad de longitud.

Si está diseñando para web / escritorio, puede decir 1 Inch = 72 pixels

Para la impresión offset (generalmente se usa una resolución de 300), puede decir 1 inch = 300 pixels

La resolución de impresión se llama DPI, que significa "puntos por pulgada". Los píxeles son los puntos. Cuanto mayor sea el número de puntos, más fino será el resultado de la impresión.

Ahora mi cliente está pidiendo un banner de 1900x1200px. ¿Cómo debo hacer la conversión?

Si su cliente le está dando las dimensiones en píxeles, entonces debe ser algo para escritorio / web y puede diseñarlo con una resolución de 72.

Si necesita algo para imprimir, debe preguntarle la resolución o el tamaño en pulgadas, cm, etc.

Si un cliente mío solicitó una imagen de 1920x1080px, lo primero que necesito saber es el uso previsto. ¿Es para la web, impresión o ambos?

En el mundo de la impresión, un píxel (o elemento de imagen - [pict-el]) no tiene significado ni definición. Los píxeles no se pueden medir de ninguna manera. No tienen un tamaño o unidad predefinidos para calcular su tamaño. Por lo tanto, no son un término del "mundo real". Son estrictamente un término digital y solo se refieren al mundo digital.

En sentido amplio, un píxel es el punto pequeño en una pantalla o monitor que está coloreado por luz, ya sea retroiluminada (CRT), LED, plasma u otras tecnologías. Cada uno de estos pequeños puntos (píxeles) de diferentes colores cuando se colocan juntos forma una imagen para el ojo humano. Para usar una analogía del mundo real, piense en ella como una pared de ladrillos ... cada píxel sería un ladrillo ... la imagen sería la pared.

En muchas aplicaciones, y para muchas personas, 1 píxel = 1 punto. (Adobe incluso usa esta teoría). Sin embargo, esto tampoco es del todo exacto. Un punto es simplemente la unidad de medida más pequeña utilizada por la mayoría de los diseñadores en el mundo real, a diferencia del mundo digital.

No hay tal cosa como 1 pulgada = 72 px ni nada ni remotamente cerca. Cada pantalla en la tierra tiene una densidad de píxeles diferente . La cantidad de píxeles que caben en una pulgada depende completamente de la densidad de píxeles de su monitor.

Cuando trabaja en Photoshop para la web, lo que ingresa en el Resolutioncampo para un nuevo documento es en gran medida irrelevante. Una imagen destinada a la web (o pantalla) usará su ancho y altura de píxel y no hará referencia a la configuración de Resolución. Consulte aquí para obtener más información sobre la resolución (ppi) y la web / pantalla: ¿es obligatorio mantener las imágenes a 72 DPI para el diseño web? Para la web, la única diferencia que ofrece el campo de resolución es que le permite crear trabajos más detallados en Photoshop. Pero a la salida, el campo de resolución se ignora, usando Save for Web. Si lo usa en Exportlugar de hacerlo Save for Web, la resolución se usa para alterar el ancho de píxeles y la altura de píxeles de la imagen según su sistema operativode todas las cosas. Las aplicaciones de Macintosh suponen que cada pulgada tiene 72 píxeles y la aplicación de Windows supone que cada pulgada tiene 96 píxeles. Ninguno de estos es realmente exacto o verdadero, pero los ingenieros tuvieron que usar algo . Por lo tanto, una resolución más alta Exportdará como resultado un ancho de píxel más grande y una altura de píxel.

Ahora donde la impresión se encuentra con los píxeles ..... resolución o puntos por pulgada (DPI). DPI es esencialmente la densidad de puntos creada por un filmador de imágenes (o fabricante de planchas) cuando se imprimen planchas. Todas las imágenes que se imprimen deben pasar por un proceso de medios tonos . Además de una pantalla de línea específica o Líneas por pulgada (LPI) que determina cuántas filas de puntos se imprimirán. La densidad de los puntos en el tono medio determina el nivel de detalle y calidad en la imagen misma. Un tono medio con un DPI y LPI más alto se verá mucho mejor que un tono medio con un DPI bajo y LPI bajo. Si busca alguna correlación entre la pantalla y la impresión, el usuario más común donde encuentra un poco de lógica es pensar que 1 píxel = 1 punto. Esto no escompletamente exacto, pero está lo suficientemente cerca como para que no sea un problema si se utiliza esta suposición. Aquí es donde las personas intercambian los términos PPI y DPI pensando que son lo mismo. En realidad, no son lo mismo en absoluto, pero no hay mucho daño en pensar que lo son.

Para el trabajo de impresión, el Resolutioncampo en la nueva ventana de documento de Photoshop es crítico. La mayoría de las veces desea una resolución de 260 o mejor para imprimir imágenes. Esto equivale a 260 DPI, que es la configuración óptima para 175LPI (una pantalla de línea común). 300dpi se usa con mayor frecuencia porque es un número redondo agradable, incluso para recordar y más DPI nunca es un problema. El cálculo general es en realidad 1,5 veces el LPI es igual al DPI. Entonces 1.5 x 175 = 262.5. Entonces se redondea a 300 ppp.

Si conoce el uso previsto .....

• Si es para la web o la pantalla, simplemente cree un nuevo documento a 1920x1080px y la resolución que desee. Una resolución más alta le permitirá un trabajo más detallado en Photoshop, pero no va a cambiar la salida web / pantalla de la imagen. Independientemente de la resolución (ppi), la imagen seguirá emitiendo a 1920x1080 píxeles (usando Guardar para Web).

• Si la imagen es para imprimir o ambas, usaría Photoshop para darme una idea del tamaño físico cuando se imprima. Simplemente cree un nuevo documento con las medidas de 1920x1080 e inserte 300 para la resolución.

Ahora cambie el menú desplegable "píxeles" a pulgadas:

Esto está utilizando la teoría interna 1px = 1pt de Adobe, que es tan buena como cualquiera. Pero le da una idea general de que la imagen tendrá aproximadamente 6.5 "x3.5". Luego verificaría con el cliente para verificar que una imagen de 6.5x3.5 "se ajuste a sus necesidades.

Hola [cliente]

Una imagen de 1920x1080 píxeles equivale a aproximadamente 6.5x3.5 pulgadas para la producción de impresión. ¿Ese tamaño te va a funcionar? ¿Debo ir más grande para imprimir?

¡Gracias!

Hay un artículo de ciencias de la computación (realmente, memorando divertido) titulado "Un píxel no es un pequeño cuadrado" por Alvoy Ray Smith.

Un píxel es una muestra puntual . Existe solo en un punto. Para una imagen en color, un píxel puede contener tres muestras, una para cada color primario que contribuye a la imagen en el punto de muestreo. Todavía podemos pensar en esto como una muestra puntual de un color. Pero no podemos pensar en un píxel como un cuadrado, o cualquier otra cosa que no sea un punto.

¡Un píxel no es un pequeño cuadrado,
un píxel no es un pequeño cuadrado,
un píxel no es un pequeño cuadrado!
(Y un Voxel no es un pequeño cubo)

El término "píxel" es la abreviatura de "elemento de imagen".

Una imagen consta de píxeles, que son solo puntos de colores en un rectángulo, sin tamaño .
Para mostrar la imagen, utilizamos una pantalla que puede mostrar puntos de colores y necesitamos decidir qué puntos queremos mostrar dónde .

Mirando los detalles, la imagen consiste en puntos separados, cada uno con un color diferente. Como cuando llenarías los cuadros en papel cuadrille con colores, uno en cada cuadro. Excepto, importante, que no hay papel (que tenga un tamaño) y que las cajas no tengan un tamaño físico. Solo se trata de qué punto de color está debajo o a la derecha de cuál otro .

Si piensa en el tamaño de la imagen en la pantalla, es como mostrar este "papel" en la pantalla, pero no tenemos idea de cuán "grande" es en términos de pulgadas o mm.

Cuando queremos mostrar la imagen en la pantalla, vemos que la pantalla también tiene "cuadros" que pueden mostrar colores. Ambos se llaman píxeles, pero técnicamente son algo diferente.

Lo más simple que podemos hacer es asignar a cada uno de nuestros cuadros de color el "papel" a un cuadro de color en la pantalla.
Luego, el tamaño de la pantalla, en centímetros reales reales, depende de qué tan grandes sean estos puntos de la pantalla .

Si necesitamos un cierto tamaño, podemos hacer algo diferente:
podemos decidir qué tan grande debe ser la imagen . Necesitamos saber qué tan grandes son los puntos de la pantalla. Luego, para cada fila, podemos calcular cuántos puntos de pantalla podemos usar para nuestros puntos de color. Para que se ajuste, si tenemos más puntos de pantalla que puntos de color, necesitamos usar algunos puntos de color varias veces, o si tenemos menos, omita algunos.

Una confusión más para completar la discusión:

En el diseño y diseño del sitio web, un "píxel CSS" es siempre igual a 1/96 de una "pulgada CSS" , independientemente de la resolución de la pantalla. Esto se hizo porque muchos de los primeros sitios web utilizaron mediciones basadas en píxeles para el diseño asumieron una resolución de pantalla estándar. Para que el tamaño real del texto y otro contenido permanezca constante, los navegadores web encuentran una conversión aproximadamente uniforme entre los píxeles de la pantalla y las unidades "px" de diseño, y ajustan su interpretación de las pulgadas para que siempre haya una proporción consistente entre "px" y " en". Lo mismo ocurre con todas las unidades que se basan en pulgadas, como "pt" para la fuente: el tamaño de fuente de 12 puntos es siempre igual al tamaño de fuente de 16 píxeles .

Ahora que las resoluciones de pantalla suelen ser mucho mejores que 96px por pulgada, el concepto de "puntos" ha sido tomado del mundo de la impresión para hablar sobre la resolución física real de la pantalla. Incluso hay una unidad de puntos por píxel (dppx) para describir la resolución física proporcional al píxel CSS estándar. Por ejemplo, las nuevas pantallas "Retina" para Mac y iPhone tienen una resolución de 2dppx.

Para su situación, me hago eco de los consejos de los demás: pídale a su cliente que aclare lo que se necesita. Dicho esto, en general, si alguien está pidiendo arte con medición de píxeles, lo está utilizando para sitios web. Cree su imagen exactamente en las dimensiones en píxeles que le piden, y configure su software de edición de imágenes para que use una resolución de 96 ppp a fin de diseñar las reglas y el tamaño del texto en unidades que le resulten más cómodas.

Dicho esto, podría no estar de más crear su imagen en realidad al doble de esa resolución (es decir, 192 ppp), para tener una versión adecuada para las pantallas Retina si su cliente descubre que la quiere. Luego, su software de imagen debería tener una manera fácil de guardar su imagen con una resolución más baja y un tamaño de archivo más pequeño. ¡Es mucho más fácil convertir una imagen a una resolución inferior a la inversa!

Las pulgadas son dimensiones físicas, mientras que los píxeles son dimensiones de la pantalla. A la misma resolución, un píxel es físicamente más grande en una pantalla más grande, ya que la densidad o PPI (píxeles por pulgada) está controlada por el tamaño físico de la pantalla frente a la resolución. Entonces, al convertir píxeles a pulgadas, todo se reduce a lo que desea que sean sus píxeles por pulgada (PPI). Si quiere 300ppi (estándar para imprimir), simplemente está diciendo "exprima 300 píxeles en una pulgada del mundo real". Esto da como resultado una calidad más densa que si estuviera pidiendo 72ppi, ya que menos píxeles equivalen a menos información de calidad concentrada en esa pulgada.

Las pantallas generalmente se consideran 72ppi, pero esto es solo un valor predeterminado y es completamente irrelevante para el tamaño real de su pantalla. La misma resolución de 1920x1080 podría ser 10ppi en la pantalla de un estadio o 400ppi en un teléfono móvil.

Un píxel no tiene correlación con las mediciones del mundo real. Como tal, no hay forma de convertir pulgadas a píxeles de manera consistente. Todo es arbitrario y depende de lo que esté haciendo con la imagen en el final.

¿Qué es un píxel en el contexto de una imagen digital? Es el elemento único más pequeño dentro de la imagen. Tendrá un color asignado. Literalmente se refiere a un "elemento de imagen" individual .

Imagine que tiene una bombilla que puede encender y apagar. Esto es básicamente una pantalla de 1x1 píxeles, donde la bombilla es el píxel. Ahora compre algunas bombillas más y colóquelas en forma cuadrada de 10x10. Si los conecta de una manera que puede encender y apagar cada uno de ellos como lo desee, tiene una pantalla cruda con 10x10 "píxeles". Incluso puedes dibujar formas básicas en él.

Ahora, si te alejas lo suficiente de esta pantalla de bombilla, el ojo finalmente no podrá distinguir entre esas bombillas individuales y todo lo que verás es una forma continua en lugar de píxeles individuales. Esto sucede, porque el ojo tiene una resolución de escaneo limitada, si hay más puntos (bombillas) por pulgada de los que el ojo puede reconocer, los píxeles se convierten en una imagen. La resolución de sus ojos es de aproximadamente 300 puntos por pulgada (DPI). Si toma una lupa y mira su monitor, verá que también está compuesto por pequeñas bombillas (LCD), solo muchas más. Aproximadamente 2,073,600 (1920x1080) en una pantalla Full HD, tres veces, ya que hay uno para cada color RGB, que sus ojos simplemente no pueden ver, ya que son demasiado pequeños.

Ahora, obviamente, lo que su ojo puede percibir como puntos individuales o no depende no solo de la disposición de los puntos (qué tan cerca están juntos) sino también de la distancia que está a esa "pantalla". Es por eso que DPI es un término relativo de varias maneras. Si toma la misma pantalla y se acerca demasiado, puede ver los píxeles. Si está demasiado lejos, ya no podrá leer lo que aparece en la pantalla, aunque el DPI y la resolución (cantidad de píxeles) nunca cambien.

Por esta y varias otras razones durante la creación de los primeros monitores de computadora, se eligió una resolución estándar de 72 DPI (Apple) o 96 DPI (Microsoft). Este es un buen compromiso entre la distancia que se espera que el usuario esté lejos de la pantalla y las limitaciones técnicas de esa edad. Pero incluso hoy, la mayoría de las pantallas siguen esa resolución aproximadamente. Es por eso que cuanto más grande es la pantalla, mayor es la cantidad de píxeles.

Ahora, si conoce la resolución DPI de su monitor, es muy fácil calcular cuántos píxeles hay en cada pulgada cuadrada. Si, por ejemplo, desea dibujar un cuadrado de 1x1 pulgada² en un monitor, puede determinar fácilmente cuántos píxeles debe tener esta imagen (72x72 o 96x96). Pero también es obvio que esta imagen será más grande o más pequeña en otras pantallas que tengan una resolución DPI diferente. El texto que se puede leer en una pantalla de 24 "a 96 DPI puede ser demasiado pequeño en un iPhone de 4" a 300 DPI, porque esos 96 píxeles (1 pulgada) en 24 "son solo unos pocos mm en el teléfono.

Entonces, si su cliente le pide que cree una imagen a 1900x1200 px, las primeras preguntas que debe hacer son: ¿para qué dispositivo?

Para resolver el dilema de las páginas web o aplicaciones que se supone que se ven bien en diferentes dispositivos, se han inventado formatos que no funcionan con píxeles, sino con una longitud en cm o mm. La imagen resultante se renderiza de acuerdo con las capacidades del dispositivo, asegurando que un cuadrado de 10x10 cm todavía sea 10x10 sin importar en qué pantalla se muestre. Pero este formato obviamente no puede ser un formato de píxeles, sino que será un formato vectorial .

Si bien esto resuelve el problema de Mac / Windows / Other, no resolverá una gran diferencia de tamaño. Su imagen de ejemplo será de 10x10 cm en cada dispositivo, pero eso podría cubrir toda la pantalla de un teléfono móvil. Este problema aún no está completamente resuelto, pero la mayoría de las empresas tienen alguna forma de solución. Pero en la mayoría de los casos, realmente necesita desarrollar al menos dos páginas, una para escritorio estándar, otra para teléfonos móviles y, finalmente, una para tabletas también.

Ya hay un montón de respuestas útiles, pero quizás quería explicar esto de una manera diferente.

Al solicitar una imagen de 1900x1200 píxeles, su cliente no le dice nada sobre las dimensiones que necesita. Olvidando la palabra "píxeles" por un momento, el cliente simplemente le dice cuántos detalles necesitan (es decir, la resolución). Simplemente pueden intentar dimensionarlo ellos mismos según lo requieran.

Si necesita usar pulgadas para sus propios fines, ya que considera que la medición es más fácil de manejar durante el desarrollo de sus gráficos, simplemente utilícelos. Usando gráficos vectoriales (Corel Draw es una herramienta vectorial), afortunadamente no necesita preocuparse demasiado por los píxeles hasta que llegue el momento de guardar imágenes planas.

Para estar seguro, comience con un tamaño de lienzo con la misma relación de aspecto: 1900x1200 es una relación de 16:10, por lo que 16 pulgadas por 10 pulgadas deberían funcionar. Cuando llegue el momento de guardar o exportar una imagen aplanada (un "ráster" o mapa de bits), puede elegir las dimensiones de 1900x1200 píxeles.

No estoy familiarizado específicamente con Corel, por lo que no puedo decirle exactamente cómo ingresar esta configuración, pero es muy probable que estén allí.

En cuanto a "qué es un píxel" , la respuesta que dice que es similar a un "átomo" es bastante buena. Aunque si queremos ser completamente anales, podríamos decir con mayor precisión que un píxel es una molécula :

Una molécula es la parte más pequeña de una sustancia que aún exhibe las propiedades de esa sustancia, y un píxel es la parte más pequeña de un color que aún exhibe ese color en particular . Al ser más pequeño que eso, comienzas a ver los otros colores que se mezclaron para lograr el color objetivo.

Los píxeles se pueden separar de todo tipo de formas, por lo tanto, no representan ninguna dimensión real. En la impresión, pueden ser de 300 puntos por pulgada (DPI), en cuyo caso los píxeles están muy juntos, o en la pantalla pueden ser de 72 DPI, lo que significa que están más separados. Tengo que suponer que 1900x1200 está destinado a una pantalla, por cierto, ya que es una de las resoluciones de pantalla estándar. En ese caso, se verá igual sin importar cuántas pulgadas en sus dimensiones, siempre que se muestre a pantalla completa en un monitor 1900x1200.

Para colmo, la dimensión de píxeles, técnicamente hablando, solo le dice cuánta información contendrá la imagen almacenada. En cuanto a lo grande que se verá , básicamente no le dice nada por sí solo.

TL; DR Realice la conversión cuando exporte su imagen de Corel Draw a un archivo .tif.

Hay dos formas de describir una imagen en una computadora: mapas de bits (también conocidos como rásteres ) y vectores. Un mapa de bits es una cuadrícula de coordenadas que tienen un color específico y cada punto es un píxel. La combinación de todos los puntos en la cuadrícula crea una imagen. Las fotos son mapas de bits; Los píxeles corresponden al grano de la película o los puntos del sensor. Los píxeles no tienen un tamaño intrínseco: pueden ser muy pequeños en una imagen impresa con láser o muy grandes en una pantalla gigante. El tamaño de una imagen en píxeles le informa sobre la resolución con la que se verá suave. Las imágenes con una alta densidad de píxeles (puntos por pulgada, ppp) se ven nítidas, mientras que aquellas con una baja densidad de píxeles se ven bloqueadas. Para ver la diferencia, compare Flickr con Minecraft. Ampliar una imagen de mapa de bits hace que los píxeles parezcan más grandes y la imagen se vuelve más bloqueada y menos nítida.

Los vectores son descripciones matemáticas de formas que están organizadas en una imagen. Tampoco tienen un tamaño intrínseco, pero la forma en que se comportan es diferente. La apariencia de un gráfico vectorial no cambia a medida que se acerca, porque se recalcula para que coincida con la pantalla.

Corel Draw es un programa de gráficos vectoriales y, por lo tanto, las imágenes que haces son vectores. Si su cliente desea una imagen de 1900x1200, deberá convertirla en un mapa de bits cuando la exporte. La clave es que el tamaño del vector y el tamaño del mapa de bits son independientes. Puede hacer un archivo Corel Draw de ocho pies por seis y exportarlo como una imagen de 400x300 píxeles. O un archivo de una pulgada cuadrada en Corel Draw se puede exportar como un mapa de bits de 10,000 píxeles cuadrados. Sin embargo, en lugar de pedir dimensiones de píxeles, los programas generalmente le piden que especifique un tamaño y una resolución para el mapa de bits, aunque puede cambiar las unidades a píxeles. Esto le permite asegurarse de que el archivo tendrá una resolución razonable en el tamaño que desee. Al solicitar una resolución particular, su cliente quiere asegurarse de que puede usar la imagen en un tamaño de pantalla grande o en un tamaño de impresión pequeño. La idea de una imagen digital que tenga un tamaño físico es un poco extraña, pero es más fácil trabajar con ella.

Así que haga su gráfico con el tamaño que desee y luego especifique el tamaño de píxel justo al final cuando lo exporte. Una cosa a tener en cuenta es que si incluye imágenes de mapa de bits en el gráfico, deberán tener al menos una resolución tan alta como en la imagen final. Entonces, si la mitad del ancho de su gráfico es una foto, esa foto debe tener 950 píxeles de ancho.

Los píxeles en CSS (y no como una propiedad técnica de un medio de visualización) son unidades de ancho angular aparente. Por lo tanto, es posible convertir píxeles, pero solo en grados, radianes, etc. Puede convertir un píxel en una pulgada, pero necesita saber qué tan lejos está la pulgada.

Sean B. Palmer tiene una buena página sobre esto:

La luna de la tierra tiene aproximadamente 24.3 px de ancho, por ejemplo. La Torre Eiffel desde una milla de distancia tiene aproximadamente 550.5 px de altura. Eso significa que cuando haces "{width: 24.3px}" en CSS 2.1, estás haciendo algo tan ancho como parece ser la luna.

Un píxel es el punto más pequeño de una imagen. No tiene tamaño físico. Obtiene uno cuando especifica la resolución en DPI (puntos por pulgada) o una unidad similar, y la procesa en un dispositivo que respeta esta resolución.

En la práctica, hay muchas ocasiones en que el tamaño es arbitrario porque al diseñador o software no le importaba / no sabía sobre el tamaño / resolución de la pantalla, y / o aplicó un factor de cambio de tamaño para que se ajustara a la superficie disponible.

Recuerde: un píxel no tiene un tamaño predefinido. A diferencia de una pica.

PSD Tuts tiene un video que explica la relación entre píxeles aquí

Píxeles

Pixel es la forma más pequeña para mostrar el diseño de una unidad de visualización. Por ejemplo: un monitor de visualización consta de varios píxeles que forman una visualización en su pantalla.