> Manuales > Curso práctico de diseño web

Vemos uno de los tipos de gráficos digitales: los mapas de bits. Conocemos sus particularidades y las características como son las resoluciones y dimensiones, viendo cuáles son las adecuadas para los distintos trabajos.

Existen dos tipos principales de imágenes digitales: los mapas de bits, en los que la imagen se crea mediante una rejilla de puntos de diferentes colores y tonalidades, y los gráficos vectoriales, en los que la imagen se define por medio de diferentes funciones matemáticas.

Las imágenes de mapa de bits (bitmaps o imágenes raster) están formadas por una rejilla de celdas, a cada una de las cuales, denominada píxel (Picture Element, Elemento de Imagen), se le asigna un valor de color y luminancia propios, de tal forma que su agrupación crea la ilusión de una imagen de tono continuo.

Imagen de mapa de bits

Un píxel es pues una unidad de información, pero no una unidad de medida, ya que no se corresponde con un tamaño concreto. Un píxel puede ser muy pequeño (0.1 milímetros) o muy grande (1 metro).

Dos rejillas de 5x5 píxeles

Una imagen de mapa de bits es creada mediante una rejilla de píxeles única. Cuando se modifica su tamaño, se modifican grupos de píxeles, no los objetos o figuras que contiene, por lo que estos suelen deformarse o perder alguno de los píxeles que los definen. Por lo tanto, una imagen de mapa de bits está diseñada para un tamaño determinado, perdiendo calidad si se modifican sus dimensiones, dependiendo esta pérdida de la resolución a la que se ha definido la imagen.

Los gráficos de mapa de bits se obtienen normalmente a partir de capturas de originales en papel utilizando escáneres, mediante cámaras digitales o directamente en programas gráficos. También existen multitud de sitios en Internet que ofrecen imágenes de este tipo de forma gratuita o por una cantidad variable de dinero.

Resolución de una imagen de mapa de bits

La resolución de una imagen es el un concepto que suele confundir bastante, principalmente porque no es un concepto único, sino que depende del medio en el que la imagen vaya a ser visualizada o tratada. Así, podemos hablar de resolución de un archivo digital, resolución de impresión, resolución de semitono, resolución de escaneado, etc.

Tal vez el concepto más ligado a la propia naturaleza de la imagen digital sea el de resolución del archivo digital, definida como el número de píxeles distintos que tiene una imagen por unidad de longitud, es decir, la densidad de éstos en la imagen. Sus unidades de medida son los píxeles por pulgada (ppp o ppi, pixels per inch, en inglés) o los píxeles por centímetro (más raramente). Cuanto mayor sea esta resolución, más contenedores de información (píxeles) tiene el fichero digital, más calidad tendrá la imagen y más peso en Kb tendrá el fichero.

Resoluciones de un archivo digital

Esta resolución está muy ligada al concepto de resolución de pantalla en un monitor, referida al número de píxeles por pulgada existentes en la pantalla del monitor en el que se visualiza la imagen. Una configuración del monitor en alta resolución exhibirá más píxeles por pulgada, por lo que éstos serán más pequeños, permitiendo una mejor visualización de la imagen en pantalla. En ningún caso podremos visualizar una imagen a mayor resolución que la de pantalla, que suele ser de 72 ppp en un sistema Mac y de 96 ppp en un PC.

Resoluciones de pantalla

Una vez definida la resolución de pantalla, el tamaño de los píxeles dependerá del tamaño físico de la pantalla, medido en pulgadas. Las resoluciones de pantalla más comunes en la actualidad son 800x600 y 1024x768 píxeles, oscilando los tamaños de pantalla entre 15 y 21 pulgadas.

En el trabajo de digitalización de imágenes con escáner se maneja el concepto de resolución de muestreo, que define el número de muestras que se toman por pulgada. Su unidad de medida son las muestras por pulgada (spi, samples per inch). Cuanto más muestras por pulgada tenga una imagen escaneada, más cercana estará la imagen digital a la imagen original. Este forma de medir la resolución se utiliza poco, habiéndose adoptado como medida de calidad de un imagen escaneada los píxeles por pulgada que tiene la imagen digital resultante del proceso.

Resolución de muestreo

En trabajos con imágenes destinadas a la impresión se maneja el concepto de resolución de impresión, que se refiere a la capacidad máxima de discriminación que tiene una máquina de impresión, es decir, los puntos de tinta o toner que puede colocar una impresora u otro dispositivo de impresión dentro de una pulgada para imprimir la imagen. Su unidad de medida son los puntos por pulgada lineal (dpi, doths per inch). En general, cuantos más puntos, mejor calidad tendrá la imagen impresa.

Resoluciones de impresión

Por último, en el entorno de la imprenta se suele utilizar el concepto de resolución de trama o semitono, definida como la capacidad máxima de imprimir una trama con diferentes tonos de gris (hasta un máximo de 256). También conocida con el nombre de lineatura (linescreen) o frecuencia de línea, su unidad de medida son las líneas por pulgada (lpi). La resolución de trama está relacionada con la capacidad de reproducir las imágenes simulando sus tonos continuos por medio de líneas de puntos de semitono, y se obtiene fácilmente dividiendo la resolución máxima de impresión de la máquina en cuestión por el número de tonos que se quieren obtener.

Resoluciones de trama

Una forma común de clasificar las imágenes según su resolución es aquella que las divide en imágenes de alta resolución (hi-res) e imágenes de baja resolución (low-res). Una imagen de alta resolución está prevista para la impresión, teniendo generalmente 300 ppp o más. Una imagen de baja resolución está prevista solamente para su exhibición en pantalla, teniendo generalmente una resolución de 100 ppp o menos.

Resolución de una imagen

A mayor resolución, más píxeles hay en una imagen, más grande es su mapa de bits, mayor información contiene y mayor capacidad de distinguir los detalles espaciales finos, por lo que tendrá más definición, permitiendo un mayor detalle, unas transiciones de color más sutiles y una mayor calidad de reproducción.

Las imágenes de mapas de bits dependen de la resolución a la que han sido creadas, por lo que al modificar su tamaño pierden calidad visual. Si lo disminuimos, los trazos finos perderán definición, desapareciendo partes de los mismos, mientras que si lo aumentamos, la imagen se pixelizará, al tener que cubrirse de forma aproximada píxeles que inicialmente no existían, produciéndose el conocido efecto de dientes de sierra.

Cambio de tamaño en un mapa de bits

La resolución de una imagen está relacionada con su tamaño, de tal forma que cuando le asignemos una resolución estaremos asignando un tamaño a los píxeles que la forman, con lo que sabremos qué tamaño tiene la imagen. Por ejemplo, si una imagen tiene 100 píxeles por pulgada, querrá decir que cada 2,54 cm. habrá 100 píxeles, con lo que cada píxel equivaldrá a 2,54 mm. Si dijéramos que esa imagen tiene una resolución de 1 píxel por pulgada, lo que sabríamos es que ahora cada píxel tendrá un tamaño de 2,54 cm.

Otra consecuencia de la relación resolución-tamaño es que para mantener la calidad de reproducción, al variar el tamaño de una imagen tamaño, tendremos que variar también su resolución. En líneas generales, si queremos que mantenga el mismo nivel de calidad hay que mantener la cantidad de información que posee la imagen (número de bits que ocupa) cuando modificamos sus dimensiones.

Elección de la resolución

La resolución de una imagen no debe ser nunca mayor que la del medio en el que se va a publicar, pues supondría un exceso de información que no va a ser utilizada. Si representamos en un gráfico la relación calidad imagen-resolución para un medio de publicación determinado, llega un punto en que por mucho que aumentemos la resolución, la calidad no aumentará, pero sí el peso del fichero y los recursos necesarios.

Relación calidad-resolución

Las imágenes de alta resolución reproducen generalmente más detalle y transiciones más sutiles del color que imágenes de baja resolución. Sin embargo, el aumento de la resolución de una imagen baja resolución separa solamente la información original en un mayor número de píeles, pero raramente mejora la calidad de la imagen.

Los diferentes medios utilizan diferentes resoluciones, siendo las más comunes las siguientes:

Medio Resolución de trabajo
Pantalla de ordenador 72 ppp
Prensa (periodicos, revistas, etc.) Normalmente, 90 ppp, aunque puede subir a 300 ppp en impresión offset
Impresora Diferentes resoluciones, generalmente entre 300 ppp y 600 ppp (impresoras laser)
Fotografía Suele emplear imágenes de 800-1500 dpp y mayores
Imprenta Es necesario saber la lineatura de impresión, pues la resolución de una imagen se corresponde con la lineatura de impresión en una escala de 2:1 (para imprimir a 150 lpp, deberemos trabajar las imágenes al doble, 300 ppp. En fotocomponedoras para impresión se suele trabajar a 1200 ppp

Si estamos trabajando con imágenes destinadas a la impresión, los ficheros gráficos grandes, con mucha resolución y/o tamaño, tardan más en ser procesados por el RIP (Raster Image Processor), el procesador de imágenes de un aparato postscript. Cualquier ahorro sensato de tamaño es algo que redundará en trabajos manejables y menos dados a causar problemas y retrasos.

Además, la lineatura no es algo que podamos elegir al azar. Aunque las cámaras digitales o las filmadoras sean capaces de llegar a resoluciones muy altas, el limite de trabajo lo va a marcar el medio en el que vayamos a imprimir, el método que vayamos a usar para ello y el dinero que estemos dispuestos a pagar por ello.

Si la imagen está destinada a ser impresa en una impresora de inyección de tinta, habrá que digitalizar la imagen a una resolución de 300 ppp para que la definición final sea correcta, ya que ésta es la resolución máxima que suelen dar estos dispositivos.

Si una imagen está destinada a ser visualizada en un monitor de ordenador, hay que tener en cuenta que la resolución de estos periféricos es de 72 ppp en los aparatos Macintosh y 96 píxeles por pulgada en los PCs con sistemas Windows, por lo que habrá que digitalizarla a estas resoluciones. Si le damos mayor resolución estaremos desperdiciando recursos, sobre todo si la imagen está destinada a la web, ya que tardará mucho más en bajarse desde el servidor sin conseguir ninguna ventaja visual con ello.

Resoluciones para pantalla

Resumiendo: Hay que trabajar siempre en unos niveles de resolución adecuados al medio en el que se va a usar la imagen. Resoluciones mayores necesitarán unos recursos excesivos que no son aprovechables.

En el extremo contrario, resoluciones menores que las del medio suelen producir una mala visualización o impresión, presentando las imágenes el conocido efecto de pixelización o dientes de sierra.

Dimensiones de una imagen mapa de bits

Puesto que la resolución de una imagen se mide en pulgadas o centímetros, parecería lógico pensar que estas mismas unidades se utilizaran para definir las dimensiones de una imagen.

El principal inconveniente de obrar así es que estas unidades expresan valores de medida absolutos, mientras que los dispositivos de salida suelen trabajar en dimensiones relativas (píxeles o puntos de impresión). Por ejemplo, los monitores trabajan en píxeles, adaptando las dimensiones de los objetos que presenta a la resolución de pantalla usada, por lo que una imagen se visualizará más pequeña cuanto mayor sea la resolución.

Dimensiones de una imagen-resolución de pantalla

Además, si se utilizan centímetros o pulgadas será necesario también conocer también la resolución de la imagen, medida en píxeles por unidad de longitud, para saber la información gráfica que contiene.

Es conveniente entonces utilizar como unidades de medida de las dimensiones de una imagen bien los píxeles de pantalla, si está destinada a mostrarse en un monitor, bien los puntos de impresión, si está destinada a la imprenta o impresora.

El espacio relativo de pantalla ocupado por una imagen de dimensiones 150x100 píxeles será el mismo sea cual sea la resolución, con la única diferencia de que cuanto menor sea ésta, más grande será su tamaño absoluto en pulgadas o centímetros, al ser de mayor tamaño los píxeles.

No olvidemos que la resolución útil de una imagen nunca es mayor que la del medio en el que se visualiza. Una imagen escaneada a 200 ppp se visualizará en un monitor de PC con la configuración por defecto a 96 ppp, desperdiciándose el resto de información sobre los valores de los píxeles de la imagen, mientras que una imagen escaneada a 50 ppp se visualizará igualmente a 96 ppp en la pantalla del monitor, aunque en este caso su calidad será escasa, al no contener los píxeles suficiente información gráfica.

Resumiendo, sea cual sea el tamaño de los píxeles o puntos de una imagen, una vez presentados en un medio dado su tamaño se adaptará al de los píxeles éste, por lo que esta unidad de medida resulta la más conveniente en todos los casos.

Una consideración importante: las dimensiones de una imagen en pantalla no suelen coincidir con las dimensiones de la imagen impresa, ya que, mientras en la resolución de pantalla permanece constante, la resolución propia de la imagen varía al cambiar el tamaño de ésta, y viceversa, según las siguientes reglas:

Por lo tanto, si queremos aumentar las dimensiones de una imagen en un programa como Photoshop sin perder calidad, lo mejor es trabajar con la imagen en una alta resolución (sobre dos veces la resolución final deseada). Entonces, disminuiremos la resolución o aumentaremos la anchura y la altura (ambas acciones producirán resultados similares). Una vez que las dimensiones de la imagen sean las deseadas podremos disminuir la resolución al valor deseado.

Por otra parte, el tamaño de visualización de una imagen en pantalla es a menudo diferente de su tamaño impreso. Los píxeles de la imagen se traducen directamente a píxeles del monitor, por lo que cuando la resolución de la imagen es más alta que la resolución del monitor aparece la imagen en pantalla más grande que sus dimensiones especificadas para la impresión.

Por ejemplo, una imagen de 1 x 1 pulgadas a una resolución de 144 ppp ocupará en una pantalla de resolución 72 ppp un área de 2 x 2 pulgadas, ya que como el monitor puede exhibir solamente 72 píxeles por pulgada, necesita 2 pulgadas para mostrar los 144 píxeles de la imagen.

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabill...

Manual