El mito de DPI
El tamaño de una imagen en el diseño de un sitio web es importante. Desde la alineación adecuada hasta obtener la cantidad justa de espacio en blanco, el tamaño de las fotos y los gráficos de antemano es esencial para crear una apariencia equilibrada.
Las imágenes en la web se miden en píxeles . Sin embargo, muchas personas se toman la molestia de configurar sus imágenes en 72 puntos por pulgada (
El concepto erróneo sobre la resolución en las imágenes digitales destinadas a la web es que deben cumplir con una cierta cantidad de puntos por pulgada.
En impresión, los píxeles por pulgada y los puntos por pulgada afectan el tamaño de una imagen en una página. DPI no se aplica al diseño en la web.
Cuando alguien convierte una imagen a 72 DPI , están agregando un paso adicional sin ningún beneficio. Las páginas web se miden en píxeles, no en unidades del mundo real como pulgadas.
Cuando alguien le pide una imagen web, por ejemplo, de dos pulgadas de ancho, está calculando cómo aparecería en su propio monitor. Sin cambiar las dimensiones de píxeles de la imagen, esa imagen aparecería más grande o más pequeña en diferentes monitores, e incluso se vería diferente en el mismo monitor con una configuración de resolución diferente.
El tamaño de píxel depende del contexto
Un píxel (que es la abreviatura de "elemento de imagen") es la unidad de medida más pequeña en una cuadrícula que muestra una imagen digital. DPI mide qué tan grandes son esos píxeles, o puntos, cuando se imprimen.
La imagen a continuación se muestra en diferentes DPI s.
36 DPI
150 DPI
3,096 DPI
Descárguelo y ábralo en un editor de imágenes para verlo usted mismo. Los tres tienen el mismo aspecto porque fueron redimensionados, no remuestreos.
Cambio de tamaño Cambia los tamaños de los píxeles; Remuestreo Cambia el recuento de píxels
Hay dos formas de agrandar una imagen: agregue más píxeles o amplíe los píxeles. Del mismo modo, puede reducir el tamaño de una imagen al eliminar píxeles o reducir píxeles. Pero encogerse y afeitarse son dos procesos diferentes.
Como se muestra arriba, cambiar el tamaño de una imagen cambia el tamaño de sus píxeles, no el número de píxeles. No estamos aumentando o disminuyendo el número de píxeles, solo cambiando el tamaño de esos píxeles cuando se imprimen. Es una relación inversa: las imágenes con píxeles más grandes tendrán una densidad de píxeles menor (menos píxeles en el mismo número de pulgadas) cuando se impriman.
Como se muestra arriba, el remuestreo cambia el tamaño de la imagen al aumentar o disminuir su número de píxeles. Las imágenes con más píxeles contendrán más información y, a menudo, generarán gráficos más ricos.
El diseño web se preocupa por el remuestreo, no por el cambio de tamaño, ya que cada píxel en una página web siempre tendrá el mismo tamaño. Una página web que mide 800 píxeles de ancho puede acomodar imágenes de hasta 800 píxeles de ancho. Hacer cada píxel más amplio no cambia el hecho de que el diseño solo puede contener 800 de ellos.
No puede hacer que una imagen parezca más grande en la pantalla cambiando el tamaño de sus píxeles, ya que cada píxel en la misma pantalla siempre tendrá el mismo tamaño.
Cambio de tamaño y remuestreo en Photoshop
El cuadro Tamaño de la imagen de Photoshop ( Imagen, Üí Tamaño de la imagen ) controla tanto el cambio de tamaño como el remuestreo de las imágenes.
La casilla de verificación "Volver a muestrear" cambia la cantidad de píxeles que caben en una pulgada lineal, literalmente los píxeles por pulgada. Si desactivamos el remuestreo, la única forma de cambiar el tamaño de la imagen sería ampliar sus píxeles para imprimir.
Con el cuadro de remuestreo sin marcar, cambiar el cuadro de "resolución" alteraría el tamaño físico de la imagen cuando se imprimiera, pero no su número de píxeles. Cuando se imprime, una imagen parece más grande o más pequeña. En una página web, sería del mismo tamaño.
Un experimento
Averiguar si DPI importa en diseños web se puede hacer mediante un pequeño experimento. Si alteramos una imagen de 300 x 100 píxeles a 72 PPP a 300 x 100 píxeles a 144 PPP, ¿cuántos píxeles tendríamos?
- Haga una imagen de 300 píxeles de ancho y 100 píxeles de alto, a 72 DPI .
- Hagamos algunas matemáticas. ¿Cuántos píxeles sería eso?
- Ahora cambie el tamaño de la imagen a 300 x 100 píxeles a 144 DPI .
- Hagamos más matemáticas. ¿Cuántos píxeles es eso?
Las respuestas son:
- 300 x 100 = 30,000
- 300 x 100 sigue siendo 30,000
Píxeles por pulgada en pantalla
La cantidad de píxeles por pulgada sigue siendo relevante en línea, pero la configuración de PPP no afecta la forma en que se muestra una imagen.
Los monitores de computadora se pueden medir físicamente en pulgadas y cada uno muestra una cierta cantidad de píxeles. Por ejemplo, digamos que un monitor de 19 "muestra 1280 x 1024 píxeles. El usuario podría cambiarlo para mostrar 1600 x 1200 píxeles, aumentando así su PPI (es decir, agregando más píxeles en el mismo número de pulgadas). La diferencia importante en la impresión es que puede controlar los píxeles por pulgada de una imagen.
Puedes probar esto en la mayoría de las computadoras modernas. En una Mac, vaya al Menú de Apple, "Preferencias del Sistema" , y luego haga clic en "Pantallas" para ver las distintas resoluciones en las que puede configurar su monitor. Para Windows, haga clic derecho en el escritorio y seleccione "Personalizar" y luego elija "Configuración de pantalla". Cambie la resolución de la pantalla (número de píxeles) y mire a medida que los elementos del escritorio de su Mac o PC crecen o disminuyen.
Obviamente, su monitor no cambia de tamaño. Pero si mantiene una regla en la pantalla, verá que el tamaño de los iconos y las ventanas es inversamente proporcional al número de píxeles que se muestran. Por ejemplo, una computadora portátil de 13 ", un monitor CRT de 17" y un monitor de panel plano de 21 " todos pueden presentar una computadora de escritorio que mide 1024 x 768 píxeles. Más píxeles significan iconos más pequeños; menos píxeles significan iconos más grandes. Más píxeles en el mismo monitor le dan una mayor densidad de píxeles; menos píxeles es menor.
La diferencia se vuelve más notable con otros tipos de pantallas:
- Una cartelera digital que mida 47 x 12 pies podría usar solo 888 x 240 píxeles (alrededor de 1,6 PPI).
- Una pantalla de iPhone hoy mide 2 x 3 pulgadas y tiene 320 x 480 píxeles (alrededor de 160 PPI) .
Un solo archivo PNG que mida 100 x 100 píxeles cabría tanto en el cartel de 888 x 240 como en el iPhone de 320 x 480. Pero parece mucho más grande en la cartelera porque los píxeles de la placa son 100 veces más grandes que los del iPhone (1.6 contra 160).
La siguiente ilustración muestra dos dispositivos con diferentes dimensiones de píxeles.
La misma imagen se muestra en dos pantallas diferentes. Las diferencias en el PPI de cada pantalla hacen que la imagen en la pantalla de la derecha parezca más grande, a pesar de que tiene menos píxeles en general.
Puedes probar esto tú mismo:
- Crea un JPG que mida 960 x 100 píxeles, con cualquier densidad de píxeles.
- Mídalo a mano con una regla.
- Mire la misma imagen en una computadora con un monitor más grande o más pequeño. Por ejemplo, si creó la imagen en una pantalla de 20 ", pruébela en una computadora portátil de 13".
- Imprima la misma cantidad de píxeles con diferentes densidades de píxeles para ver diferentes tamaños en papel.
El resultado es que esta imagen tendrá el mismo número de píxeles pero un ancho diferente en pulgadas. El diseño del sitio web aparecería en diferentes tamaños, a pesar de un código idéntico. (Para un caso extremo, observe toda la página en un iPhone; 960 píxeles se ajustan a tres pulgadas o menos, sin que se modifique el archivo).
Por qué 72 es significativo
Muchos formatos de archivo, incluidos JPG, TIF y PSD, almacenan la configuración de densidad de píxeles de una imagen. Si guarda un JPG a 200 píxeles / pulgada, permanecerá en 200.
Otros formatos, incluidos GIF y PNG, descartan la densidad de píxeles. Si guarda una imagen de 200 DPI como PNG, no guardará ese DPI en absoluto. Muchos editores de imágenes, incluido Adobe Photoshop, suponen que una imagen es 72
Setenta y dos es un número mágico en impresión y tipografía. En 1737 Pierre Fournier usó unidades llamadas ciceros para medir el tipo. Seis ciceros tenían 0.998 pulgadas.
Alrededor de 1770, François-Ambroise Didot usó ciceros un poco más grandes para adaptarse al "pie" francés estándar. La pica de Didot tenía 0.1776 pulgadas de largo y se dividía uniformemente en 12 incrementos. Hoy los llamamos puntos.
En 1886, el American Point System estableció una "pica" de 0.166 pulgadas. Seis de estos son 0.996 pulgadas.
Ninguna de las unidades se alejó de 12 puntos por pica: 6 picas por pulgada = 72 puntos por pulgada. Era un estándar importante en 1984, cuando Apple se preparó para presentar la primera computadora Macintosh. La interfaz de la Mac fue diseñada para ayudar a las personas a relacionar la computadora con el mundo físico. Los ingenieros de software utilizaron la metáfora de un escritorio para describir el funcionamiento arcano de una computadora, hasta los iconos de "papel", "carpeta" y "basura".
Cada píxel en la pantalla original de Mac de 9 pulgadas (diagonal) y 512 x 342 píxeles medía exactamente 1 x 1 punto. Mantenga una regla sobre el cristal, y vería que 72 píxeles realmente llenarían 1 pulgada. De esta forma, si imprimiera una imagen o texto y lo sostuviera al lado de la pantalla, tanto la imagen como la copia dura serían del mismo tamaño.
Pero las primeras imágenes digitales eran torpes y dentadas. A medida que la tecnología de pantalla y la memoria mejoraban, las computadoras podían mostrar más píxeles en el mismo monitor de tamaño. Coincidir con una impresión en la pantalla se hizo aún menos cierto cuando las aplicaciones ráster y vector permitían a los usuarios acercarse y examinar los píxeles de cerca. A mediados de la década de 1990, Microsoft Windows podía cambiar entre 72 y 96 píxeles por pulgada en la pantalla. Esto hizo que los tamaños de fuente más pequeños fueran más legibles porque había más píxeles disponibles por tamaño de punto.
Hoy, tanto los diseñadores como los clientes entienden que los tamaños de los elementos en la pantalla no son absolutos. Las diferencias en el tamaño de la pantalla y la funcionalidad del zoom son comunes. Pero 72 sigue siendo el predeterminado.
PPI de pantalla superior significa mejor legibilidad en tamaños de punto más pequeños
Las pantallas con mayor PPI son excelentes para la legibilidad. Más píxeles por pulgada hacen que las letras sean más fáciles de leer. También significa que las imágenes y el texto deben ser más grandes (en píxeles) para ser legibles.
El ejemplo de texto anterior se ha redimensionado desde dos configuraciones de PPI de pantalla diferentes. La fila superior tiene píxeles más pequeños (es decir, un PPI más alto en la pantalla), por lo que 8 puntos es el tamaño de letra más pequeño y legible. El texto en la fila inferior es apenas legible por debajo de 10 puntos.
A medida que los monitores de PC superaban la densidad de píxeles de los monitores Mac a mediados de la década de 1990, los sitios web creados en Windows se jactaban de tener tamaños de fuente más pequeños, para consternación de los usuarios de Mac. En la actualidad, las pantallas de ambas plataformas disfrutan de una densidad de píxeles lo suficientemente alta como para hacer que las diferencias sean discutibles.
Imágenes elásticas de la web con navegadores modernos
Ahora sabemos que DPI por sí solo no cambia el tamaño de una imagen en la web, y no tenemos control sobre en qué dispositivo se muestra una imagen. Entonces, ¿son las dimensiones de píxeles de una imagen lo único que importa? Sí por ahora.
Los diseños de ancho de fluido, que cambian de acuerdo con el tamaño del navegador, pueden acomodar mejor una gama de dispositivos y monitores. Los navegadores modernos, desde FireFox 3, Safari 3 e Internet Explorer 7 en adelante, son mejores que las versiones anteriores para escalar imágenes sobre la marcha. los max-width La propiedad CSS fuerza que las imágenes se ajusten a su contenedor pero no crezcan más allá de su tamaño real. Por ejemplo:
p { width: 25% } / * Una cuarta parte del área de contenido * / img { max-width: 100% }
p { width: 50% } / * La mitad del área de contenido * / img { max-width: 100% }
p { width: 75% } / * Tres cuartas partes del área de contenido * / img { max-width: 100% }
/ * Sin ancho establecido para el párrafo * / img { max-width: 100% }
Aquí vemos una imagen de 800 píxeles de ancho encajar en cuatro elementos de párrafo de diferentes tamaños. Si el ancho de la página fuera flexible, cambiar el tamaño de la ventana de su navegador expandiría la imagen, pero no más allá de sus dimensiones originales de 800 x 323 píxeles. Nunca se distorsionaría o se "pixelaría" debido a una expansión excesiva.
Preparar imágenes para la web significa planificar en píxeles. Si alguien solicita un gráfico de 2 pulgadas para la web, no para imprimir, pregúnteles: "¿Qué tan grandes son sus píxeles?"
Escrito exclusivamente para WDD por Ben Gremillion . Ben es un diseñador web independiente que resuelve los problemas de comunicación con un mejor diseño.
¿En qué medios cuenta la resolución? ¿Cuál es la mejor forma de clasificar las imágenes en línea? Comparte tus ideas a continuación.