Imágenes Digitales. Raster y Vectoriales
-
Upload
francisco-berrizbeitia -
Category
Education
-
view
1.334 -
download
3
Transcript of Imágenes Digitales. Raster y Vectoriales
Preparación de imágenes
Tipos de representación de imágenes (raster y vectores)
En la actualidad existen fundamentalmente dos tipos de representación para imágenes 2D: raster y vectores. A continuación veremos una descripción de ambos tipos de representación y su uso en aplicaciones multimedia
Imágenes Raster (Bitmaps) Un raster es una “malla” y una imagen representada de esta manera corresponde a una matriz tridimensional donde se definen el color de cada uno de los puntos (pixels) que conforman la imagen.
Los colores de estos puntos se definen típicamente como una combinación lineal dentro del espacio RGB (Red, Green, Blue)
Figura 7. “ smiley face” representada como raster. (Tomado de www.wikipedia.org)
En la figura 7 observamos un “smiley face” representado como raster, en la imagen ampliada podemos notar que para cada punto de la malla existe un color representado en coordenadas RGB, en el caso de la figura con porcentajes. Existen también otras formas de representar los colores y estas van a depender en gran medida del medio que se va a utilizar para interpretar los datos. Para formatos impresos se utiliza la representación CMYK o cuatricromía, esto se debe a las impresoras utilizan cuatro colores para imprimir (cian, magenta, amarillo y negro) entonces tiene sentido utilizar la mezcla de estos colores para trabajar con imágenes que van a ser luego impresas. En el caso de los monitores de computadora o los televisores, estos utilizan una combinación de rojo, verde y azul para representar los colores en la
pantalla, de tal forma que la representación RGB será la indicada si vamos a trabajar para Internet, medios interactivos o para televisión.
El otro aspecto define las imágenes raster es la resolución o la cantidad de pixels la forman. A mayor cantidad de pixels mayor resolución tendremos.
Existen también un parámetro de densidad comúnmente utilizado: dpi (dots per inch), que son pixels o puntos por pulgada. A mayor densidad de puntos mejor calidad tendrá la impresión. En el trabajo de impresos en formato pequeño (hasta el tamaño de un afiche o pendón aproximadamente) los DPI que se utilizan van desde 150 a 300 siendo estos los más usados, para tamaños superiores de utilizan dpi`s menores. Las pantallas de computadora y la televisión tienen una densidad de 72 dpi.
La combinación de estos tres factores es lo que va a determinar el peso de una imagen raster. El peso es un muy importante al momento de trabajar con imágenes y particularmente para el desarrollo de sitios web, debido a su relevancia en la velocidad de carga de las páginas. Imágenes muy pesadas generarán sitios muy lentos, pero imágenes con poca resolución o poca profundidad de color producen una apariencia muy pobre, ambos factores, como vimos en la unidad anterior, terminarán mermando el éxito de nuestro sitio web.
Para lidiar con este problema veremos más adelante los distintos tipos de formatos y las optimizaciones que podemos hacer lograr la mejor relación pesocalidad de imagen.
Imágenes vectoriales
A diferencia de la imágenes de raster que son representadas por un conjunto de puntos de una “malla”, la imágenes basadas en vectores utilizan primitivas geométricas como puntos y curvas para definir los diferentes elementos de la imagen, estas primitivas están basadas en ecuaciones matemáticas lo que tiene como consecuencia un peso mucho menor de la imagen y la posibilidad de escalamiento teóricamente infinito sin perder calidad. En la figura 8 podemos observar un ejemplo de este comportamiento.
Figura 8. Comparación de un escalamiento de 7 veces el tamaño original de una porción de una imagen y el resultado comparado tomando la imagen original en vectores y el raster (bitmap). Tomado de www.wikipedia.org
¿Por qué entonces no utilizamos siempre imágenes vectoriales? La respuesta es que no siempre es posible, esto se debe a la misma razón que hace a las imágenes vectoriales livianas y escalables impide que puedan reproducir la realidad fielmente, es decir, no existen fotos vectoriales. La realidad es muy compleja para ser expresada como una combinación de primitivas geométricas y ecuaciones matemáticas (Para mayor información sobre este tema revisar el libro “The Algorithmic Beauty of Plants” escrito por Aristid Lindenmayer donde se describen diferentes patrones matemáticos para “generar” plantas). Sin embargo en la medida de lo posible es aconsejable trabajar con vectores.
El otro problema con las imágenes vectoriales consiste en estas requieren de un software que las interprete, como por ejemplo FLASH, y este no necesariamente va estar disponible en contraste con las imágenes raster que pueden ser mostradas por cualquier navegador.
Una práctica frecuente en desarrollo de sitios web consiste en “vectorizar” imágenes raster de baja resolución para luego regenerarlas en la resolución adecuada para el proyecto. “Vectorizar” una imagen raster consiste el “calcar” la imagen original utilizando líneas y primitivas geométricas. Otra aplicación
muy común del uso de vectores es para generar ilustraciones a partir de una fotografía. Ver figura 9
Figura 9. Ejemplo de una ilustración realizada mediante es uso del dibujo vectorial a partir de una fotografía. Tomado de la propuesta para la página web de la fundación de neurociencias Cogniávila.
Podemos decir entonces que ambas representaciones tienen uso en el desarrollo de sitios web y su utilización va a depender de lo que se quiere mostrar: Una representación fiel de la realidad (fotografía) o una simplificación de esta (Esquema, dibujo o ilustración).
Formatos En la actualidad existen muchos formatos con diferentes tipos de compresión para guardar las imágenes. Para la web los más usados son JPEG, GIF y PNG para imágenes raster, imágenes vectoriales suelen ser utilizadas en animaciones en FLASH.
Escoger el formato correcto y nivel de compresión acorde es crucial para creación de sitios web, el compromiso pesocalidad de imagen influye directamente tanto en la calidad visual como en la velocidad de los sitios web y ambos son factores determinantes para el éxito
La compresión de imágenes consiste en la aplicación de algoritmos de compresión de datos en imágenes digitales, estos pueden ser sin perdida “lossless” o con perdida “lossy”. La compresión sin perdidas de utiliza para algunas aplicaciones medicas u otras aplicaciones donde la fidelidad de la imagen sea determinante. En el caso del desarrollo de sitios web es más importante la reducción del peso que la fidelidad de la imagen. La mayoría de los formatos con perdida basan en la transcodificación del formato original de mapa de bits, es decir, en lugar de representar la imagen como un matriz de puntos con coordenadas en el espacio RGB, utilizan diferentes métodos para representar los colores usualmente descartando la información que el ojo humano es menos sensible a percibir. Esto trae como consecuencia que el navegador debe poder interpretar las imágenes que creemos utilizando estos métodos de compresión. En caso de los sitios web es seguro utilizar imágenes en JPEG, GIF y PNG, porque los navegadores cuentas con la capacidad de interpretar estos formatos.
JPEG Su nombre viene de “Joint Photographic Experts Group” que fue el comité que creo su estándar de compresión. Este formato se utiliza para comprimir imágenes con colores continuos como fotografías.
GIF Su nombre proviene de “Graphics Interchange Format” y fue introducido por la compañía CompuServe en 1987. Debido a la forma en que representa las imágenes (reduciendo en espacio de color) se utiliza para comprimir imágenes con colores sólidos como logos o ilustraciones. También puede contener información sobre transparencia y permite hacer animaciones. Aunque esto último se ha dejado de usar tanto en beneficio de la animaciones en FLASH con menos peso y mayores posibilidades de animación.
PNG PNG significa “Portable Network Graphics” y se creo como resultado de la patente lograda por Unisys sobre el formato GIF. Al ser un formato más nuevo PNG es más flexible y eficiente para guardar imágenes con transparencias permitiendo codificaciones más avanzadas como el canal alpha que permite tener niveles de transparencia en diferentes lugares de la imagen (ver figura 10)
Figura 10. Imagen en PNG con canal alpha. Nótese los diferentes niveles de transparencias en los dados. Tomado de wikipedia.org
PNG es también un formato muy bueno para guardar imágenes con texto o con líneas marcadas comparado con el JPEG, pero con un desempeño similar al GIF.
Criterios para la optimización de imágenes
Basados en la información de los formatos anteriormente mencionada podemos resumir en el siguiente cuadro los criterios de escogencia de formato basados en las características de la imagen.
Cuadro 1. Criterios para la escogencia de formato basado en las características de transparencia y color.
Sin transparencia
Colores continuos
Transparencia Simple Niveles de t ransparencia
JPEG PNG PNG
GIF GIF PNG Colores sólidos