FUNDAMENTOS DE LA IMAGEN DIGITAL

FUNDAMENTOS DE LA IMAGEN DIGITAL

Autores Fundamento teórico y selección de contenidos: Lic. Mª Pilar Barbeira Tutoriales y videotutoriales: Rossana Marqués Carlos Javier Acuña Lic. Mª Pilar Barbeira Colaboradores Prof. Jennifer Silva Prof. Virginia Gasdía Martín Lalinde Mercedes Pena Corrección de estilo Raquel Conde

El mundo de las imágenes digitales Tipos de imágenes digitales Hay dos grandes grupos de imágenes digitales: las imágenes vectoriales y las imágenes de mapas de bits también llamadas imágenes pixelares, ráster o bitmap. Observemos las siguientes imágenes. En qué se diferencian?

Imágenes vectoriales José Ramón Alcalá y Guillermo Navarro (2008) definen a las imágenes vectoriales como aquellas que se construyen a partir de objetos generados matemáticamente llamados vectores... y agregan:...un vector está definido por una serie de puntos que tiene unos manejadores con los que se puede controlar la forma de la línea que se origina al conectar dos de esos puntos. Cuando estos puntos, en vez de estar unidos por una recta, lo están por una curva surgen los llamados elementos esenciales de una curva de Bézier. Estos elementos esenciales son los siguientes: los puntos de anclaje o nodos y los manejadores o manecillas de control que permiten el modelado de la forma de la línea hasta que se obtenga el contorno deseado. Una breve introducción Las imágenes vectoriales permiten amplias posibilidades plásticas en el terreno del dibujo y la ilustración digital siendo además muy utilizadas en el ámbito de la ingeniería y el diseño técnico. Las principales ventajas de este tipo de imágenes es, a diferenca de las imágenes bitmap, el poco espacio que ocupan en la memoria del computador y la posibilidad de escalarlas a grandes tamaños sin que pierdan la calidad gráfica de los trazados. Inkscape es un editor de imágenes vectoriales que viene instalado en la imagen de la XO 1.5. Para aquellos que tengan interés, el siguiente tutorial ofrece una aproximación a los usos básicos de la herramienta http://inkscape.org/doc/basic/tutorial-basic.es.html

El píxel y las imágenes bitmap Píxeles y resolución de la imagen La imagen de mapa de bits o bitmap consiste en una cuadrícula también llamada ráster, grilla o matriz donde los píxeles se ordenan en las correspondientes celdas con valores correspondientes a los ejes x e y, horizontal y vertical. La representación de una imagen cualquiera se obtiene asignando y almacenando un único color en cada uno de los píxeles, es decir que cada uno tendrá un color y una ubicación dentro de la cuadrícula. A diferencia de la imagen vectorial, la imagen bitmap no puede escalarse sin consecuencias que alteren su aspecto y calidad. A la hora de escalar una de estas imágenes, habrá que tener en cuenta la resolución, el modo de color, y el formato de compresión entre otros factores. La nitidez o la calidad visual en una imagen de mapa de bits está dada por su resolución. Esta nos permite apreciar mayor o menor cantidad de detalles. Para comprender este concepto es importante saber que el Píxel 1 es la unidad mínima de color homogéneo que constituye una imagen digital bitmap, sea ésta una fotografía, un gráfico o un fotograma de video digital 2. 1 Según la Real Academia Española de la Lengua en la vigésima tercera edición de su diccionario, la palabra píxel proviene del inglés pixel, siendo este un acrónimo de pix -plural coloquial de la palabra picture, traducción para retrato o imagen- y element (elemento). 2 Alcalá, J. R. y Navarro, G. Una introducción a la imagen digital y su tratamiento. Cuenca, Mideciant 2008, p. 41.

Las dimensiones alto y ancho de la superficie que ocupa una imagen se miden en píxeles. Por lo tanto, las dimensiones de la imagen estarán ligadas a la resolución y al peso, es decir, al espacio que ocupa la imagen en nuestro ordenador. Debemos tomar en cuenta sin embargo, que el píxel, a pesar de ser una unidad de medida, es un concepto inmaterial que no tiene una medida concreta. Sería, por lo tanto, imposible determinar si un píxel mide un milímetro o un centímetro. En principio es solamente una unidad de medida variable por medio de la cual se dividen las celdas de una rejilla. Es así que si tenemos una imagen de 200 100 píxeles sin saber su tamaño físico real, lo único que sabemos es que la hemos dividido en 20.000 celdillas. Sin embargo, cuando a esa imagen le asignemos una resolución, entonces sí sabremos el tamaño del píxel para esa imagen y para esa resolución dada. Por ejemplo, si decimos que la imagen consta de 100 píxeles por pulgada, tendremos 100 píxeles cada 2,54 centímetros3. Es decir que habrá 100 celdillas por cada 2,54 centímetros, con lo cual cada píxel medirá 0,254 milímetros. Pero si dijéramos que esa imagen tiene una resolución de 1 píxel por pulgada, entonces cada celda o píxel tomará el valor de 2,54 centímetros. Observemos las imagen siguiente: La resolución de una imagen nos indica el número de píxeles que caben en cada unidad de longitud. Es decir que a mayor resolución e igual tamaño, mayor será la cantidad de píxeles y menor el tamaño de éstos y por lo tanto, la imagen tendrá mayor nitidez. Al comparar las imágenes vemos que ambas tienen el mismo tamaño pero el número de píxeles difiere una de la otra. La primera imagen tiene menor resolución que la segunda. 3 Una pulgada = 2,54 centímetros

Unidades de medida relacionadas con las imágenes digitales Como hemos visto, la unidad de medida para la resolución de una imagen digital almacenada en mapa de bits es el Píxel Por Pulgada cuya abreviatura en castellano se expresa como ((PPP) y, en inglés, Pixels Per Inch o PPI. Sin embargo, hemos de alertar al docente que esta unidad ha generado varias confusiones, aun en ámbitos especializados. El error se origina al confundir el concepto de resolución de una imagen almacenada en mapa de bits con el de resolución de impresión. Se denomina resolución de impresión a la cantidad de puntos por pulgada a los que puede imprimirse una imagen digital. Es decir, la cantidad de puntos físicos de tinta o tóner que una impresora es capaz de producir en un espacio lineal de una pulgada. Es así que esta unidad se expresa como Puntos Por Pulgada. Como el docente puede apreciar, la abreviatura de dicha unidad es similar a unidad de medida mencionada en el párrafo anterior, generando de esta forma la confusión. Lo aconsejable es utilizar la abreviatura del inglés Dots Per Inch o DPI para expresar la resolución de impresión y expresar la resolución de la imagen bitmap en Píxeles por Pulgada o PPP (PPI del inglés). Otra unidad de medida muy utilizada en el mundo de las imágenes digitales es el Megapíxel equivalente a un millón de píxeles. Cuando una cámara tiene-, por ejemplo, 3,1 megapíxeles; entenderemos que con dicha cámara podremos obtener fotografías de hasta 3,1 millones de píxeles. Esta imagen tendrá, por lo tanto, un tamaño real para su impresión que dependerá de su resolución. Actividad guiada Proponemos una experiencia guiada utilizando la aplicación GIMP, un editor de imágenes bitmap que viene instalado por defecto en las computadoras XO 1.5 y Magallanes. GIMP también puede instalarse en otros sistemas operativos. Su descarga se encuentra disponible desde http://www.gimp.org/. Recomendamos seguir los pasos de esta experiencia ya que nos ayudará a comprender algunos de los conceptos he hemos abordado en este tema. Para comenzar esta actividad, aconsejamos ejecutar la aplicación. Si estamos en el entorno Gnome, lo haremos desde Aplicaciones Gráficos y buscamos el ícono de GIMP en el menú desplegable (puede consultar el tutorial que ofrecemos en la pestaña Recursos si tiene dudas con respecto a este procedimiento). Una vez iniciada la aplicación, activamos el menú Archivo Nuevo ejecutando de esta manera los controles del cuadro Crear una imagen nueva. En este cuadro se encuentran los controles que nos permiten modificar el tamaño y la resolución de una imagen nueva. Prestemos atención a las opciones de edición para el tamaño de la imagen. Como observarán, podemos seleccionar diversas unidades de medida tales como pixeles, centímetros, milímetros, puntos, etc. Seleccionemos una medida para la imagen de aproximadamente 10 x 15 cm a. Más abajo, desplegando las opciones avanzadas modifiquemos la resolución de la imagen en los ejes X e Y de la rejilla o ráster manteniendo fija la proporción entre ambos ejes. Para ello, el ícono de la cadena ha de permanecer cerrado. Observe cómo aumenta o disminuye el número de pixeles de la imagen a medida que varía la resolución. Recuerde que a mayor resolución e igual tamaño, mayor número de píxeles por unidad de medida.

Si por algún motivo no tiene GIMP instalado en su computador, puede observar las imágenes siguientes que ejemplifican la experiencia anterior: Estos conceptos son importantes ya que su comprensión nos habilita a preparar las imágenes para el tipo de uso que necesitemos. Si las imágenes destinadas a la web son muy pesadas, recargaremos la red y entorpeceremos la navegación. Por otro lado, si la resolución de una imagen no es la adecuada para nuestras necesidades, la calidad se verá afectada. Debemos tomar en cuenta entonces que debemos utilizar distintos valores de resolución y distintos modos de color según vayamos a imprimir una imagen o utilizarlarla en web o monitor. Se recomienda una resolución de 72 PPP para visualización en pantalla o web, en modo RGB. Para impresión, en cambio, lo ideal es trabajar con imágenes en 300 PPP en modo CMYK. En el próximo tema, ampliaremos el concepto de modo de color

Profundidad y modos de color La cantidad de información necesaria para representar el color de un píxel en una imagen digital se denomina profundidad de color. Este término describe la cantidad de bits que son utilizados en un píxel para representar un color determinado en una imagen bitmap. Un bit (del inglés binary digit) es la unidad mínima de capacidad de información que utiliza un computador. Este utiliza los valores 0 y 1. A modo de ejemplo, si un píxel de una imagen bitmap tiene 8 bits de profundidad de color, entonces este podrá tomar hasta 256 colores: 2x2x2x2x2x2x2x2= 28 = 256 El término modo de color4, en cambio, se refiere a la manera en que se constituye el color en una imagen. Los más utilizados actualmente son Escala de Grises, RGB y CMYK. Modo Escala de Grises Este modo se refiere a las imágenes formadas por píxeles que pueden adoptar distintos valores de negro que van desde el 0% (es decir, blanco) hasta el 100%. Este espectro de tonalidades se gradúan en una escala de 256 niveles. Por este motivo, el modo Escala de Grises es el más apropiado para la impresión de imágenes en blanco y negro. Modos RGB y CMYK RGB del inglés Red (rojo), Green (verde) y Blue (azul) es el modo de color más utilizado en las imágenes bitmap destinadas al monitor ya que la mayoría de las pantallas electrónicas utilizan este modelo. RGB representa el color de un objeto como una mezcla aditiva de luz roja, verde y azul cuya suma es la luz blanca. 4 Si desea profundizar acerca de los modos de color, puede visitar las siguientes publicaciones: http://es.wikipedia.org/wiki/modelo_de_color_rgb http://es.wikipedia.org/wiki/espacio_de_color_srgb http://es.wikipedia.org/wiki/modelo_de_color_cmyk

Al trabajar en modo RGB cada píxel estará compuesto por un porcentaje determinado de rojo, verde y azul. Estos tres colores tienen, cada uno, una intensidad que va desde el 0 al 255. Un color conformado en RGB se expresa con tres cifras de la siguiente forma: (R, G, B). La primera corresponde a la intensidad del color rojo, la segunda al verde y la tercera al azul. A modo de ejemplo, la expresión (255, 0, 0) nos indica el color rojo puro. Dado que no es posible reproducir esta combinación de luz en los materiales impresos, las imágenes generadas digitalmente por medio de herramientas de dibujo vectorial o retoque fotográfico deben convertirse a su equivalente en el modelo CMYK, del inglés Cyan (cian), Magenta (magenta), Yellow (amarillo) y Black (negro). CMYK es el modo de color adecuado para utilizar dispositivos que usen tintas tales como una impresora o una máquina offset. Esta forma de impresión es conocida como cuatricromía o impresión a cuatro tintas. Las siguientes imágenes, nos permiten comparar las diferencias entre el modo RGB (izquierda) y el modo CMYK (derecha). Como se puede apreciar, el modo RGB ofrece una gama de colores más amplia, con colores más vivos y brillantes. Es por este motivo que los colores que vemos en el monitor, no son los mismos colores que vemos en nuestras impresiones. Los profesionales del diseño y la impresión utilizan estrategias y dispositivos que permiten reducir estas diferencias. GIMP, es un editor de imágenes bitmap que permite trabajar en Modo Escala de Grises y Modo RGB.

Formatos gráficos y compresión Podemos guardar las imágenes que hemos creado con el objetivo de utilizarlas o compartirlas posteriormente. Las aplicaciones informáticas guardan los documentos en determinados formatos específicos que nos permitirán, con las mismas aplicaciones, volver a utilizar las imágenes y realizar nuevas modificaciones. Al guardar una imagen, la aplicación que utilicemos asignará una extensión de archivo con el fin de que el computador lo reconozca y, a su vez, nosotros sepamos en qué formato hemos almacenado la imagen. Las extensiones constan generalmente de tres caracteres que se sitúan después del nombre de un archivo, precedidas por un punto. A modo de ejemplo, profesor.gif indica que el nombre del archivo es profesor y que el formato gráfico del mismo es gif. Un archivo de imagen digital ocupa una cantidad de espacio considerable en en el disco duro de un computador y es por esta razón que se han creado sistemas de compresión basados en algoritmos matemáticos que permiten reducir la cantidad de información del archivo. Existen sistemas de compresión patentados y de dominio público, siendo estos últimos gratuitos. Los sistemas de compresión pueden trabajar con pérdida o sin pérdida. Esta última supone que el algoritmo elimina información digital ocasionando muchas veces una reducción importante de calidad. En la compresión sin pérdida, en cambio, el algoritmo del sistema no elimina ninguna información; por lo tanto, la imagen quedará intacta. Es por este motivo que es importante conocer los distintos tipos de compresión, ya que evaluaremos cuánta pérdida de calidad podremos aceptar dependiendo del uso que decidamos hacer de la imagen. La siguiente es una lista de algunos de los sistemas de compresión más utilizados: JPEG o JPG (Joint Photographic Expert Group) es un formato de compresión que elimina información digital que el ojo humano no es capaz de apreciar. Siempre y cuando la compresión no haya sido excesiva, JPG permite comprimir imágenes sin perder calidad, pero no permite trabajar con fondos transparentes. GIF (Graphic Interchange Format) es un modo de compresión que admite profundidades de color de 1 a 8 bits. Se utiliza para imágenes animadas de poco peso. Es un formato ideal para las imágenes de pocos colores, preferentemente planas, destinadas a un sitio web. PNG (Portable Network Graphics) permite mayor profundidad de color que el GIF (hasta 24 bits) y es el formato indicado para Internet si queremos incluir imágenes de gran contenido cromático tales como fotografías o ilustraciones. PNG admite además el trabajo con fondos transparentes. TIFF (Tagged Image File Format) es un formato sin pérdida ya que la calidad permanece inalterada. Por este motivo es ideal para la compresión de imágenes fotográficas o ilustraciones de gran detalle que vayan a ser impresas. No es indicado para Internet ya que los navegadores no visualizan este formato.

Tratamiento de la imagen digital Licencias y derechos de autor A la hora de seleccionar una fotografía o imagen en formato digital para modificar o incluir en nuestras publicaciones y materiales didácticos, debemos ser cautelosos con respecto a las licencias, derechos de copia o copyright. Siempre que nos sea posible, es recomendable generar nuestras propias imágenes tomando fotografías, escaneando ilustraciones o esquemas elaborados por nosotros mismos o diseñándolos con aplicaciones informáticas que lo permitan. Sin embargo, a veces el tiempo nos juega una mala pasada y debemos recurrir a la red. En Los siguientes sitios ofrecen imágenes bajo licencia Creative Commons que pueden utilizarse libremente. Sin embargo, siempre conviene revisar las condiciones de la licencia y los derechos del autor. http://flickrcc.net/flickrcc/index.php http://commons.wikimedia.org/wiki/portada ese caso, es recomendable pedir permiso al autor o utilizar imágenes de sitios que habiliten la descarga de imágenes y fotografías con licencia de uso libre. GIMP: una herramienta de licencia libre para el tratamiento de la imagen digital GIMP5 (GNU Image Manipulation Program) es un programa que permite editar imágenes digitales bitmap. Se distribuye bajo una licencia libre, lo que permite utilizarlo, distribuirlo o, incluso, adaptarlo a las necesidades de cada uno. Se encuentra disponible para diversos sistemas operativos tales como Linux, Solaris, Microsoft Windows y Mac OS, entre otros. Existe una vasta comunidad abierta de colaboradores que comparten no solo sus creaciones y tutoriales, sino que además brindan ayuda a otros usuarios por medio de la participación en foros de intercambio. De esta manera, es posible aprender por cuenta propia a utilizar la herramienta y perfeccionarse en las habilidades de edición de imágenes digitales. 5 Para ampliar la información puede visitar http://es.wikipedia.org/wiki/gimp

GIMP viene instalado por defecto en las computadoras del Plan Ceibal que utilicen Ubuntu o Gnome. Si queremos instalarlo en otros sistemas operativos debemos descargarlo desde su sitio oficial: http://www.gimp.org/. El siguiente es el enlace a la comunidad abierta de GIMP en español. Al registrarnos como usuarios, tendremos acceso a la participación en los foros para realizar consultas, aportes y contribuciones. http://www.gimp.org.es/ Aquí finaliza nuestro aporte. Esperamos que la información y materiales brindados hayan sido de utilidad.

Bibliografía consultada acerca de la imagen Acaso López-Bosch, María. El Lenguaje Visual. Ediciones Paidós Ibérica. Barcelona, 2006. Alcalá Mellado, J.R. y Navarro Oltra, G. Una introducción a la imagen digital y su tratamiento. Cuenca. MIDECIANT, 2008. <http://www.uclm.es/profesorado/gnoltra/publicaciones/mideciantdidact1.html> [Consultado el 02/07/2011] Aparici R., Fernández Baena J., García Matilla A., Osuna Acedo S. La imagen. Análisis y representación de la realidad. Editorial Gedisa, Barcelona 2009. Kandinsky, W. Punto y línea sobre el plano. Editorial Paidós, 1998. Barcelona Ministerio de Educación y Cultura. Dirección de Educación. Comisión de Educación y Arte. Aportes al Debate Educativo 2005-2007. Montevideo. (p28) Olher, Jason. Art Becomes the Fourth R, Teaching the Information Generation. Education Leadership, Association for Supervision and Curriculum Development. Volumen 58, Número 2, p 16-19. Octubre, 2000. Consultado el 21 de Octubre, 2011 http://imoberg.com/files/art_becomes_the_fourth_r_ohler_j._.pdf Publicación de la traducción de este documento en EDUTEKA http://www.eduteka.org/profeinvitad.php3? ProfInvID=0016 Zamora Águila, F. Filosofía de la imagen. Lenguaje, imagen y representación. Universidad Autónoma de México. Escuela Nacional de Artes Plásticas. México, 2007. Sitios web consultados <http://www.mierteran.com/blog/tecnica/ cuanto-mide-un-pixel/> <http://www.fotopunto.com/confusion_sobre_la_resolucion_de_la_imagen_en_fotografia_digital> Lic. María Pilar Barbeira