¿Es obligatorio mantener las imágenes a 72 dpi para el diseño web?

La configuración de PPI (píxeles por pulgada) no se utiliza en las imágenes web. Las imágenes en la web, las pantallas de retina u otras, se muestran por sus dimensiones de píxeles (ancho y alto), no por ninguna configuración de PPI/DPI. De hecho, es posible que muchas imágenes web como png, gif, jpg ni siquiera almacenen una configuración de ppi en sus datos internos y dependan de la configuración de ancho y alto.

Una imagen de 100 píxeles x 100 píxeles se muestra como la de la web, independientemente de cualquier configuración de PPI/DPI.

Esta es la razón por la cual las imágenes para las pantallas retina se guardan con un tamaño de 2x, en lugar de una configuración de ppi mayor. La densidad de píxeles de las pantallas de retina es más alta, sin embargo, aún muestran la imagen en lo que sea que la pantalla indique que es el ancho y la altura de una imagen que no se basa en ninguna configuración de PPI.

En realidad, no se ha visto un monitor con una densidad de píxeles de 72ppi desde principios hasta mediados de la década de 1980. 72ppi no ha sido preciso durante más de 40 años. De hecho, nunca fue preciso para los sistemas Windows, porque Windows usa un valor predeterminado de 96ppi para la densidad de píxeles.

¿No me crees? Pruébelo usted mismo. Cree dos imágenes en Photoshop, ambas de 100 píxeles por 100 píxeles. Haga una imagen de 72ppi y la otra de 300ppi. Guárdelos ambos para la web... ¿Son diferentes en un navegador web? No. Ambas son imágenes fijas de 100 px por 100 px.

La configuración de DPI (puntos por pulgada) solo se aplica cuando se imprime una imagen. DPI no influye en las imágenes destinadas a la pantalla. DPI se refiere a la cantidad de puntos/manchas de tinta que la prensa colocará en una pulgada. Dado que ninguna pantalla en la Tierra usa tinta, DPI es un término incorrecto para cualquier cosa relacionada con las pantallas de visualización.

Tenga en cuenta que algunos fabricantes de dispositivos móviles optaron por utilizar el término DPIx o xDPI, que a veces se abrevia simplemente como DPI. Esta no es la forma tradicional del acrónimo y el fabricante simplemente ha enturbiado mucho las aguas. Si ve DPI en relación con las resoluciones de pantalla móvil, están hablando de PPI efectivo y no se refieren realmente a puntos por pulgada. Un acrónimo más apropiado hubiera sido xPPI o PPIx porque las pantallas móviles, como todas las pantallas, usan píxeles y no tinta.

No importa qué configuración de ppi use para las imágenes web. Es el ancho (píxel) y la altura (píxel) de una imagen lo que es importante.

Cuando se trabaja con varias imágenes, es importante mantener la coherencia . Querrá que todas sus imágenes se establezcan en el mismo ppi para evitar cambiar el tamaño y la escala de los aspectos si mueve piezas entre imágenes. No importa si elige usar 72, 96, 200 o 145,8 ppp, pero todas las imágenes deben configurarse de la misma manera.

Si bien el PPI definitivamente no importa, son las dimensiones de píxeles las que importan para el diseño web y de aplicaciones, debe tener mucho cuidado al usar aplicaciones de diseño y mezclar configuraciones de PPI. Este es el por qué:

Sin embargo, si planea usar Photoshop y diferentes densidades de píxeles para cada documento, arrastrar capas y copiar estilos de capa entre documentos escala los estilos de capa: arrastrar una capa desde un documento de iPhone Retina de 326 PPI a un documento de iPad Retina de 264 PPI significará que todos los estilos de capa se escalarán en un 20% (luego redondeado al entero más cercano). Y probablemente eso no es lo que quieres. Además, la vista previa de OS X mostrará imágenes de 72 PPI en el tamaño exacto, sin importar cómo lo haya configurado.

Los píxeles por pulgada son solo una etiqueta

Es por estas razones que asigno 72PPI a todos mis documentos de diseño y le recomiendo que haga lo mismo. Para cambiar la densidad de píxeles de su documento de Photoshop sin cambiar el tamaño de los datos de la imagen, abra el cuadro de diálogo Tamaño de la imagen, desmarque Cambiar el tamaño de la imagen y escriba la densidad de píxeles deseada.

Entraré en detalles sobre lo que realmente significa "dpi", con ejemplos; con eso, puede que veas la respuesta por ti mismo. :

En resumen, su imagen consiste en puntos de color, que están uno al lado del otro. Pero no tienen tamaño en ningún sentido físico.

Ahora, cuando muestre una imagen en una pantalla, normalmente solo colocará los colores de los puntos de la imagen en la trama de rectángulos de colores que su pantalla puede mostrar. Tenga en cuenta que ambos, lo que llamo "puntos" y rectángulos aquí, se llaman "píxeles", pero mirando de cerca son algo diferente.

Si mostramos una imagen de esta manera natural en una pantalla, podemos medir su tamaño.
Por ejemplo, nuestra imagen tiene 500 puntos de ancho, los colocamos en rectángulos de colores en la pantalla y vemos que tiene 5 pulgadas de ancho. Luego, tenemos 100 rectángulos por pulgada, mostrando 100 de nuestros puntos por pulgada.
Es decir, nuestra imagen tiene 100dpi en pantalla.
¡Pero ni siquiera miramos el valor de dpi en nuestro archivo de imagen!

Ahora, si miramos nuestro archivo, ¡bien puede decir que la imagen es de 200 ppp! El valor de dpi se refiere a cuántos puntos de color son visibles por pulgada de ancho o alto de la pantalla. Entonces, el valor de dpi en la imagen nos dice que nuestra imagen tendrá 2,5 pulgadas de ancho cuando se muestre, como una promesa, no como un hecho .

Cuando asignamos los puntos de la imagen a la pantalla, ni siquiera nos preocupamos por eso, porque simplemente los mostramos y medimos los dpi físicos reales de la representación en pantalla de la imagen.
Entonces, como puede ver, la promesa fue simplemente incorrecta . ¡Y a nadie le importa! Porque simplemente no es relevante.

El archivo era prometedor, al decir 200 ppp, tendrá "2,5 pulgadas de ancho cuando se muestre". Luego, usamos una pantalla que mostraba 5 pulgadas de ancho; podemos saber eso porque sabemos cuál es la pantalla real.
Normalmente, ni siquiera sabemos qué usará el usuario final como pantalla, por lo que solo podemos adivinar de todos modos,

Entonces, ahora tiene sentido:

• No sabíamos los dpi que tendrán las imágenes, mostradas en una pantalla, porque no conocíamos la pantalla.
• Pero teníamos una idea de cómo debería verse, "aproximadamente de este tamaño... bueno, entonces necesitamos unos 200 ppp más o menos". y guardó los "200 ppp" en el archivo
• Más tarde, miramos la pantalla y medimos que, de hecho, es de 100 ppp;

Y, no solo hay una pantalla en la que se puede mostrar la imagen, sino que pueden tener un tamaño diferente, por lo que ni siquiera es posible conocer un valor de ppp real al crear un archivo de imagen.

Vea también mi respuesta sobre ¿Qué es exactamente un "píxel"? .

Directamente a la pregunta, en base a lo anterior:

Cuando especifica dpi en un archivo de imagen, eso no está directamente relacionado con la calidad de la imagen que se muestra al final.
Pero puede usarse para comunicar sobre la calidad de la imagen, en términos de intenciones: puede decir "Quiero que esta imagen se muestre en una pantalla de 200 ppp".

Si quiero mostrar esta imagen, puedo tener cuidado y buscar una pantalla de 200 ppp; o tal vez solo uso una vieja pantalla de 75 ppp que puede estar en mi escritorio. La imagen será bastante grande, tengo que desplazarme, pero ese es mi problema y: ni siquiera descubrirá qué se usa realmente - el valor de 200 ppp no ​​controló la calidad de la imagen - solo comunicó cómo mostrarla "la derecha manera" si me importa.

Acabo de probar dos copias de una imagen que hice con Photoshop. Sin embargo, configuré uno a 72 dpi y el otro a 720 dpi para ver si alguno de los navegadores que uso los mostraría en diferentes tamaños en la pantalla.

En todos los navegadores, excepto en uno, se veían idénticos, en cuanto a tamaño y calidad. Sin embargo, con el uso de Google Chrome, el que se hizo en 72 se veía bien, pero el que se hizo en 720 era extremadamente pequeño, como si tuviera 1/10 del tamaño.

Caramba. Eso parece un argumento para poner todas las imágenes independientes (no restringidas dentro de una página web) en 72. Prácticamente todas las mías (que se cuentan por cientos) están en 120 ppp. A pesar de que todavía se ven lo suficientemente grandes en Chrome, tal vez con ese navegador en mente debería trabajar para ponerlos todos en 72. Tal vez en algún lugar de la letra pequeña en las preferencias de Chrome haya un remedio.