1. Preparación de imágenes

2. 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

3. 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
peso­calidad 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.

4. 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

5. 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).

6. 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 peso­calidad 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)

7. 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.
Sin transparencia Transparencia Simple Niveles de t ransparencia
Colores continuo s JPEG PNG PNG
Colores sólidos GIF GIF PNG
Cuadro 1. Criterios para la escogencia de formato basado en las características de
transparencia y color.