LABORATORIO Nº 1

En el manejo de las imágenes digitales de dos dimensiones, podemos encontrar dos tipos
principales de gráficos: vectoriales y de mapas de bits. Los gráficos vectoriales se componen de
formas geométricas generadas matemáticamente, como líneas, curvas y polígonos. En cambio los
gráficos de mapas de bits, también conocidos como gráficos raster, se componen de cuadrados
diminutos denominados píxeles; siendo el píxel la abreviatura de picture element (elemento de
imagen). Este conjunto de píxeles, unidad mínima en que se divide la imagen, se distribuyen en una
cuadrícula rectangular que conforman la imagen de la pantalla. Las imágenes de mapa de bits se
definen mediante la altura y la anchura de la imagen, medidas en píxeles, y el número de bits que
contiene cada píxel, que representa el número de colores que un píxel puede mostrar.

Figura Nº 1

La calidad de una imagen de mapa de bits viene dada por la combinación de su resolución y
su número de bits de profundidad del color. Al hablar de resolución se debe considerar que
podemos referirnos a dos tipos de expresión de lo mismo: resolución por tamaño y resolución por
densidad. La resolución por tamaño hace referencia al número de píxeles que contiene una imagen.
A mayor número de píxeles, mayor resolución y mayor nitidez de la imagen. La resolución por
densidad indica la cantidad de píxeles que hay en una determinada medida de longitud (ejemplo:
pulgada, cm, etc). Las unidades típicas son pixeles per inch (ppi), pixeles por pulgada (ppp) o
pixeles por cm.
La profundidad del color indica la cantidad de información o colores que puede contener un
píxel, dependiendo del número de bits o bytes para guardar los datos del píxel. El color puede
componerse a partir de otros colores llamados básicos, el modelo cromático utilizado en monitores
CRT ("Cathodic Ray Tube") o pantallas LCD ("Liquid Crystal Display") es aditivo para representar
el color. El sistema aditivo consiste en partir del negro (ausencia de luz), e ir añadiendo mayor o
menor cantidad de luz de tres colores básicos, a partir de los cuales se consigue cualquier otro color,

1
incluyendo la luz blanca (cuando los tres colores básicos se mezclan en igual proporción). Este
método se denomina sistema aditivo, porque los colores se obtienen "añadiendo" luces al negro.
Los colores básicos necesarios son rojo, verde y azul (RGB). En consecuencia, los programas de
edición gráfica, e incluso los lenguajes de programación representen los colores en función de sus
componentes o colores básicos RGB. Por ejemplo, el lenguaje HTML de programación de páginas
Web utiliza una representación hexadecimal COLOR="#AA16CC" para representar los valores de
rojo, verde y azul. En esta representación los dos primeros caracteres representan el rojo, los dos
centrales el verde y los dos últimos el azul. Los valores oscilan entre 00 (decimal 0) para ausencia
de luz de ese color a FF (decimal 255) que representa la máxima intensidad de componente. Como
puede adivinarse fácilmente, los colores puros se representan respectivamente mediante "#FF0000"
para el rojo, "#00FF00" para el verde y "#0000FF" para el azul. También habrá percibido que la
combinación "#FFFFFF" representa el blanco, y que "#000000" representa el negro (ausencia de
color). Dentro de las profundidades de color más comúnmente empleadas están las de:

1 bit: El sistema monocromo es el más simple de todos. Si un sistema utilizara 1 bit de

profundidad de color, se permitirían solo dos posibilidades 0 y 1 (activo / inactivo) para cada
píxel. Los primitivos sistemas de video utilizaban éste sistema en el que cada píxel de pantalla
solo puede estar encendido o apagado.

Figura Nº 2

4 bits: Los sistemas que utilizan 4 bits de profundidad de color pueden representar hasta 16 (24)
colores, pudiendo ser colores o tonos de grises. Se denominan de color indexado o de paleta,
porque suelen utilizar una tabla de conversión para convertir los 4 bits en tres valores
RGB. Esta profundidad de color fue utilizada en los adaptadores de video CGA ("Color
Graphic Adapter") que podían montarse como opción "avanzada" en los primitivos IBM-PC.

2
 Figura Nº 3

Figura Nº 4

8 bits: Los sistemas que utilizan 8 bits de profundidad de color pueden representar hasta 256
(28) colores. Se denominan de color indexado o de paleta, porque suelen utilizar una tabla de
conversión para convertir este byte en tres valores RGB. De esta forma se utilizan al máximo
las 256 posibilidades, ya que no es posible repartir equitativamente los 8 bits entre los tres
canales de color. En esta posibilidad si los 256 son tonos de gris tenemos la imagen en escala de
grises.

16 bits: Los sistema que utilizan 16 bits de profundidad de color pueden representar hasta
65.536 (216) colores, también se lo denomina hicolor o color de alta densidad. Como 16 no es
divisible entre los tres canales de color, se utilizan dos codificaciones distintas o tabla de
conversión. La ventaja de la codificación hicolor frente al sistema de color real es que en vez de
3, utiliza solo 2 bytes para cada punto de la imagen, lo que significa un 33% menos de memoria
y por tanto, mayor rapidez en su manipulación. Por supuesto la calidad de la imagen es menor
que en el caso anterior.

3

24 bits: Los sistemas que utilizan 24bits (8 bits por canal de color RGB) de profundidad de
color pueden representar hasta 16.777.216 (224) colores. Se denominan de color de 24-bits o
color real ("Truecolor"). El nombre se debe a que prácticamente no impone restricciones al
número de colores que pueden representarse, ya que 16 millones de colores es más de lo que
pede discriminar el ojo humano. En los sistemas truecolor es frecuente representar las ternas
numéricas en hexadecimal. En este caso bastan dos dígitos 00h - FFh para representar los 256
valores (0 - 255) de cada canal.

32 bits: Existe una versión de color verdadero que utiliza 32 bits de profundidad de color
denominado color verdadero de 32 bits. En este caso los 8 bits restantes se utilizan para el canal
alfa, que indica la transparencia de cada elemento de la matriz-imagen. Esta información sobre
"transparencia" es en realidad una máscara o tabla de conversión que señala cual es el color
resultante cuando exista superposición de píxeles en un mismo punto.

Figura Nº 5

Cualquiera que sea el sistema de codificación y profundidad de color utilizada, la

reproducción supone establecer una correspondencia entre los colores de los píxeles originales y la
gama de colores posibles en el dispositivo de reproducción. En ciertos casos los colores de los
píxeles se almacenan por medio de un valor C, a estos valores de color posibles los denominamos
paleta o mapa de color de la imagen.

Figura Nº 6

4
 La matriz imagen almacenada en el archivo contiene el valor digitalizado C del color de
cada píxel. En ocasiones el valor C digitalizado no contiene directamente los valores RGB de cada
color; y se utiliza una tabla de conversión CLUT almacenada en memoria que contiene la
correspondencia entre cada valor C del color digitalizado y la terna de componentes RGB. Dichas
señales digitales (RGB) se entregan a un conversor analógico-digital (DAC), que las traduce en las
señales analógicas de tensión Er, Eg, y Eb que serán entregadas al monitor.
Dentro de los archivos de imágenes de tipo bitmap más usados y conocidos, vamos a
analizar el mapa de bits con formato .BMP. El formato BMP es uno de los más simples y fue
desarrollado por Microsoft e IBM en forma conjunta. Es un archivo de imagen de gráficos, con
píxeles almacenados en forma de tabla de puntos que administra los colores como colores reales o
usando una paleta indexada. La estructura de este mapa de bits es la siguiente:

Encabezado del archivo; El encabezado del archivo proporciona información acerca del tipo
de archivo (mapa de bits) y su tamaño, así como también indica dónde comienza realmente la
información de la imagen. Este posee un tamaño de 14 bytes.

Encabezado de información del mapa de bits; El encabezado de información del mapa de
bits proporciona información acerca de la imagen, en especial las dimensiones y los colores.
Este posee un tamaño de 40 bytes.

Paleta de imágenes; La paleta es opcional. Cuando se define la paleta, ésta contiene 4 bytes de
forma sucesiva para cada una de las entradas, que representan: la componente azul (en un byte),
la componente verde (en un byte), la componente rojo (en un byte) y un campo reservado (en
un byte) con valor hexadecimal 00.

Codificación de imágenes; La codificación de imágenes se realiza escribiendo en forma
sucesiva los bits que corresponden a cada píxel, línea por línea. Las imágenes de 2 colores usan
1 bit por píxel, lo que significa que un byte permite codificar 8 píxeles. Las imágenes de 16
colores usan 4 bits por píxel, lo que significa que un byte permite codificar 2 píxeles. Las
imágenes de 256 colores usan 8 bits por píxel, lo que significa que se necesita un byte para
codificar cada píxel. Las imágenes de colores reales usan 24 bits por píxel, lo que significa que
se necesitan 3 bytes para codificar cada píxel, respetando la alternancia del orden de los colores
para el azul, el verde y el rojo. Cada línea de la imagen debe comprender un número total de
bytes que sea múltiplo de 4; si este esquema no se cumple, la línea se debe completar con todos
los 0 necesarios para respetar el criterio.

EJERCICIOS
1- ¿Cuánta memoria de video se requiere para guardar una pantalla completa en los siguientes
casos?
a) Gráfica de 640 x 480 pixels, monocromática.
b) Gráfica de 640 x 480 pixels con 16 colores.
c) Gráfica de 1024 x 768 pixels con 256 colores.
d) Gráfica de 1024 x 768 pixels color real.

2- ¿Cuánta memoria ocupa un archivo de imagen formato BMP para guardar una pantalla
completa en los siguientes casos? Tenga en cuenta el encabezado y su paleta de colores
además de los píxeles.
a) Gráfica de 640 x 480 pixels, monocromática.
b) Gráfica de 640 x 480 pixels con 16 colores.
c) Gráfica de 1024 x 768 pixels con 256 colores.
d) Gráfica de 1024 x 768 pixels color real.

5
3- La siguiente tabla muestra el encabezado del archivo y el encabezado de información del
mapa de bits .BMP. Coloque en la columna “valor hexadecimal” el valor correspondiente a
una imagen .BMP de 24 bits de profundidad de color y de 40 píxeles x 40 píxeles.

Valor
Byte Definición
Hexadecimal
0y1 Identificación del BMP con la letra “B” y “M”
2; 3; 4 y 5 El tamaño total del archivo en bytes
6; 7; 8 y 9 Un campo reservado (4 bytes) 00 00 00 00
El desajuste de la imagen en bytes (4 bytes), es decir, la ubicación
10; 11, 12 y 13 del comienzo de la información de la imagen en relación con el
comienzo del archivo
El tamaño del encabezado de información del mapa de bits en
14; 15; 16 y 17 28 00 00 00
bytes (4 bytes).
El ancho de la imagen (4 bytes), es decir, el número de píxeles
18; 19; 20 y 21
contados de forma horizontal
La altura de la imagen (4 bytes), es decir, el número de píxeles
22; 23; 24 y 25
contados de forma vertical
26 y 27 El número de planos (2 bytes). Este valor es 1 01 00
28 y 29 La profundidad del color (2 bytes)
30;31; 32 y 33 El método de compresión (4 bytes). Sin compresión vale 0 00 00 00 00
El tamaño de la estructura imagen en bytes (4 bytes, píxeles +
34; 35; 36 y 37
mapa de color si tiene)
La resolución horizontal (4 bytes), es decir, el número de píxeles
38;39; 40 y 41
por metro para nosotros 72 ppp o 2834 ppm
La resolución vertical (4 bytes), es decir, el número de píxeles por
42;43; 44 y 45
metro para nosotros 72 ppp o 2834 ppm
46; 47; 48 y 49 El número de colores de la paleta (4 bytes). Valor 0 para 24bits 00 00 00 00
El número de colores importantes de la paleta (4 bytes). Valor 0
50; 41; 52 y 53 00 00 00 00
para 24bits

4- Utilizando cualquier editor hexadecimal, abra un nuevo archivo y guárdelo como

“nombre”.bmp. A continuación ingrese los valores de la tabla anterior en orden,
acomodando los bytes de izquierda a derecha y de arriba hacia abajo. Una vez ingresada la
cabecera completa del bitmap BMP, asigne el color verde a los 20 primeros píxeles y el
color rojo a los 20 últimos píxeles. Guarde el archivo de imagen y véalo por algún visor de
imagen, ¿Dónde se ubican los primeros píxeles de la imagen? ¿En la parte superior o
inferior?¿En la izquierda o derecha? ¿Y los últimos píxeles? Recuerde que nuestra imagen
es de 40 x 40 píxeles

5- Utilizando cualquier editor hexadecimal, abra un nuevo archivo y guárdelo como

“trescifras.bmp”. A continuación ingrese los valores de la tabla anterior en orden,
acomodando los bytes de izquierda a derecha y de arriba hacia abajo. Una vez ingresada la
cabecera completa del bitmap BMP, escriba los tres últimos dígitos de su número de
alumno en color amarillo sobre fondo negro. Recuerde que nuestra imagen es de 40 x 40
píxeles.

6- Ahora bajo el entorno Matlab:

• use el comando imread para almacenar el archivo “trescifras.bmp” en la variable

“imagen1” del espacio de trabajo (worksapce). ¿Qué dimensiones posee la
variable “imagen1”?

6
• Descomponga dicha variable en tres matrices de dos dimensiones (filas, columnas)
denominadas “plano1”, “plano2” y “plano3”. Y visualice cada variable con el comando
imshow. ¿Qué información guarda cada plano?
• Guarde cada plano en un archivo con el comando imwrite y save. Si los observa con el
editor hexadecimal ¿Qué diferencias encuentra?
• Manipule las matrices “plano1”, “plano2” y “plano3” para construir una matriz
“imagen2” de tres dimensiones tal que al visualizarla con imshow muestre la imagen de
40X40 pixeles dividida en tres bandas verticales de color rojo, verde y azul.
• Almacena la variable “imagen2” en un archivo de imagen con imwrite bajo el nombre
“banda.bmp”