He estado diseñando banners web durante más de un año, pero nunca consideré el DPI.
Estaba usando el 72DPI predeterminado, pero ahora quiero saber si es necesario crear diseños web en 72DPI. ¿Qué pasa si usamos más que eso, por ejemplo 200 DPI?
Sé que más DPI significa más calidad de imagen y es por eso que quiero usar un DPI alto, pero recientemente leí en alguna parte que para los banners web deberíamos usar 72DPI. Solo quiero saber si es obligatorio y ¿afecta negativamente en algún aspecto?
Respuestas:
La configuración de PPI (píxeles por pulgada) no se usa en imágenes web. Las imágenes en la web, pantallas de retina o de otra manera, se muestran por sus dimensiones de píxeles (ancho y alto), no por ninguna configuración PPI / DPI. De hecho, muchas imágenes web como png, gif, jpg pueden ni siquiera almacenar una configuración de ppi en sus datos internos y depender 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 la configuración PPI / DPI.
Esta es la razón por la cual las imágenes para pantallas retina se guardan en un tamaño de 2x, en lugar de una configuración de ppi aumentada. La densidad de píxeles de las pantallas de retina es mayor, sin embargo, todavía muestran la imagen en cualquier estado de la pantalla que tenga el ancho y la altura de una imagen que no esté basada en ninguna configuración de PPI.
En realidad, un monitor con una densidad de píxeles de 72ppi no se ha visto desde principios hasta mediados de la década de 1980. 72ppi no ha sido exacto durante casi 30 años. De hecho, nunca fue preciso para los sistemas Windows, ya que Windows usa un valor predeterminado de 96ppi para la densidad de píxeles.
No me creas Pruébalo por ti 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 para la web ... ¿son diferentes en un navegador web? No. Ambas son imágenes de 100 px por 100 px todavía.
La configuración de DPI (puntos por pulgada) solo se aplica al imprimir una imagen. DPI no tiene relación con las imágenes destinadas a la pantalla. DPI se refiere a la cantidad de puntos / manchas de tinta que la prensa colocará dentro de una pulgada. Dado que ninguna pantalla en la Tierra usa tinta, DPI es un término incorrecto para cualquier cosa relacionada con pantallas de visualización.
Tenga en cuenta que algunos fabricantes de dispositivos móviles optaron por usar el término DPIx o xDPI, que a veces se acorta a simplemente DPI. Esta no es la forma tradicional del acrónimo y el fabricante simplemente ha enturbiado las aguas. Si ve DPI en relación con las resoluciones de pantalla móvil, están hablando de PPI efectivo y no están realmente haciendo referencia a puntos por pulgada. Un acrónimo más apropiado habría sido xPPI o PPIx porque las pantallas móviles, como todas las pantallas, usan píxeles y no tinta.
No hace ninguna diferencia qué configuración de ppi usa para las imágenes web. Es importante el ancho (píxel) y la altura (píxel) de una imagen.
Cuando se trabaja con varias imágenes, es importante mantenerse constante. Querrá que todas sus imágenes se configuren 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 ppi, pero todas las imágenes deben configurarse de la misma manera.
Si bien PPI definitivamente no importa: las dimensiones de píxeles son importantes 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 escalan estilos de capa: arrastrar una capa desde un documento de iPhone Retina 326PPI a un documento de iPad Retina 264PPI significará que todos los estilos de capa se escalarán en un 20% (luego redondeado al entero más cercano). Y eso probablemente no sea lo que quieres. Además, la Vista previa de OS X mostrará imágenes de 72PPI en el tamaño exacto, sin importar cómo lo haya configurado.
Píxeles por pulgada es 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 imagen, desactive Cambiar tamaño de imagen y escriba la densidad de píxeles deseada.
Voy a entrar en detalles de lo que realmente significa "ppp", por ejemplo; con eso, puede ver la respuesta usted mismo. :
En resumen, su imagen consta de puntos de color, uno al lado del otro. Pero no tienen tamaño en ningún sentido físico.
Ahora, cuando muestra una imagen en una pantalla, normalmente colocará los colores de puntos de la imagen en la trama de rectángulos de colores que puede mostrar su pantalla. 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, que muestran 100 de nuestros puntos por pulgada.
Es decir, nuestra imagen tiene 100 ppp en la pantalla.
¡Pero ni siquiera miramos el valor de dpi en nuestro archivo de imagen!
Ahora, si miramos nuestro archivo, ¡puede decir que la imagen es de 200 ppp! El valor de ppp es aproximadamente cuántos puntos de color son visibles por pulgada de ancho o alto de 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 importaba eso, porque solo lo mostramos y medimos el dpi físico real de la representación de la imagen en la pantalla.
Entonces, como puede ver, la promesa era simplemente errónea . ¡Y a nadie le importa! Porque simplemente no es relevante.
El archivo fue prometedor, al decir 200 ppp, tendrá "2.5 pulgadas de ancho cuando se muestra". Luego, utilizamos una pantalla que mostraba un ancho de 5 pulgadas, podemos saberlo porque sabemos cuál es la pantalla real.
Normalmente, ni siquiera sabemos qué utilizará el usuario final como pantalla, por lo que podemos adivinar de todos modos,
Entonces, ahora tiene sentido:
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 real de dpi al crear un archivo de imagen.
Vea también mi respuesta en ¿Qué es exactamente un "Pixel"? .
Directamente a la pregunta, basada en lo anterior:
Cuando especifica ppp en un archivo de imagen, eso no reacciona directamente a 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ás lo que realmente se usa: el valor de 200 ppp no controlaba la calidad de la imagen , solo comunicaba cómo mostrarla "a la derecha camino "si me importa.
Acabo de probar dos copias de una imagen que hice con Photoshop. Sin embargo, configuré uno a 72 ppp y el otro a 720 ppp para ver si alguno de los navegadores que utilizo mostraría 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 hecho en 72 se veía bien, pero el hecho en 720 era extremadamente pequeño, como si fuera 1/10 del tamaño.
Caramba. 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 a 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 a todos en 72. Tal vez en algún lugar de la letra pequeña en las preferencias de Chrome haya un remedio.