Imagen Digital

¿Cómo representamos una imagen en un ordenador?

• Los ordenadores solo entienden de números– Los números se guardan en binario 0011101– Las letras se guardan como números

• H O L A• 72 79 76 65• 0100 1000 0100 1111 0100 1100 0100 0001

– ¿Cómo podemos representar una imagen en el ordenador?

Imagen vectorial

• Podemos describir la imagen en base a las formas que aparecen en ella

• Mediante ecuaciones podemos describir cualquier línea que dibujemos (splines)

• Circulo 50,50,90 Negro

• Circulo 20,20,5 Blanco

• Circulo 20,60,5 Blanco

• Linea 20,60–60,60-1 Blanco

Imagen de mapa de bits (bitmap)

• Consiste en dividir la imagen que queremos representar en trozos y asignar un color a cada trozo

• A cada trozo de la imagen se le llama píxel

• Cuantos más píxeles usemos mejor representada quedará la imagen

0 0 0 0 0 0 0 20 40 40 20 0 0 0 0 0 0 0 0 0 0 20 50 100 100 100…

Ventajas

• Vectorial– La calidad se

mantiene independientemente del tamaño

– Los dibujos sencillos ocupan poco incluso a tamaños enormes

– Se pueden reproducir en plotters de corte, bordadoras, etc.

– Son más fáciles de editar

• Mapa de bits– Producen imágenes

más naturales– El proceso de dibujado

es más natural– Se pueden obtener a

partir de scanners, cámaras, etc.

Desventajas

• Vectoriales– Es difícil que representen

bien escenas reales– El proceso de dibujado es

poco natural

• Mapa de bits– Los ficheros ocupan más– La calidad depende del

tamaño de visualización– Si necesitamos mucha

calidad a grandes tamaño necesitamos muchos píxeles y ficheros enormes

– No se pueden usar para plotters de corte y similares

– Son más difíciles de editar

Usos

• Vectoriales– Logotipos– Infografías– Animaciones– Estampados– Tampografía– Bordados– Vinilos

• Mapa de bits– Fotografías– El resto

El color

• La luz es una franja del espectro electromagnético que podemos percibir

• Cada longitud de onda dentro del espectro visible la percibimos como un color diferente

• ¿Cuántos colores hay?• Entonces ¿Cómo podemos reproducir los colores?

El sistema aditivo de color• Si escuchamos a la vez un sonido

grave y uno agudo (un bombo y un platillo) no escuchamos un sonido medio sino que escuchamos los sonidos por separado. Entonces ¿Porqué cuando juntamos rojo y amarillo lo vemos verde?

• Los seres humanos vemos el color gracias a una células llamadas conos en nuestra retina

• Tenemos conos que reaccionan principalmente al rojo, conos para el verde y conos para el azul

• Gracias a esto podemos reproducir cualquier color como mezcla de rojo, verde y azul

• Es el mecanismo que se usa en los monitores para conseguir representar cualquier color

90%

40%

0%

El color magenta (curiosidad)

• Si juntamos luz roja (255,0,0), y luz azul (0,0,255) obtenemos el color magenta (255,0,255)

• ¿Cuál es la longitud de onda del magenta?

• Resulta que no existe luz monocromática de color magenta.

• La luz magenta no existe en la naturaleza y es un invento de nuestro cerebro cuando percibe luz azul y roja a la vez

20%

0%

28%

El modelo RGB• Para representar un píxel de un color en un ordenador podemos

almacenar su cantidad de rojo (R) verde (G) y azul (B) como un número

• Si por ejemplo destinamos 6bits por píxel (2 bits para cada canal del RGB) tendríamos– Rojo: 00 – 01 – 10 -- 11– Verde: 0, 1, 2, 3– Azul: 0, 1 ,2, 3– 4x4x4= 64 colores diferentes

• En general con Xbits tendremos 2X colores diferentes posibles• En RGB de 24bits (8bits por canal) el nivel de rojo, verde y azul se

representa por un número entre 0 y 255• ¿Cuánto ocuparía una imagen de 1000x1000 pixeles en RGB de

24bits?• 1.000x1.000 = 1.000.000 pixeles x 24 bits = 24.000.000 bits / 8 =

3.000.000 bytes / 1024 = 2.929 KBytes /1024 = 2,8 MBytes

El modelo HSV

• Es otra manera de representar numéricamente el color

• Utiliza tres valores que son – H (hue ó tono)– S (saturación)– V (valor o brillo)

• Es equivalente en gamut al RGB por lo que solo se usa para seleccionar colores de trabajo

El modelo CMYK• Los dispositivos de impresión funcionan mediante color

sustractivo– Parten de una base blanca– Oscurecen el blanco usando pigmentos

• Por ello se basan en un sistema de color diferente llamado CMYK

– Cyan (Cian)– Magenta– Yellow (Amarillo)– Key ó Black (Negro)

• Según la teoría de color no es necesario el negro, pero es más fácil y más económico conseguir negro usando tinta negra.

• El gamut de RGB y CMYK no coincide por lo que hay colores que solo están en uno de los espacios de color

• ¿QUÉ OCURRE AL PASAR DE RGB A CMYK?• ¿Y AL PASAR DE CMYK A RGB?

CMYK

RGB

La transparencia

• En realidad no existe el “color transparente”• Sin embargo en diseño a veces es conveniente

tener zonas de una imagen transparentes• Existen varios métodos

– Por paleta. Se elige uno de los colores de la imagen como color transparente

– Por canal alfa. Para cada pixel se guarda un número que representa el nivel de transparencia de ese pixel

La compresión• Existen métodos para comprimir imágenes de mapa

de bits y conseguir que ocupen menos espacio– Compresión sin pérdida

• Consigue ocupar menos espacio “resumiendo” los valores almacenados

– Ej. 0,0,0 0,0,0 0,0,0 0,0,0 -> 3 x 0,0,0• La calidad de la imagen resultante es la misma que la de

la imagen original• Funciona mejor con imágenes con zonas del mismo color

(dibujos, logos, etc) donde consigue mejor compresión– Compresión con perdida

• Simplifica los detalles de la imagen usando diferentes métodos

• La calidad de la imagen resultante es peor que la de la imagen original

• Funciona mejor en imágenes naturales sin zonas del mismo color ni contrastes acusados donde se nota menos la pérdida

Color Indexado

• Es una técnica para reducir el tamaño de una imagen reduciendo el número de colores.

• Se almacena una tabla de colores llamada paleta en la que se asigna un número a unas cuantas combinaciones RGB

• Después a cada píxel se le asigna el número de su color en la paleta

• De esa manera se consiguen usar menos bits por pixel pero disponiendo de un conjunto de colores grande de los que solo algunos se pasan a la paleta

0255,0,0

1202,128,72

251,102,255

3153,204,0

0 12 30 1 2 301 3

El formato de imagen BMP

• Aunque existen diferente versiones de BMP lo más normal es que se ajusten al formato original o DIB– Profundidad de color

• Color indexado– 1 bit – Dos colores– 4 bits – 16 Colores– 8 bits – 256 Colores

• RGB – 24 bits – 8 bits por canal – 16 Millones de colores

– Compresión• Normalmente los BMP son sin compresión

– Transparencia• BMP no admite transparencia

El formato de imagen GIF

• GIF fue desarrollado por compuserve– Profundidad de color

• Color indexado de 8 bits (256 colores)

– Compresión• LZW sin pérdida

– Transparencia• Por paleta de un solo color

– Extras• Un GIF puede contener animaciones que en

realidad son varias imágenes en un solo fichero• Existe una paleta web, pero ya no tiene sentido

El formato de imagen PNG

• Es un formato inspirado en GIF para evitar los problemas de patentes del formato de compuserve con Unisys– Profundidad de color

• Paletas. Hasta 256 colores de 24 bits.• RGB. 24 o 48 bits por pixel

– Transparencia• Por paleta – 1 o varios colores de la paleta• Por canal alfa

– Compresión• Sin pérdida con un método algo mejor que el de GIF

El formato de imagen JPG

• Desarrollado por el Joint Photographic Experts Group

• Es el formato más común en imágenes para Internet y en cámaras digitales no profesionales– Profundidad de color

• Depende de la compresión. JPG no guarda en RGB.– Transparencia

• No soporta– Compresión

• Compresión con pérdida en 100 niveles diferentes• Se pueden alcanzar compresiones de hasta unos 100:1

• NUNCA HAY QUE USAR JPG COMO FORMATO DE EDICIÓN

• http://hadto.net/category/sketchbook/generation-loss

El formato de imagen TIFF

• Desarrollado por una compañía integrada en Adobe

• Puede contener muchos tipos de datos y es muy extensible pero la mayoría de los programas solo soportan los siguientes:– Profundidad de color

• 32 bits en CMYK• 24 bits en RGB

– Transparencia• No soporta

– Compresión• Sin comprimir• Compresión sin pérdida usando LZW

El formato de imagen PSD

• Es el formato nativo de Photoshop• Soporta todos los modos de color de PS

– RGB, CMYK, LaB…

• Soporta todas las características de PS como – canales, capas, trazados, texto…

• Soporta transparencia por cada capa basada en canales alfa

• Compresión sin pérdida• ES EL FORMATO EN EL QUE SE PREFIERE

HACER LA EDICIÓN

La resolución

• La resolución de una imagen indica la densidad de los píxeles de la misma

• Se suele medir en puntos/píxeles por pulgada (ppp)

• La resolución depende– Del tamaño “digital” de la imagen. El número de

píxeles.– Del tamaño de impresión de la imagen. Las pulgadas

(o metros) a la que se reproduce la imagen.• Generalmente lo ideal es que la resolución sea

de al menos 120-150 ppp• A cambiar el tamaño en píxeles de una imagen

se le denomina interpolación

El sistema píxeles-tamaño-resolución

Tamaño (Pulgadas)

Resolución (PPP)

Píxeles

Bomba