Grficos vectoriales

Los mapas de Bits

y
Los formatos

Se denomina grfico vectorial a toda

imagen digital que est definida por
trazos computarizados, es decir,
mediante elementos grficos (lneas,
puntos, figuras geomtricas, etc.) creados
a travs de frmulas matemticas.
Claros ejemplos son las ilustraciones o las
tipografas, que se crean a partir de este
tipo de mtodo.

Existen muchos programas de diseo

grfico e ilustracin que permiten
desarrollar esta clase de imgenes, como
el CorelDRAW, Macromedia Freehand o
Macromedia Flash.
Un grfico vectorial (a diferencia de su
formato contrastante, el mapa de bits),
puede ser escalado, rotado y deformado
sin que esto dae su definicin y calidad.

Esto se debe a que al realizar cualquiera

de esos procedimientos, la computadora
realizar nuevamente la operacin
matemtica que define a los objetos y los
representar nuevamente.
Adems de esta ventaja, un grfico
vectorial suele ser mucho ms liviano
que un mapa de bits, y en algunos casos
tambin podremos realizar animaciones
con ellos, como con Macromedia Flash.

 Una desventaja de las imgenes vectoriales es

que no pueden reproducir fotografas fielmente
o desarrollar imgenes complejas.

Figura 2. En los grficos vectoriales podremos crear elementos

a partir
de lneas rectas, como polgonos, y tambin mediante curvas
(mano alzada).

Los mapas de bits

Los mapas de bits, o grficos rasterizados, son
imgenes que estn definidas por medio de
milimtricos puntos (pxeles), cada uno de ellos
con un valor de color y luminosidad
determinada, que se ubican dentro de una
cuadrcula que representa a la totalidad de la
imagen. La proximidad de uno con otro refleja
en la pantalla la sensacin de una imagen
homognea. Mediante este mtodo es que las
imgenes fotogrficas pueden digitalizarse (a
travs de escneres, cmaras u otro medio
digital) y mostrarse en la computadora.

 A diferencia de lo que sucede con un grfico

vectorial, al escalar o deformar un mapa de bits,
ste perder definicin y calidad (siempre
dependiendo de los valores que se modifiquen),
debido a que al aumentar el valor de un pxel,
ste tendr que modificar tambin su tamao y,
por ende, en la pantalla se ver ms grande y
no ser realista el efecto que produce en la
continuacin de uno con otro. Por eso es que
los mapas de bits dependen mucho de la
resolucin que posea la imagen, y tambin de
la cantidad de colores que tenga su paleta.

 Figura 3. Imagen mapa

de bits. Aqu notamos
que al escalar un
sector, los pxeles se
notan ms, perdiendo
as su calidad original.

Los formatos
Existe una gran variedad de formatos o extensiones que podemos
manejar para incluir en nuestras pginas web, y la mayora posee
la caracterstica de pertenecer al grupo de los mapas de bits,
desde el popular JPG hasta formatos mucho ms comprimidos y
avanzados como el PNG. A continuacin enumeramos y
explicamos los principales.
BMP (Bitmap): es el formato ms sencillo en cuanto a la
conformacin de sus estructuras y no realiza ningn tipo de
compresin en sus datos, por lo que normalmente suele tener un
gran tamao, aunque no puede negarse que su calidad es buena y
su velocidad de carga tambin. Los formatos BMP admiten
cualquier tipo de resolucin y profundidades, desde los 8 hasta los
24 bits.

 Su estructura es simple, incluyendo una

cabecera que incorpora los datos bsicos de la
imagen, como paleta, resolucin, tamao o
nmero de colores; luego posee la informacin
de la imagen en s, distribuida de izquierda a
derecha y pxel a pxel. Una desventaja es que
no es multiplataforma, ya que slo es
compatible con PC y MAC OS. Por eso, si los
incorporamos en un sitio, solamente Internet
Explorer podr mostrarlos en pantalla.

JPEG o JPG (Joint Photographic Experts Group): es el

formato estndar por excelencia de las pginas web. Es
soportado por la gran mayora de los navegadores web, puede
trabajar a escala de grises, RGB y CMYK. Su mayor
caracterstica es la compresin que provee, por lo que se puede
almacenar muchas imgenes digitales de alta calidad con pesos
de archivo relativamente bajos. La compresin de estos archivos
se basa en la eliminacin de la informacin que poseen las
imgenes y que el ojo humano no es capaz de distinguir, por
ejemplo, en la mayora de las imgenes de 24 bits. La prdida de
calidad es casi nula, excepto que esta compresin se exagere.
Cuando esto ocurre, los daos ms notorios se vern en los
contrastes, ya que se producen en ellos algunas zonas borrosas,
entre otras cosas. No permite transparencias mediante canales
alfa o la posibilidad de animacin mediante fotogramas.

GIF (Graphics Interchange Format): se

trata tambin de un formato basado en
mapa de bits, y sus caractersticas
principales son la incorporacin de
transparencias y la animacin. Una
desventaja es que slo soporta hasta 256
colores en 8 bits, por lo que su calidad de
imagen no es demasiado buena. Pese a
esto, este formato es muy utilizado en
Internet debido a las dos posibilidades que
ofrece. Tambin presenta una importante
rutina de compresin.

 PNG (Portable Network Graphics): se trata de

un formato de mapa de bits simple y de alta
compresin. Es una buena alternativa para los
formatos GIF y JPG. Soporta la transparencia y,
aunque se puede guardar un PNG con
informacin sobre fotogramas animados, el
navegador no lo reproduce como una
animacin. Las transparencias en PNG son de
mucha mejor calidad, ya que a diferencia de los
GIF, soporta una paleta de colores mucho
mayor (hasta 48 bits). Tambin permite la
visualizacin de las imgenes de manera
entrelazada, es decir, progresiva.

 SVG (Scalable Vector Graphics): este formato

vectorial es el primero de ellos en proponer la
compatibilidad con HTML, almacenando el
sistema de vectores mediante un sistema de
etiquetas propio. Esto resulta muy beneficioso
ya que debido a ello, puede ser modificado
mediante cualquier editor de texto simple (al
igual que el HTML o el XML). Maneja 24 bits de
profundidad de color y los sistemas de paleta
estndar como el RGB, CMYK, etc. Admite
tambin una gran cantidad de efectos, como
transparencias, suavizados y tipografa editable.

 SWF (Shockwave Flash): es el formato de

salida de grficos y animaciones vectoriales que
utiliza uno de los programas ms populares
para diseo web: Macromedia Flash. Estos
archivos son el resultado de los archivos fuente
(FLA) de esta aplicacin y son compatibles con
la mayor parte de los navegadores que se
utilizan en la actualidad, siempre mediante el
uso del plugin correspondiente.

La resolucin
Podra decirse que la resolucin es el tamao
relativo de un componente visual digital.
Tomemos como ejemplo la totalidad del monitor:
su tamao absoluto sera el espacio real que
ocupa fsicamente su pantalla, y se mide en
pulgadas, por ejemplo, 14 pulgadas o 17
pulgadas. En contraste, el tamao relativo o
resolucin del monitor o pantalla es la cantidad
de pxeles que ste soporta, por ejemplo, 800
pxeles horizontales por 600 verticales
(800x600) o 1024 pxeles horizontales por 768
pxeles verticales (1024x768).

 Estos son ejemplos de resoluciones de pantalla. Para

las imgenes y todo documento visual que se
reproduzca en una computadora, la resolucin se define
de igual modo: la cantidad de pxeles horizontales por la
cantidad de pxeles verticales. La resolucin es
relevante sobre todo en los documentos de mapa de
bits, ya que son los que se determinan mediante pxeles.
En el contexto de las imgenes digitales, la resolucin
puede englobar varios conceptos, como la resolucin
de archivo digital, la resolucin de impresin,
resolucin de digitalizacin, resolucin de semitono,
etc., pero el primero de estos conceptos es el ms
ligado a lo que normalmente se denomina resolucin, y
est definido por el nmero de pxeles diferentes con los
que cuenta una imagen por unidad de longitud.

Estos valores se miden con la medida de

pxeles por pulgada (PPP o PPI en
ingls, Dots Per Inch). Cuanto mayor sea
esta resolucin, mayor ser la cantidad de
datos que sta contenga, y as se
incrementan todos los dems factores
(con sus ventajas y desventajas, como la
calidad y el peso del archivo de imagen).

 Otro tipo de resolucin es la resolucin de muestreo, que es la que

se utiliza para determinar las imgenes digitalizadas, es decir,
escaneadas. sta se define mediante el nmero de muestras de
que se toman por cada pulgada, y se mide en SPI (Samples Per
Inch). Cuantas ms muestras por pulgada ofrezca la imagen, ms
cercana estar a la imagen original, es decir, mayor calidad tendr.
Esta medida ya no se utiliza mucho. Tambin encontramos la
resolucin de impresin como una de las principales
clasificaciones dentro de este concepto. Se trata de la capacidad
que tiene la impresora para la organizacin binaria de la imagen, es
decir, los puntos de tinta o tner por pulgada que se colocar en el
papel para la impresin. Su medida son los DPI (Dots Per Inch), y a
ms puntos, mejor calidad de impresin. Finalmente, debemos
nombrar a la resolucin de semitono o trama, definida como la
capacidad de impresin de tramas en escalas de grises para
representar tonos continuos. Se mide en LPI (Lines Per Inch) y es
ms utilizada en grfica que en Web.

 Por supuesto que en nuestros proyectos Web

debemos usar lo que ms nos convenga
grficamente, por lo tanto, lo ms importante
ser evaluar la resolucin del archivo digital, ya
que definir su calidad de visualizacin en la
pantalla y su peso en disco. Recordemos que
para los sitios Web, los archivos que incluyamos
no deben ser demasiado pesados, para no
volver la carga de la pgina lenta y fastidiosa.
Por eso valoraremos mucho el trabajo con
grficos vectoriales y con mapas de bits no
demasiado pesados.