El mito de la resolución web de 72 PPI

El mito de la resolución web de 72ppi

El mito de la resolución web de 72 PPI

Si ha estado rodeado 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 decir que la resolución correcta para las imágenes que se muestran en la web, o en las pantallas de las computadoras en general, es de 72 píxeles por pulgada (ppp).

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

Algunos dicen que es «ppi» (pixeles 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 completa tontería! En este tutorial, aprenderemos por qué simplemente no existe una resolución de pantalla o web estándar y por qué, si sus imágenes están destinadas a la web, ¡no necesita preocuparse en absoluto 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? Es porque las pantallas de Macintosh fueron diseñadas 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 el texto y los gráficos se podían previsualizar en la pantalla con el tamaño exacto en el 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 configuradas en los mismos 72 píxeles por pulgada para que los usuarios siempre vieran una vista previa precisa en pantalla del documento impreso (siempre que lo estuvieran utilizando 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 empresas de terceros que venden monitores para Macintosh no se apegaron al estándar, ni 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 inició todo, ahora vende sus pantallas con resoluciones mucho más altas. Ya nadie está haciendo pantallas de 72 ppi. Nadie es utilizando Pantallas de 72 ppi más. Y, sin embargo, a pesar de que esa vieja tecnología está muy por detrás de nosotros, todavía tenemos muchas personas que siguen creyendo que debemos 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 que las imágenes se mostrarán correctamente en la pantalla, así que comencemos aprendiendo una manera fácil de demostrar que el monitor de su computadora, junto con todos los monitores de computadora modernos, en realidad tiene una resolución mucho más alta que 72 ppp.

Poniendo el estándar de 72 PPI a prueba

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 usted no tiene para tomar mi palabra. Puede probarlo fácilmente usted mismo. Todo lo que necesita es una regla o 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, siendo algunos tamaños comunes de 17 pulgadas, 19 pulgadas, 24 pulgadas, etc. Eso está bien, pero para nuestra prueba aquí, no necesitamos preocuparnos por ese número. Lo que tenemos que 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 ningún borde alrededor de la pantalla. Necesitamos el ancho real de la pantalla (foto del monitor de la computadora de Shutterstock):

Midiendo el ancho real de la pantalla de la computadora.  Imagen con licencia de Shutterstock de Photoshop Essentials.com

Mide el ancho de tu pantalla (sin incluir el borde exterior).

Una vez que haya medido el ancho, la otra cosa de la 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 puede mostrar su pantalla 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 asegúrese de que sea 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 esté funcionando con 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 pantalla nativa. resolución de pantalla, que le indica el ancho de la pantalla en píxeles y lo divide por el ancho de la 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). Usando la práctica calculadora incorporada 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 109 píxeles por pulgada, no 72 píxeles por pulgada. Tu propia prueba con tu pantalla puede darte un resultado diferente al mío, pero a menos que todavía estés 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 evitando el área del borde a su alrededor):

Medir la altura real de la pantalla de la computadora.  Imagen con licencia de Shutterstock de Photoshop Essentials.com

Mide la altura de tu pantalla (sin incluir el borde exterior).

Luego, tome el segundo número de la resolución de pantalla nativa 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 2560 x 1440, así que tomaré ese segundo número, 1440, y lo dividiré por la altura de mi pantalla medida 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 más o menos el mismo resultado usando el ancho o el alto 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 (fabricada, por supuesto, por Apple, la empresa 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 hice antes, tomaré el 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 un lote 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 ppp y 133 ppp), ambas considerablemente superiores a 72 ppp 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, la suya 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 que ya no existe un estándar oficial para la resolución de pantalla, pero incluso si lo hubiera, ya no sería de 72 ppp. Esos días, como el Macintosh original las computadoras para las que fue diseñado, son historia.

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 de hoy en día tengan resoluciones de pantalla superiores a 72 ppp no ​​lo ha convencido de que ya no existe el estándar de resolución de pantalla de 72 ppp, aquí hay otro hecho importante a considerar. Si ya leyó nuestro tutorial Resolución de imagen, Dimensiones de píxeles y Tamaño del documento, ya sabe que la resolución de imagen tiene absolutamente nada que ver con cómo aparece su imagen en su pantalla. De hecho, una imagen digital, por sí sola, no tiene ninguna resolución inherente. 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 su dimensiones en píxeles, y eso es todo lo que le importa a la pantalla de una computadora.

El tamaño en 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 visualización de su pantalla. Siempre que haya configurado su pantalla en su resolución de pantalla nativa como discutimos anteriormente, entonces 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 su pantalla. Un banner de 800 píxeles de ancho en un sitio web aparecería con 800 píxeles de ancho en la pantalla. Ni mas ni menos. Y no importa lo que establezca la resolución de la imagen en Photoshop, ya sea 72 ppp, 300 ppi o 3000 ppi, no tendrá ningún efecto en el tamaño de la imagen en la pantalla.

Esto se debe a que la resolución de la imagen afecta solo a una cosa: el tamaño de la imagen cuando es impreso. Al establecer la resolución en Photoshop, le decimos a la impresora, no la pantalla, cuántos de los píxeles de la imagen se deben comprimir en una pulgada de papel. Cuantos más píxeles apriete 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 averiguar 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ídalo 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 ppp en Photoshop, entonces podemos dividir el ancho y el alto 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 ppp, que es una resolución de impresión más común, entonces nuevamente si hacemos los cálculos, dividiendo el ancho y el alto de píxeles por 240 ppp, 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 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 afectando, de ninguna manera, 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 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 demasiado (pensando en la foto de un niño de Shutterstock):

Niño de pensamiento con una pizarra en el fondo.  Imagen con licencia de Shutterstock de Photoshop Essentials.com

La resolución de la imagen no es tan complicada, pero definitivamente una A para el esfuerzo.

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

Elegir el comando Tamaño de imagen en Photoshop.  Imagen © 2013 Photoshop Essentials.com

Ir a Imagen> Tamaño de imagen.

En la parte superior del cuadro de diálogo Tamaño de imagen está el Dimensiones de píxeles sección que nos dice el ancho y alto de la imagen en píxeles. Aquí podemos ver que mi foto tiene un ancho y un alto de 500 píxeles, lo que la convierte en 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 reales en píxeles de la imagen:

La sección Dimensiones en píxeles del cuadro de diálogo Tamaño de imagen.  Imagen © 2013 Photoshop Essentials.com

La sección Dimensiones de píxeles nos muestra el ancho y el alto en píxeles.

Debajo de las dimensiones en píxeles está el Tamaño del documento sección que nos dice qué tan grande aparecería actualmente la imagen en papel si tuviéramos que imprimirla. Esta sección trata exclusivamente del tamaño de impresión y no tiene ningún efecto sobre cómo aparece la imagen en la pantalla. También resulta ser el hogar de lo más importante Resolución opción (¡la razón por la que todos estamos aquí!), 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 se ha adelantado y ha establecido la resolución de mi foto en 72 píxeles por pulgada (sí, incluso Photoshop está contribuyendo al mito de 72 ppi), y directamente encima de la opción Resolución, en los cuadros Ancho y Alto, puedo ver que a 72 ppp, mi foto de 500 x 500 píxeles se imprimirá a 6,944 x 6,944 pulgadas en papel (500 ÷ 72 = 6,944):

La sección Tamaño de documento del cuadro de diálogo Tamaño de imagen.  Imagen © 2013 Photoshop Essentials.com

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

Veamos qué pasa si aumento la resolución de la imagen. Sin embargo, antes de hacer eso, voy a desmarcar rápidamente la Volver a muestrear la imagen opción cerca de la parte inferior del cuadro de diálogo para que la imagen mantenga sus dimensiones de píxeles originales cuando cambio la resolución:

Desmarcando la opción Volver a muestrear imagen en el cuadro de diálogo Tamaño de imagen.  Imagen © 2013 Photoshop Essentials.com

Desmarcando la opción Volver a muestrear imagen.

Con Volver a muestrear imagen 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 el aumento de la resolución no ha cambiado las dimensiones reales de los 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 ppp, ahora imprimir 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:

Cambiando la resolución de la imagen a 240 píxeles por pulgada.  Imagen © 2013 Photoshop Essentials.com

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.

Volveré a aumentar la resolución de la imagen, esta vez a algo loco como 500 píxeles por pulgada, solo para hacer las matemáticas realmente fáciles. Una imagen de 500 x 500 píxeles, configurada a 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 en píxeles de la imagen no han cambiado. Incluso a 500 ppi, mi imagen no parecería más grande o más pequeña en la pantalla que 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:

Cambiando la resolución de la imagen a 500 píxeles por pulgada.  Imagen © 2013 Photoshop Essentials.com

A 500 ppp, la imagen se imprimirá muy pequeña, pero seguirá apareciendo 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. Hice la imagen más pequeña (ahora solo tiene 200 x 200 píxeles) para poder colocar 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 del medio se guardó a 240 ppp, y la versión de la derecha se guardó a 500 ppp:

Una versión de 200x200 píxeles de la imagen guardada a 72 ppp.  Imagen © 2013 Photoshop Essentials.com Una versión de 200x200 píxeles de la imagen guardada a 240 ppp.  Imagen © 2013 Photoshop Essentials.com Una versión de 200x200 píxeles de la imagen guardada a 500 ppp.  Imagen © 2013 Photoshop Essentials.com

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

Como podemos ver claramente, la resolución no tiene ningún efecto sobre cómo se ve la imagen en la pantalla. Las tres versiones ocupan cada una 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 impresión en un tamaño muy diferente debido a los diferentes ajustes de resolución, pero no hace ninguna diferencia en el tamaño de la pantalla o en la calidad de la imagen.


Si bien 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 que sea más fácil ver por qué, de hecho, es una tontería en este momento. Los monitores de computadora en estos días tienen resoluciones de pantalla superiores a 72 ppp, y la opción de resolución de imagen en Photoshop afecta solo al tamaño de impresión de una foto, no al tamaño de la 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 que, con todas estas razones en mente, 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 establecer su resolución en 72 ppp en Photoshop. A menos que esté imprimiendo la foto, no necesita preocuparse en absoluto por la resolución de la imagen. ¡Y ahí lo tenemos!

Obtenga todos nuestros tutoriales de Photoshop en formato PDF. ¡Descárgalos hoy!