Title: Imagen digital
Course: Ciencias de la computación 1º Bachillerato > Section: Imagen digital

PIXEL

Las imágenes digitales se crean formando una retícula rectangular formada por celdillas. Cada una de las celdillas recibe el nombre de píxel. Este nombre proviene de la expresión picture y element. Los píxeles son las unidades que componen la imagen. Un píxel no tiene una medida concreta, no se puede decir si mide 1 mm. o 1 cm. o 1 m., simplemente es la medida de división de una retícula en celdillas. En la pantalla los píxeles son bastante pequeños, si miras con una lupa, los podrás observar. En las impresiones sobre papel, los píxeles suelen ser más pequeños. Necesitas una lupa más potente para distinguirlos.

Pixel pregunta1

Cuando se dice que una cámara tiene 5Mpx, ¿a qué se refiere?

- A que tiene una memoria de 5 megas
Feedback: Mal
- A que las imágenes que crea tendrán un máximo de 5 millones de pixeles
Feedback: Bien. Mpx significa Mega (millones) de pixeles
- A que puede almacenar cincomil fotos
Feedback: Mal
- A que la pantalla de la cámara tiene cincomil puntos
Feedback: Mal

Pixeles 2

En una máquina de fotos digital., si aumenta la cantidad de pixeles...

- Bien
- Mal
- la calidad....
Feedback: aumenta
- el numero de fotos que se puede almacenar....
Feedback: disminuye
- la calidad del color...
Feedback: no afecta
- La calidad de la imagen vista en el visor
Feedback: no afecta

cantidad de pixeles

¿Cuántos pixeles tiene una pantalla de ordenador de 1024x840?

- 860160
Feedback: Bien

pixeles 3

¿Dónde se ve mejor una imagen de 5Mpx, en una pantalla de  1024x840 o en una de 840x600?

- En la de 1024x840
Feedback: Bien
- En la de 840x600
Feedback: Mal
- En las dos igual
Feedback: Mal

Pixeles 4

¿Que imagen se ve mejor en una pantalla de 1024x840 pixeles, una de 5Mpx o una de 10Mpx?

- Las dos igual
Feedback: Bien. Por grande que sea la imagen, la visualización depende de la pantalla, y esa pantalla tiene menos pixeles que las imágenes. La imagen de 10Mpx ocupa el doble que la de 5Mpx, pero en esa pantalla se ven igual. Sin embargo, la de 10Mpx se puede ampliar más que la de 5Mpx
- La de 10Mpx
Feedback: Mal
- La de 5Mpx
Feedback: Mal

Profundidad de color

Una imagen digital está formada por una matriz de píxeles (a x b x c), donde a y b representan anchura y altura y c es la profundidad de color o profundidad de bit, podríamos decir que es la tercera dimensión de la matriz, la que permite que cada píxel pueda tener un número determinado de colores distintos.

La profundidad de píxel es una unidad de medida binaria porque cada píxel está formado por bits. Cuando decimos que la profundidad de píxel es de 1 bit, la imagen solamente tiene dos colores o dos niveles de gris representados por los valores 0 y 1. Una profundidad de píxel de 8 bits permite que cada pixel pueda tener 256 colores distintos o 256 niveles distintos de grises que provienen de combinar las series de ocho elementos posibles obtenidas de combinar ceros y unos. Si la profundidad del píxel es de 24 bits podemos llegar a 16 millones de colores distintos en cada píxel.

El número de bits por píxel determinará la gama de colores de una imagen, según lo expresado en la siguiente tabla.

1bit | 2 colores |
2 bits | 4 colores |
3 bits | 8 colores |
4 bits | 16 colores |
5 bits | 32 colores |
8 bits | 256 colores |
24 bits | 16 millones de colores |

Profundidad de color 2

Color real

Cada píxel solamente puede ser de un color, cuando decimos que una imagen es de 256 colores, queremos decir que cada píxel puede tomar uno de esos 256 colores.

Si la profundidad es de 24 bits, tenemos la posibilidad de manejar millones de colores con la combinación de los tres primarios: rojo (red), verde (green) y azul (blue), es el llamado modo RGB. Cada canal de color tiene 8 bits para controlar cada color, por lo tanto, los colores que podemos obtener son 256 x 256 x 256 = 16.777.216, por eso se llama "millones de colores" y se conoce como color real. Con esta cantidad de colores es suficiente para que el ojo humano perciba las imágenes con calidad fotográfica.

Color indexado

Otra posibilidad consiste en tener una paleta con un número de colores y asignar a cada pixel uno de esos colores. Este modo de imagen se denomina indexado y no suele tener más de 256 colores por pixel, aunque pueden ser muchos menos.

¿Qué tiene mayor profundidad de color una imagen indexada o una RGB?

- Una RGB
Feedback: Bien. La profundidad de color de una imagen indexada es siempre menor que la del modo RGB
- Una indexada
Feedback: Mal
- La profundidad de color no depende de eso
Feedback: Mal

modos 3

¿Qué tiene más variedad de grises, una imagen RGB o una indexada?

- Las dos igual
Feedback: Efectivamente. Para un mismo color en modo RGB hay 256 posibilidades, lo mismo que en el modo indexado. La diferencia es que el modo RGB permite otros muchos colores más aunque no se usen en esa imagen de grises.
- La indexada
Feedback: Mal
- la RGB
Feedback: Mal

G modo RGB

¿Qué significa la G de RGB?

- Green
Feedback: Bien
- verde
Feedback: Bien

Características del color

Tono

Es la longitud de onda propia de cada color, lo que diferencia el verde del rojo o del amarillo.

En esta imagen puedes ver distintos tonos a medida que nos desplazamos por ella de manera horizontal.  Como ves, no todos los colores parece que ocupen el mismo espacio. Por ejemplo el amarillo ocupa mucho menos que el azul. Esto es porque el ojo humano no es igual de sensible a todos los colores.

Brillo

Es la cantidad de luminosidad que tiene cada píxel.  En esta imagen puedes ver un color azul con distintos  valores de brillo.

Cuando los valores de los canales son altos el color tiene mucho brillo. El negro tiene poco brillo y el blanco mucho.

Saturación

Es la cantidad de color que tiene cada pixel. A menos saturación el color se ve más gris (aunque con la misma luminosidad) y a más saturación el color es más vivo. En esta imagen ves un color azul con identico brillo pero diferenciándose en su nivel de saturación.

Cuando los niveles de  canales complementarios son altos, el color tiene poca saturación. La mezcla de colores complementarios da niveles de grises. Los grises (incluidos el blanco y el negro) son colores con saturación cero.  Los colores de saturación cero no tienen tono.

tono, brillo o saturación

¿En qué se diferencian?

- Bien
- Mal
- Este ___color y este ___
Feedback: En el tono
- Este___color y este___ color.
Feedback: en el brillo
- Este___color y este___ color.
Feedback: en la saturación
- Este___color y este___ color.
Feedback: en el brillo

Modo rgb y características del color

Modo RGB y características del color

En el modo RGB, a cada píxel se le da una cantidad de rojo, una cantidad de verde y una cantidad de azul (RedGrenBlue). Cada uno de estos canales tiene 256 posibilidades y esto se suele dar en forma de número hexadecimal, donde FF es el valor más grande (corresponde a 256) y 00 es el valor más pequeño (corresponde al cero del canal=negro).

Un píxel rojo tendría como valor FF0000, uno verde 00FF00 y uno azul 0000FF.
FFFF00 es la suma de rojo más verde, que se ve de color amarillo. 00FFFF es la mezcla de verde y azul, que se llama cian. FF00FF es la mezcla de rojo y azul, llamada magenta. Todos estos son colores puros con saturación máxima.

El brillo depende del valor de los canales. Cuanto más altos son los números, más brillo hay.
La saturación depende de las diferencias entre los tres canales. Cuanto más parecidos son los valores de los tres canales, menos saturación tiene el color.
El tono depende de la relación entre los tres canales.  En el caso de que haya valores en los tres canales, significa que la saturación no es del 100%. Si restamos de los tres canales el canal menor, el resultado nos indica el tono puro, sin saturación. La relación entre esos tres canales ahora indica el tono.

¿En qué se diferencian?

- Bien
- Mal
- AA00AA y 00AAAA
Feedback: en el tono
- 003300 y 008800
Feedback: En el brillo
- AAAA00 y 888844
Feedback: En la saturación
- 3A0000 y 5F0000
Feedback: En el brillo

color luz/pigmento

Colores luz y colores pigmento

Probablemente lo que indicaba la diapositiva anterior contradiga tu experiencia. Si mezclas pintura azul con roja, no obtienes magenta (un color más luminoso que los dos usados) sino morado (un color menos lumninoso que los de partida). Es más, si mezclas pinturas de muchos colores obtendrás un gris sucio, mientras que en la diapositiva anterior indicabamos que si ponemos en alto todos los colores del pixel, obtenemos blanco. Esto es debido a que la pintura y la pantalla del ordenador se comportan de manera diferente.

Mezclas sustractivas.

La pintura usa pigmentos que es la sustancia que da el color. El pigmento absorbe parte de la luz blanca y el resultado lo observamos con el color complementario a ese. Por ejemplo, la clorofila de las plantas, absorbe luz roja y por eso vemos las plantas de color verde. Cuantos más pigmentos ponemos, más luz quitamos y el resultado es menos brillante. A esto se le llama mezclas sustractivas, porque cada color que añadimos quita brillo.

Mezclas aditivas

Son las que usa la pantalla del ordenador. Aquí lo que hacemos es añadir luz de color. Por eso, cuantos más colores ponemos, más brillo tenemos.

- Bien
- Mal
- El color de una película vista en el cine es...
Feedback: color pigmento
- El color de la televisión es...
Feedback: color luz
- El color de una manzana es...
Feedback: color pigmento
- El color de una foto digital impresa en papel es...
Feedback: color pigmento

Tipos de imagen digital

Existen dos grandes tipos de imagen digital: los mapas de bits y las imágenes vectoriales

Mapas de bits

Mapas de bits

Cada pixel de la imagen tiene asignado un color. Observa el siguiente ejemplo

En este tamaño no observas los pixeles, pero si la ampliamos los verás perfectamente

Aunque no lo creas, es la misma imagen. Los mapas de bits son sensibles al escalado, cuando se aumenta de tamaño se observa una pérdida de calidad.
¿Cual de estas dos imágenes ocupa más memoria?

- Las dos igual
Feedback: Bien. Es la misma imagen visualizada a diferente tamaño.
- La pequeña
Feedback: Mal
- La grande
Feedback: Mal

Imágenes vectoriales

Imágenes vectoriales

Las imágenes vectoriales se guardan en forma de ecuación matemática. El ordenador interpreta esa ecuación y dibuja la imagen. Si  cambiamos el tamaño de la imagen no se observan los píxeles, porque se recalcula el dibujo.
La ventaja de las imágenes vectoriales es que no son sensibles al escalado (al cambio de tamaño) se ven igual en pequeño que en grande. Pero no todo se puede representar con ecuaciones matemáticas. La imagen del burro, por ejemplo , no es posible hacerla de forma vectorial.

En este enlace tienes una imagen en forma de mapa de bits. Pincha en ella y ábrela en otra ventana. Auméntala pulsando control derecho a la vez que + varias veces. Se observa como va perdiendo calidad, a medida que se visualizan los pixeles.

Este enlace lleva a una imagen vectorial.  Pincha en ella y ábrela en otra ventana. Auméntala pulsando control derecho a la vez que + varias veces. La calidad no disminuye y no se observan los pixeles. Esto es porque el ordenador la redibuja en cada caso
 ¿Qué ocupará mas, una imagen en forma de mapa de bits o como imagen vectorial?

- El mapa de bits
Feedback: Correcto
- La imagen vectorial
Feedback: Mal
- Aproximadamente lo mismo
Feedback: Mal

Formatos de los mapas de bits

Los mapas de bits pueden tener distintos formatos. Los más comunes son BMP, JPG, GIF y PNG.
Los distintos formatos llevan a tamaños muy diferentes de archivos y a distintas calidades.
Un usuario avanzado de informática, debe saber en cada caso cuál es el mejor formato.

Formato BMP

Formato BMP

A cada píxel le corresponde un valor concreto del color. Es un formato que ocupa muchísimo espacio. Las pantallas de los ordenadores actuales están entre los 800 pixeles de ancho por 600 de alto y los 1024 de ancho por 768 de alto. Si calculas cuantos pixeles le corresponden a cada una tienes 800x600=480000pixeles (un poco menos de medio megapixel)  en un caso  y los 1024x768=786432 pixeles (un poco menos de un megapixel) en el otro. Cada uno de esos pixel tiene una cantidad de rojo, una de verde y una de azul. En total hay 256 valores por cada canal (del 00 al FF en hexadecimal).  Cada  canal  ocupa un Byte de memoria , como hay 3 canales una imagen de 800x600pixeles ocuparía 480000X3=1440000 (algo más de 1,4 megas), y en el caso de la imágen de 1024x768 serían 786432x3=2359296 (algo más de 2,3 megas). Como ves se trata de mucha información y tardaría mucho en descargarse de internet. Por eso, este formato jamas se usa para páginas web.

¿Cuántos bytes ocupará una imagen de 100x100 en mapa en formato bmp?

- 30000
Feedback: Bien

JPG

Formato JPG

Cuando se trabaja con mapas de bits en internet, se usan formatos que reducen mucho la cantidad de información dando un resultado visual más que aceptable.
Por ejemplo la imagen siguiente tiene 800x600 pixeles y sin embargo sólo ocupa 157K es decir casi 10 veces menos de lo que le correspondería.

Esto es porque se trata de una imagen jpg en la que se ha reducido el tamaño de la misma usando un algoritmo de compresión con pérdida que se basa, en que el ojo humano es más sensible a los cambios de brillo que a los cambios de color.

Habrás oído el dicho por la noche todos los gatos son pardos. Eso es porque cuando hay poca luz, puedes distinguir las formas, pero no los colores.

Usando esa estrategia, la imagen se divide en cuadritos de 8x8 pixeles. Dentro de esos cuadritos, se reduce la información dando más importancia al brillo que al color.

El algoritmo de compresión puede usarse con distintos niveles de calidad. Con una calidad de 100%, prácticamente no hay diferencia entre la imagen original y la tratada, incluso aunque se amplíe bastante. Compresiones con calidad del 50% suelen ser indistinguibles del original a tamaño real, pero se observan distorsiones al ampliarla. Con calidades entorno al 10%, incluso a tamaño real se observan distorsiones y si ampliamos la imagen, podemos llegar a observar la cuadrícula que usa el algoritmo.

El sistema jpg, en lo que se refiere a percepción humana, es muy fiel a los colores, pero distorsiona la líneas. Es un formato que no es adecuado cuando la distorsión de las lineas perjudique mucho. Por ejemplo en fotos con texto fino, pequeño con importancia, no se debe usar este formato.

Una imagen del burro con formato BMP que tuviera el mismo tamaño de memoria tendría este tamaño (la imagen está enlazada a una imagen bmp de ese tamaño).

Si hubiéramos puesto aquí una imagen BMP del mismo tamaño que la JPG, ¿qué diferencia habría ocurrido en la navegación?

- La página habría tardado mucho más en cargarse
Feedback: Bien
- No habría diferencia
Feedback: Sí hay diferencia
- La imagen tendría más calidad
Feedback: No necesariamente tendría más calidad
- Se vería más oscura
Feedback: La diferencia de formato no afecta al brillo

jpg 2

Cuando se fabrica un archivo jpg se puede jugar con la calidad del mismo. cuanta menos calidad tiene, menos memoria ocupa.
La siguiente imagen se ha conseguido de la misma fotografía, pero con una calidad del 10%. Ocupa 6 veces menos que el original.

Si esta misma imagen la viéramos con un tamaño más pequeño, la observaríamos

- Con más calidad
Feedback: Bien
- Menos calidad
Feedback: Mal
- La misma calidad
Feedback: Mal
Formato GIF

Otra forma de reducir la información de la imagen es reducir el número de colores, que es lo que hace el formato gif.
Observa la misma  imagen en formato gif. con un tamaño similar

Como ves en este caso hay menos colores y la imagen se ve peor, pero cuando la imagen no tiene muchos colores, se ve muy bien.

El algoritmo de compresión gif, al igual que el jpg es un algoritmo de compresión con pérdida. ¿Qué significa esto?

gif/jpg

gif vs jpg

El formato jpg, en lo que se refiere a la percepción humana, es muy fiel a los colores, pero distorsiona las líneas. Mientras que el formato .gif es tan fiel a las lineas como el formato original, pero la paleta de colores es muy reducida para la capacidad de percepción del ojo humano.
Observa en el siguiente ejemplo cómo afectan a las líneas los dos formatos:

Imagen .gif de 1Kb | Imagen .jpg de 1Kb

Para un dibujo es formato adecuado es...

- jpg
Feedback: Mal
- gif
Feedback: Bien
- Mal

PNG

Formato PNG

PNG es un formato que admite color indexado o color real. El color indexado disminuye la información por píxel frente al color real. Además usa un método de compresión basado en la variación de valores entre píxeles próximos. Si hay muchos píxeles parecidos en una zona, no hace falta dar información de cada uno, vale con repetirlos.

Transparencia

PNG, al igual que gif, admite transparencia. La diferencia es que png admite transparencias parciales, mientras que gif sólo las admite totales. Un píxel en formato gif es opaco o transparente. En formato png, puede ser más o menos transparentes.

Observa los siguientes ejemplos que muestran imágenes con transparencias:

Imagen PNG | imagen GIF

Las mismas imágenes sobre un fondo diferente:

Imagen PNG | imagen GIF

Observa los bordes de las letras y la sombra. En el formato PNG pueden tener transparencias parciales, mientras en el gif o son transparentes u opacos, por eso se ve como recortados.
 ¿Qué significa que un formato de compresión tiene pérdida?

- Qué el resultado pierde calidad frente al original
Feedback: Mal
- Que no se puede obtener el archivo original a partir del archivo comprimido
Feedback: Bien
- Que el archivo comprimido pierde algo de tamaño con respecto al original
Feedback: Mal
- Que el archivo original se pierde al obtener el comprimido
Feedback: Mal

¿Qué formato usar?

¿Qué formato usar?

Cuando las imágenes tienen que viajar por la red, debe valorarse mucho su tamaño, ya que cuanto más grande sea, más tardará y más posibilidades de error habrá.
Esto hay que tenerlo en cuenta tanto en páginas web, como archivos adjuntos a mensajes de correo electrónico o los protocolos ftp.
Se debe valorar por un lado el tamaño ya que mover imágenes más grandes de lo que se van a visualizar no tiene sentido.
Por otro lado se debe elegir adecuadamente el formato para tener una adecuada relación entre calidad y tamaño. Se debe elegir el formato que con suficiente calidad, ocupa menos memoria.
En general, usaremos el formato JPG para fotos, GIF para dibujos y PNG cuando necesitemos transparencia de distintos grados. El formato de una imagen se reconoce por la extensión del archivo de imagen.

Otros formatos

Otros formatos

Existen otros formatos para imágenes que son  propios  del programa gráfico que  se usa. Por ejemplo, para el GIMP, el programa que vamos a usar nosotros, tenemos el formato XCF. Es un formato exclusivo para trabajar con el programa gráfico. Es un formato que permite el uso de capas.

¿Qué tal se ve el formato XCF en un navegador web?

- Bien, pero la página tarda en cargarse
Feedback: Mal
- No se ve
Feedback: Bien. Este formato jamás se usan en páginas web, porque los navegadores no son capaces de interpretarlos.
- Se ve un poco peor que jpg pero mejor que gif
Feedback: Mal
- Se ve mejor que .gif pero peor que jpg
Feedback: Mal