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

Es posible que incluso haya escuchado decir que si bien 72 ppp son correctos para las imágenes que se muestran en una Mac, una PC con Windows necesita una resolución establecida en 96 ppp.

Algunos dicen que es "ppi" ( píxeles por pulgada), otros afirman que es "ppp" ( puntos por pulgada), y todo se volvería muy confuso si no fuera por un pequeño hecho: ¡todo es una tontería! En este tutorial, aprenderemos por qué simplemente no existe una resolución web o de pantalla estándar y por qué, si sus imágenes están destinadas a la web, ¡no necesita preocuparse por la resolución de la imagen!

Una pequeña 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 primeras computadoras 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 se diseñaron específicamente para funcionar 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 facilitó el escalado de la visualización de la pantalla a la página impresa, lo que significaba que su texto y gráficos podían previsualizarse en la pantalla con el tamaño exacto que aparecerían cuando se imprimieran. Más tarde, cuando Apple comenzó a hacer pantallas más grandes para 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 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 venden monitores para Macintosh no se apegaron al estándar, y tampoco los monitores de PC de la competencia. Hoy, casi tres décadas después, la tecnología ha mejorado enormemente y los días de las pantallas con una resolución de solo 72 ppp han quedado atrás. Incluso Apple, la compañía que comenzó todo, ahora vende sus pantallas con resoluciones mucho más altas. Ya nadie fabrica pantallas de 72 ppi. Ya nadie usa pantallas de 72 ppi. Y, sin embargo, a pesar de que esa vieja tecnología está muy por detrás de nosotros, todavía tenemos mucha gente que sigue creyendo que necesitamos establecer la resolución de nuestras imágenes en 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 aprendiendo una manera fácil de demostrar que el monitor de su computadora, junto con cada monitor de computadora moderno, en realidad tiene una resolución muy superior a 72 ppp.

Poner 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 una computadora portátil) tiene una resolución de pantalla superior a 72 píxeles por pulgada, y no tiene para tomar mi palabra Puedes probarlo tú mismo fácilmente. Todo lo que necesitas es una regla o una cinta métrica. Ahora, cuando una tienda le vende un monitor de computadora, generalmente le dicen su tamaño en función de su ancho diagonal, con algunos tamaños comunes de 17 pulgadas, 19 pulgadas, 24 pulgadas, y así sucesivamente. Eso está bien, pero para nuestra prueba aquí, no necesitamos preocuparnos por ese número. Lo que necesitamos saber 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úrese 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 de Shutterstock):

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 con su resolución de pantalla nativa, que es la cantidad 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 como "full HD" en la actualidad) 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á saber la resolución de pantalla nativa de su monitor específico y asegúrese de que es lo que tiene configurado el monitor en las opciones de visualización de su sistema operativo.

Ahora que ha medido el ancho real de su pantalla y se ha asegurado de que su monitor funciona con su resolución de pantalla original, para averiguar cuál es su resolución de pantalla real (en píxeles por pulgada), simplemente tome el primer número del original resolución de pantalla, 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 fue 23.4 (o bastante cerca, de todos modos). Utilizando la práctica calculadora integrada de mi sistema operativo, 2560 ÷ 23.4 = 109.4, que redondearé a 109. Entonces, solo de esta prueba rápida y simple, he confirmado que la resolución de mi 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é usando una de esas computadoras Macintosh originales de mediados de los 80, será mucho más alta que 72 ppp.

Si lo desea, puede hacer lo mismo con la altura de su pantalla. Simplemente tome su regla o cinta métrica y mida la altura real de la pantalla en pulgadas (una vez más, evite el área del borde a su alrededor):

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

Luego, tome el segundo número de la resolución de pantalla original de su pantalla, que le da la altura en píxeles, y divídala por la altura en pulgadas. Nuevamente, mi resolución de pantalla nativa es de 2560 x 1440, así que tomaré ese segundo número, 1440, y lo dividiré por la altura medida de mi pantalla, que fue de 13.2 pulgadas. Usando mi calculadora, 1440 ÷ 13.2 = 109.09 que nuevamente redondearé a 109. Como podemos ver, debería obtener prácticamente el mismo resultado usando el ancho o la altura de su pantalla. En mi caso, ambos funcionaron a 109 píxeles por pulgada, no a 72 píxeles por pulgada.

A modo de comparación, verifiquemos la resolución de pantalla real de mi computadora portátil. Es una MacBook Pro (hecha 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, como 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 del pantalla en pulgadas, que en este caso es 14.4. Entonces, 1920 ÷ 14.4 = 133.3, que 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, nuevamente 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 ppp, sin mencionar el hecho de que mis dos 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, pero incluso si lo hubiera, ya no sería 72 ppp. Esos días, como las computadoras Macintosh originales para las que fue diseñado, son historia.

Complemento de códigos cortos, acciones y filtros: error en shortcode (ads-essentials-middle)

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

Si el hecho de que todos los monitores de computadora tengan hoy resoluciones de pantalla superiores a 72 ppp no ​​lo ha convencido de que ya no existe un estándar de resolución de pantalla de 72 ppp, aquí hay otro hecho importante a considerar. Si previamente leyó nuestro tutorial de Resolución de imagen, Dimensiones de píxel 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 su pantalla. De hecho, una imagen digital, por sí sola, no tiene una resolución inherente en absoluto. Son solo 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 alto de una imagen, en píxeles, se conoce como sus dimensiones de píxeles, y eso es lo único que le importa a la pantalla de una computadora.

El tamaño con el que aparece una imagen en su 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 visualización nativa como lo discutimos anteriormente, entonces una imagen se mostrará píxel por píxel. En otras palabras, cada píxel en la imagen ocupará exactamente un píxel en su pantalla. Por ejemplo, una imagen de 640x480 píxeles llenaría un área de 640x480 píxeles de su pantalla. Un banner de 800 píxeles de ancho en un sitio web aparecería en la pantalla con 800 píxeles de ancho. Ni mas ni menos. Y no importa cuál sea la resolución de la imagen en Photoshop, ya sea 72 ppi, 300 ppi o 3000 ppi, no tendrá ningún efecto en el tamaño o el tamaño de la imagen en la pantalla.

Esto se debe a que la resolución de la imagen afecta solo 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 se deben comprimir en una pulgada de papel. Cuantos más píxeles esté apretando en cada pulgada de papel, más pequeña será 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 determinar fácilmente qué tan grande se imprimirá una foto en función de una determinada resolución de imagen. Simplemente tome el ancho de la foto en píxeles y divídala por la resolución de su imagen, luego tome la altura de la foto en píxeles y divídala también por la resolución de la imagen. Si tomamos una imagen de 640 x 480 píxeles, como ejemplo, y establecemos su resolución en 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, nuevamente si hacemos los cálculos, dividiendo el ancho y la altura del píxel por 240 ppi, sabremos que la foto se imprimirá en un tamaño de 2.7 x 2 pulgadas, que es mucho más pequeño que si lo hubiéramos impreso a 72 ppp, 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 la resolución afecta el tamaño de impresión y no el tamaño de la pantalla, aquí hay una imagen que he abierto en Photoshop. Este pequeño también ha estado tratando de darle sentido a todas estas cosas de resolución web de 72 ppp, pero parece que puede estar pensando un poco (pensando en la foto del niño de Shutterstock):

La resolución de imagen realmente no es 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 seleccionando Tamaño de imagen :

Ir a Imagen> Tamaño de imagen.

En la parte superior del cuadro de diálogo Tamaño de imagen se encuentra la sección Dimensiones de píxeles que nos dice el ancho y la altura 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 tiene un tamaño decente para mostrar en la web. Esta es la única parte del cuadro de diálogo Tamaño de imagen que le interesa a la pantalla de su computadora: las dimensiones de píxeles reales de la imagen:

La sección Dimensiones de 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 dice qué tan grande sería la imagen 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 sobre cómo aparece la imagen en la pantalla. También es el hogar de la opción de resolución más importante (¡la razón por la que todos estamos aquí!), Lo que tiene sentido porque la resolución afecta el tamaño de impresión, no el tamaño de la pantalla. Como podemos ver, Photoshop ha seguido adelante y ha establecido la resolución de mi foto en 72 píxeles por pulgada (sí, incluso Photoshop está contribuyendo al mito de 72 ppp), y directamente encima de la opción Resolución, en los cuadros Ancho y Altura, puedo ver que a 72 ppp, 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 sobre el tamaño de la pantalla.

Veamos qué sucede si aumento la resolución de la imagen. Sin embargo, antes de hacerlo, 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íxeles originales cuando cambie la resolución:

Desmarcando la opción Resample Image.

Con Resample Image desmarcado, 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 aumentar la resolución no ha cambiado las dimensiones de píxeles reales. Sigue siendo 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 ppp, ahora se imprimiría en papel con 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 teniendo exactamente el mismo tamaño de 500 x 500 píxeles en la pantalla.

Nuevamente aumentaré la resolución de la imagen, esta vez a algo loco como 500 píxeles por pulgada, solo para hacer que las matemáticas sean realmente fáciles. Una imagen de 500 x 500 píxeles, configurada 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 de píxeles reales de la imagen no han cambiado. Incluso a 500 ppp, mi imagen no aparecería más grande o más pequeña en la pantalla que a 72 ppp, 240 ppp, 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 toda la pantalla de su computadora se preocupa por:

A 500 ppp, la imagen se imprimirá muy pequeña, pero aún aparecerá como una imagen de 500 x 500 píxeles en la pantalla.

Finalmente, aquí hay una comparación lado a lado de la imagen tal como aparece en las tres resoluciones anteriores. Reduje la imagen (ahora solo tiene 200 x 200 píxeles) para poder ajustar las tres versiones una al lado de la otra, pero la primera versión de la izquierda se guardó a 72 ppp. La versión en el medio se guardó a 240 ppp, y la versión a la derecha se guardó a 500 ppp:

Una versión de 72 ppp (izquierda), 240 ppp (centro) y 500 ppp (derecha) de la imagen.

Como podemos ver claramente, la resolución no tiene ningún efecto en cómo se ve 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 se imprimiría en un tamaño muy diferente debido a las diferentes configuraciones de resolución, pero no importa en absoluto el tamaño de la pantalla o la calidad de la imagen.

Si bien es dudoso que este sinsentido de 72 ppi de resolución de pantalla y web desaparezca pronto, espero que este tutorial al menos haya facilitado ver por qué es, de hecho, una tontería en este momento. En la actualidad, todos los monitores de computadora tienen resoluciones de pantalla superiores a 72 ppp, y la opción de resolución de imagen en Photoshop afecta solo el tamaño de impresión de una foto, no su tamaño de pantalla.

Cualquier foto con dimensiones de 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 tanto, teniendo en cuenta todas estas razones, si su foto solo se verá en la pantalla, ya sea está en la web, en un correo electrónico, o en cualquier caso, simplemente no hay una razón lógica por la que deba configurar su resolución a 72 ppp en Photoshop. A menos que esté imprimiendo la foto, no necesita preocuparse por la resolución de la imagen. ¡Y ahí lo tenemos!