El mito de resolución Web de 72 PPI

escrito por Steve Patterson.

si has estado cerca de Computadoras e imágenes digitales por un tiempo, especialmente si eres un diseñador web o un fotógrafo que publica tus fotos en línea, sin duda has escuchado decir que la resolución correcta para las imágenes que se muestran en la web, o en las pantallas de computadora en general, es de 72 píxeles por pulgada (ppi).,

Es posible que incluso haya oído decir que si bien 72 ppi es correcto para las imágenes que se muestran en un Mac, un PC basado en Windows necesita la resolución establecida en 96 ppi.

algunos dicen que es «PPI» (píxeles por pulgada), otros afirman que es «dpi» (puntos por pulgada), y todo el asunto se volvería muy confuso si no fuera por un pequeño hecho: ¡todo es una completa tontería! En este tutorial, aprenderemos por qué simplemente no hay tal cosa como una web estándar o resolución de pantalla y por qué, si sus imágenes están destinadas a la web, ¡no necesita preocuparse por la resolución de la imagen en absoluto!

un poco de Historia…,

el origen de la resolución de pantalla de 72 ppi se remonta a mediados de la década de 1980, cuando Apple lanzó sus primeros ordenadores Macintosh. Estas computadoras incluían una pantalla incorporada de 9 pulgadas con una resolución de pantalla de 72 píxeles por pulgada. Por qué 72 píxeles por pulgada? Esto se debe a que las pantallas de Macintosh fueron diseñadas específicamente para trabajar en perfecta armonía con las impresoras ImageWriter de Apple, que tenían una resolución de impresión de 144 puntos por pulgada, exactamente el doble de la resolución de la pantalla., Esto hizo que fuera fácil escalar la pantalla a la página impresa, lo que significaba que el texto y los gráficos se podían previsualizar en la pantalla en el tamaño exacto que aparecerían cuando se imprimieran. Más tarde, cuando Apple comenzó a hacer pantallas más grandes para el Macintosh, se aseguraron de mantener las resoluciones de pantalla establecidas en los mismos 72 píxeles por pulgada para que los usuarios siempre vieran una vista previa precisa en pantalla del documento impreso (siempre y cuando estuvieran usando una impresora ImageWriter).

pero la resolución de pantalla de 72 píxeles por pulgada era un estándar solo con Apple, y no duró., Las compañías de terceros que vendían monitores para el Macintosh no se adhirieron al estándar, y tampoco lo hicieron los monitores de PC de la competencia. Hoy, casi tres décadas más tarde, la tecnología ha mejorado mucho y los días de las pantallas con una resolución de solo 72 ppi han desaparecido. Incluso Apple, la compañía que comenzó todo el asunto, ahora vende sus pantallas con resoluciones mucho más altas. Ya nadie está haciendo pantallas de 72 ppi. Ya nadie está usando pantallas de 72 ppi., Y, sin embargo, a pesar de que esa vieja tecnología está muy atrás de nosotros, todavía tenemos un montón de gente que sigue creyendo que necesitamos establecer la resolución de nuestras imágenes a 72 píxeles por pulgada en Photoshop antes de subirlas a la web. La mayoría de la gente piensa que la razón es para que las imágenes se muestren correctamente en la pantalla, así que comencemos las cosas aprendiendo una manera fácil de demostrar que el monitor de su computadora, junto con todos los monitores de computadora modernos, realmente tiene una resolución mucho mayor que 72 ppi.,

poniendo a prueba el estándar de 72 PPI

como todos los demás en estos días, la pantalla de su computadora (ya sea un monitor independiente, un sistema todo en uno como un iMac o parte de un portátil) tiene una resolución de pantalla superior a 72 píxeles por pulgada, y no tiene que tomar mi palabra para ello. Puede probarlo usted mismo fácilmente. Todo lo que necesitas es una regla o cinta métrica. Ahora, cuando una tienda te vende un monitor de computadora, generalmente te dicen su tamaño basado en su ancho diagonal, con algunos tamaños comunes que son 17 pulgadas, 19 pulgadas, 24 pulgadas, y así sucesivamente., Está bien, pero para nuestra prueba aquí, no necesitamos preocuparnos por ese número. Lo que necesitamos averiguar es el ancho real, en pulgadas, de su pantalla. Para hacer eso, simplemente tome su regla o cinta métrica y mida el área de la pantalla de izquierda a derecha. Asegúrate de medir solo el área de la pantalla. No incluya ninguno de los bordes alrededor de la pantalla. Necesitamos el ancho real de la pantalla (foto del monitor de la computadora):

Mida el ancho de su pantalla (sin incluir el borde exterior).,

una vez que haya medido el ancho, la otra cosa que debe asegurarse es que su monitor esté configurado en su resolución de pantalla nativa, que es el número real de píxeles que su pantalla puede mostrar de izquierda a derecha y de arriba a abajo. Por ejemplo, un monitor con una resolución de pantalla nativa de 1920 x 1080 (comúnmente conocido en estos días como «Full HD») contiene 1920 píxeles de izquierda a derecha y 1080 píxeles de arriba a abajo., Actualmente estoy usando un monitor con una resolución de pantalla nativa de 2560 x 1440, pero mi computadora portátil tiene una resolución de pantalla nativa de 1920 x 1200, por lo que varía, lo que significa que necesitará conocer la resolución de pantalla nativa de su monitor específico y asegurarse de que es lo que tiene el monitor configurado en las opciones de pantalla de su sistema operativo.,

ahora que ha medido el ancho real de su pantalla y se ha asegurado de que su monitor se esté ejecutando a su resolución de pantalla nativa, para averiguar cuál es su resolución de pantalla real (en píxeles por pulgada), simplemente tome el primer número de la resolución de pantalla nativa, que le indica el ancho de su pantalla en píxeles, y divídalo por el ancho de su pantalla en pulgadas. Por ejemplo, mi resolución de pantalla nativa es 2560 x 1440, así que tomaré ese primer número, 2560, que es el ancho de la pantalla en píxeles, y lo dividiré por el ancho en pulgadas, que en mi caso era 23.,4 (o bastante cerca, de todos modos). Usando la práctica calculadora incorporada de mi sistema operativo, 2560 ÷ 23.4 = 109.4, que redondearé a 109. Por lo tanto, solo a partir de esta prueba rápida y simple, he confirmado que mi resolución de pantalla es de 109 píxeles por pulgada, no 72 píxeles por pulgada. Su propia prueba con su pantalla puede darle un resultado diferente al mío, pero a menos que todavía esté utilizando uno de esos ordenadores Macintosh originales de mediados de los 80, será mucho más alto que 72 ppi.

si quieres, puedes hacer lo mismo con la altura de tu pantalla., Simplemente tome su regla o cinta métrica y mida la altura real de la pantalla en pulgadas (una vez más evitando el área del borde alrededor de ella):

Mida la altura de su pantalla (sin incluir el borde exterior).

luego, toma el segundo número de la resolución nativa de la pantalla, que te da la altura en píxeles, y divídelo por la altura en pulgadas. Una vez más, mi resolución de pantalla nativa es de 2560 x 1440, así que tomaré ese segundo número, 1440, y lo dividiré por mi altura de pantalla medida, que era de 13.2 pulgadas. Usando mi calculadora, 1440 ÷ 13.2 = 109.,09 que otra vez redondearé a 109. Como podemos ver, debería obtener más o menos el mismo resultado utilizando el ancho o la altura de su pantalla. En mi caso, ambos calcularon 109 píxeles por pulgada, no 72 píxeles por pulgada.

para la comparación, vamos a comprobar la resolución de pantalla real de mi ordenador portátil. Es un MacBook Pro (hecho por supuesto por Apple, la compañía que nos dio el estándar original de 72 ppi hace muchos años)., Mi MacBook Pro tiene una resolución de pantalla nativa de 1920 x 1200, así que al igual que lo hice antes, tomaré ese primer número, 1920, que me da el ancho de la pantalla en píxeles, y lo dividiré por el ancho de la pantalla en pulgadas, que en este caso es 14.4. Así, 1920 ÷ 14.4 = 133.3, que voy a redondear a 133 píxeles por pulgada. Eso es mucho más alto que 72 e incluso más alto que mi monitor independiente. Haré lo mismo con la altura, tomando la altura en píxeles (1200) y dividiéndola por la altura en pulgadas (9). 1200 ÷ 9 = 133.3, de nuevo redondeado a 133 píxeles por pulgada.,

dos pantallas diferentes, cada una con dos resoluciones de pantalla diferentes (109 ppi y 133 ppi), ambas considerablemente más altas que 72 ppi que, según muchas personas hoy en día, sigue siendo la resolución estándar de la industria para ver imágenes en la web y en la pantalla., Si mi pantalla, su pantalla y la pantalla de todos los demás tienen una resolución superior a 72 ppi, sin mencionar el hecho de que ambas pantallas tenían resoluciones muy diferentes entre sí y su pantalla también puede tener una resolución diferente, entonces claramente, no solo ya no hay un estándar oficial para la resolución de pantalla, sino que incluso si lo hubiera, ya no sería de 72 ppi. Esos días, como los ordenadores Macintosh originales para los que fue diseñado, son historia.,

la resolución de imagen afecta el tamaño de impresión, no el tamaño de pantalla

si el hecho de que los monitores de computadora hoy en día tienen resoluciones de pantalla superiores a 72 ppi no le ha convencido de que ya no existe tal cosa como un estándar de resolución de pantalla de 72 ppi, aquí hay otro hecho importante a considerar. Si ha leído previamente nuestro tutorial resolución de imagen, dimensiones en píxeles y tamaño de documento, ya sabe que la resolución de imagen no tiene absolutamente nada que ver con cómo aparece su imagen en la pantalla. De hecho, una imagen digital, por sí sola, no tiene resolución inherente en absoluto. Son sólo píxeles., Tiene un cierto número de píxeles de izquierda a derecha y un cierto número de arriba a abajo. El ancho y la altura de una imagen, en píxeles, se conoce como sus dimensiones en píxeles, y eso es todo lo que le importa a una pantalla de computadora.

el tamaño al que aparece una imagen en la pantalla depende solo de dos cosas: las dimensiones en píxeles de la imagen y la resolución de la pantalla. Siempre y cuando haya configurado su pantalla a su resolución de pantalla nativa como se mencionó anteriormente, se mostrará una imagen píxel por píxel., En otras palabras, cada píxel de la imagen ocupará exactamente un píxel en su pantalla. Por ejemplo, una imagen de 640×480 píxeles llenaría un área de 640×480 píxeles de la pantalla. Un banner de 800 píxeles de ancho en un sitio web aparecería 800 píxeles de ancho en la pantalla. Ni más, ni menos. Y no importa a qué se ajuste la resolución de la imagen en Photoshop, ya sea 72 ppi, 300 ppi o 3000 ppi, no tendrá ningún efecto en lo grande o pequeño que aparezca la imagen en la pantalla.

esto se debe a que la resolución de la imagen solo afecta a una cosa: el tamaño de la imagen cuando se imprime., Al configurar la resolución en Photoshop, le decimos a la impresora, no a la pantalla, cuántos píxeles de la imagen deben comprimirse en una pulgada de papel. Cuantos más píxeles aprietes en cada pulgada de papel, más pequeña aparecerá la imagen cuando se imprima. Y, en términos generales, cuantos más píxeles imprima por pulgada, mayor será la calidad de impresión.

podemos calcular fácilmente qué tan grande se imprimirá una foto en función de una resolución de imagen determinada., Simplemente tome el ancho de la foto en píxeles y divídalo por la resolución de la imagen, luego tome la altura de la foto en píxeles y divídala por la resolución de la imagen también. Si tomamos una imagen de 640 x 480 píxeles, como ejemplo, y establecemos su resolución a 72 ppi en Photoshop, entonces podemos dividir el ancho y la altura de la foto por su resolución para determinar que se imprimirá en papel a aproximadamente 8.9 x 6.7 pulgadas., Si aumentamos su resolución en Photoshop a, digamos, 240 ppi, que es una resolución de impresión más común, entonces nuevamente si hacemos los cálculos, dividiendo el ancho y la altura del píxel por 240 ppi, sabemos que la foto se imprimiría a un tamaño de 2.7 x 2 pulgadas, que es mucho más pequeño que si la hubiéramos impreso a 72 ppi, pero la calidad de impresión general sería mucho mejor. Pero lo que es más importante entender aquí es que al cambiar la resolución, no estamos, de ninguna manera, afectando la apariencia de la imagen en la pantalla.,

para ver más claramente cómo afecta la resolución al tamaño de impresión y no al tamaño de la pantalla, aquí hay una imagen que tengo abierta en Photoshop. Este pequeño también ha estado tratando de darle sentido a todas estas cosas de resolución web de 72 ppi, pero parece que puede estar pensándolo un poco (pensando en la foto de un niño ):

la resolución de la imagen no es realmente tan complicada, pero definitivamente es una A por esfuerzo.,

abriré el cuadro de diálogo Tamaño de imagen de Photoshop subiendo al menú Imagen en la barra de menú en la parte superior de la pantalla y eligiendo Tamaño de imagen:

yendo a Image > Tamaño de imagen.

en la parte superior del cuadro de diálogo Tamaño de imagen se encuentra la sección Dimensiones en píxeles que nos indica el ancho y alto de la imagen en píxeles. Aquí podemos ver que mi foto tiene un ancho y una altura de 500 píxeles, por lo que es un tamaño decente para la visualización en la web., Esta es la única parte del cuadro de diálogo Tamaño de imagen que le importa a la pantalla de su computadora: Las dimensiones reales en píxeles de la imagen:

la sección Dimensiones en píxeles nos muestra el ancho y la altura en píxeles.

debajo de las dimensiones en píxeles se encuentra la sección Tamaño del documento que nos indica el tamaño de la imagen que aparecería actualmente en papel si la imprimiéramos. Esta sección se ocupa exclusivamente del tamaño de impresión y no tiene ningún efecto en la forma en que la imagen aparece en la pantalla. También resulta ser el hogar de la opción de resolución muy importante (la razón por la que todos estamos aquí!,), lo que tiene sentido porque la resolución afecta al tamaño de impresión, no al tamaño de pantalla. Como podemos ver, Photoshop ha seguido adelante y establecer la resolución de mi foto a 72 píxeles por pulgada (sí, incluso Photoshop está contribuyendo al mito de 72 ppi), y directamente encima de la opción de resolución, en los cuadros de ancho y alto, podemos ver que a 72 ppi, mi foto de 500 x 500 píxeles se imprimiría a 6.944 x 6.944 pulgadas en papel (500 ÷ 72 = 6.944):

la sección Tamaño del documento nos muestra el tamaño de impresión basado en la resolución actual. No tiene ningún efecto en el tamaño de la pantalla.,

veamos qué pasa si aumento la resolución de la imagen. Antes de hacer eso, sin embargo, voy a desmarcar rápidamente la opción Resample Image cerca de la parte inferior del cuadro de diálogo para que la imagen mantenga sus dimensiones de píxel originales Cuando cambie la resolución:

desmarcar la opción Resample Image.

con Resample Image sin marcar, aumentaré la resolución de 72 píxeles por pulgada a 240 píxeles por pulgada. Podemos ver en la sección Dimensiones de píxeles en la parte superior que el aumento de la resolución no ha cambiado las dimensiones reales de píxeles., Sigue siendo de 500 x 500 píxeles, lo que significa que todavía ocuparía un área de 500 x 500 píxeles en la pantalla. Pero a 240 ppi, ahora se imprimiría en papel a un tamaño de solo 2.083 x 2.083 pulgadas (500 ÷ 240 = 2.083). Cambiar la resolución cambió el tamaño de impresión de la foto, pero nada más:

la imagen ahora se imprimiría más pequeña, pero seguiría siendo exactamente el mismo tamaño de 500 x 500 píxeles en la pantalla.

aumentaré nuevamente la resolución de la imagen, esta vez a algo loco como 500 píxeles por pulgada, solo para hacer las matemáticas muy fáciles., Una imagen de 500 x 500 píxeles, con una resolución de 500 píxeles por pulgada, se imprimiría como una imagen de 1 x 1 pulgada en papel (500 ÷ 500 = 1). Una vez más, las dimensiones reales de píxeles de la imagen no han cambiado., Incluso a 500 ppi, mi imagen no aparecería más grande o más pequeña en la pantalla que lo haría a 72 ppi, o 240 ppi, o en cualquier resolución porque sigue siendo una imagen de 500 x 500 píxeles independientemente de la configuración de resolución, y sus dimensiones de píxeles son todo lo que le importa a la pantalla de su computadora:

a 500 ppi, la imagen se imprimiría muy pequeña, pero seguiría apareciendo como un 500 x imagen de 500 píxeles en pantalla.

finalmente, aquí hay una comparación lado a lado de la imagen tal como aparece en las tres resoluciones anteriores., He hecho la imagen más pequeña (ahora es solo 200 x 200 píxeles) para que pueda encajar las tres versiones una junto a la otra, pero la primera versión de la izquierda se guardó en 72 ppi. La versión en el medio se guardó a 240 ppi, y la versión de la derecha se guardó a 500 ppi:

a 72 ppi (izquierda), 240 ppi (medio) y 500 ppi (derecha) versión de la imagen.

como podemos ver claramente, la resolución no tiene ningún efecto en el aspecto de la imagen en la pantalla., Cada una de las tres versiones ocupa un espacio de exactamente 200 x 200 píxeles, independientemente de la configuración de resolución. La calidad de cada versión también es exactamente la misma. Cada versión imprimiría en un tamaño muy diferente debido a los diferentes ajustes de resolución, pero no hace ninguna diferencia en absoluto en el tamaño de la pantalla o en la calidad de la imagen.

aunque es dudoso que esta tontería de resolución de pantalla y web de 72 ppi desaparezca pronto, espero que este tutorial al menos haya hecho más fácil ver por qué es, de hecho, una tontería en este punto., Actualmente, todos los monitores de computadora tienen resoluciones de pantalla superiores a 72 ppi, y la opción de resolución de imagen en Photoshop solo afecta al tamaño de impresión de una foto, no al tamaño de pantalla.

cualquier foto con dimensiones en píxeles lo suficientemente pequeñas como para mostrarse en la web sería demasiado pequeña para que cualquiera pueda descargar e imprimir una versión de buena calidad a un tamaño útil, por lo que con todas estas razones en mente, si su foto solo se verá en la pantalla, ya sea en la web, en un correo electrónico o en cualquier caso, simplemente no hay una razón lógica por la que deba establecer su resolución a 72 ppi en Photoshop., A menos que esté imprimiendo la foto, no necesita preocuparse por la resolución de la imagen en absoluto. ¡Y ahí lo tenemos!

obtener todos nuestros tutoriales de Photoshop como PDF! Descarga hoy!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *