Gráficos vectoriales

Los mapas de Bits

y

Los formatos

Se denomina gráfico vectorial a toda

imagen digital que esté definida por

trazos computarizados, es decir,

mediante elementos gráficos (líneas,

puntos, figuras geométricas, etc.) creados

a través de fórmulas matemáticas.

Claros ejemplos son las ilustraciones o las

tipografías, que se crean a partir de este

tipo de método.

Existen muchos programas de diseño

gráfico e ilustración que permiten

desarrollar esta clase de imágenes, como

el CorelDRAW, Macromedia Freehand o

Macromedia Flash.

Un gráfico vectorial (a diferencia de su

formato contrastante, el mapa de bits),

puede ser escalado, rotado y deformado

sin que esto dañe su definición y calidad.

Esto se debe a que al realizar cualquiera

de esos procedimientos, la computadora

realizará nuevamente la operación

matemática que define a los objetos y los

representará nuevamente.

Además de esta ventaja, un gráfico

vectorial suele ser mucho más liviano

que un mapa de bits, y en algunos casos

también podremos realizar animaciones

con ellos, como con Macromedia Flash.

Una desventaja de las imágenes vectoriales es

que no pueden reproducir fotografías fielmente

o desarrollar imágenes complejas.

Figura 2. En los gráficos vectoriales podremos crear elementos

a partir

de líneas rectas, como polígonos, y también mediante curvas

(mano alzada).

Los mapas de bits

Los mapas de bits, o gráficos rasterizados, son imágenes que están definidas por medio de milimétricos puntos (píxeles), cada uno de ellos con un valor de color y luminosidad determinada, que se ubican dentro de una cuadrícula que representa a la totalidad de la imagen. La proximidad de uno con otro refleja en la pantalla la sensación de una imagen homogénea. Mediante este método es que las imágenes fotográficas pueden digitalizarse (a través de escáneres, cámaras u otro medio digital) y mostrarse en la computadora.

A diferencia de lo que sucede con un gráfico

vectorial, al escalar o deformar un mapa de bits,

éste perderá definición y calidad (siempre

dependiendo de los valores que se modifiquen),

debido a que al aumentar el valor de un píxel,

éste tendrá que modificar también su tamaño y,

por ende, en la pantalla se verá más grande y

no será realista el efecto que produce en la

continuación de uno con otro. Por eso es que

los mapas de bits dependen mucho de la

resolución que posea la imagen, y también de

la cantidad de colores que tenga su paleta.

Figura 3. Imagen mapa

de bits. Aquí notamos

que al escalar un

sector, los píxeles se

notan más, perdiendo

así su calidad original.

Los formatos

Existe una gran variedad de formatos o extensiones que podemos manejar para incluir en nuestras páginas web, y la mayoría posee la característica de pertenecer al grupo de los mapas de bits, desde el popular JPG hasta formatos mucho más comprimidos y avanzados como el PNG. A continuación enumeramos y explicamos los principales.

BMP (Bitmap): es el formato más sencillo en cuanto a la conformación de sus estructuras y no realiza ningún tipo de compresión en sus datos, por lo que normalmente suele tener un gran tamaño, aunque no puede negarse que su calidad es buena y su velocidad de carga también. Los formatos BMP admiten cualquier tipo de resolución y profundidades, desde los 8 hasta los 24 bits.

Su estructura es simple, incluyendo una

cabecera que incorpora los datos básicos de la

imagen, como paleta, resolución, tamaño o

número de colores; luego posee la información

de la imagen en sí, distribuida de izquierda a

derecha y píxel a píxel. Una desventaja es que

no es multiplataforma, ya que sólo 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 estándar por excelencia de las páginas web. Es soportado por la gran mayoría de los navegadores web, puede trabajar a escala de grises, RGB y CMYK. Su mayor característica es la compresión que provee, por lo que se puede almacenar muchas imágenes digitales de alta calidad con pesos de archivo relativamente bajos. La compresión de estos archivos se basa en la eliminación de la información que poseen las imágenes y que el ojo humano no es capaz de distinguir, por ejemplo, en la mayoría de las imágenes de 24 bits. La pérdida de calidad es casi nula, excepto que esta compresión se exagere. Cuando esto ocurre, los daños más notorios se verán 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 animación mediante fotogramas.

GIF (Graphics Interchange Format): se trata también de un formato basado en mapa de bits, y sus características principales son la incorporación de transparencias y la animación. Una desventaja es que sólo 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. También presenta una importante rutina de compresión.

PNG (Portable Network Graphics): se trata de un formato de mapa de bits simple y de alta compresión. Es una buena alternativa para los formatos GIF y JPG. Soporta la transparencia y, aunque se puede guardar un PNG con información sobre fotogramas animados, el navegador no lo reproduce como una animación. 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). También permite la visualización de las imágenes 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

estándar como el RGB, CMYK, etc. Admite

también una gran cantidad de efectos, como

transparencias, suavizados y tipografía editable.

SWF (Shockwave Flash): es el formato de

salida de gráficos y animaciones vectoriales que

utiliza uno de los programas más populares

para diseño web: Macromedia Flash. Estos

archivos son el resultado de los archivos fuente

(FLA) de esta aplicación y son compatibles con

la mayor parte de los navegadores que se

utilizan en la actualidad, siempre mediante el

uso del plugin correspondiente.

La resolución

Podría decirse que la resolución es el tamaño relativo de un componente visual digital. Tomemos como ejemplo la totalidad del monitor: su tamaño absoluto sería el espacio real que ocupa físicamente su pantalla, y se mide en pulgadas, por ejemplo, 14 pulgadas o 17 pulgadas. En contraste, el tamaño relativo o resolución del monitor o pantalla es la cantidad de píxeles que éste soporta, por ejemplo, 800 píxeles horizontales por 600 verticales (800x600) o 1024 píxeles horizontales por 768 píxeles verticales (1024x768).

Estos son ejemplos de resoluciones de pantalla. Para las imágenes y todo documento visual que se reproduzca en una computadora, la resolución se define de igual modo: la cantidad de píxeles horizontales por la cantidad de píxeles verticales. La resolución es relevante sobre todo en los documentos de mapa de bits, ya que son los que se determinan mediante píxeles. En el contexto de las imágenes digitales, la resolución puede englobar varios conceptos, como la resolución de archivo digital, la resolución de impresión, resolución de digitalización, resolución de semitono, etc., pero el primero de estos conceptos es el más ligado a lo que normalmente se denomina resolución, y está definido por el número de píxeles diferentes con los que cuenta una imagen por unidad de longitud.

Estos valores se miden con la medida de

píxeles por pulgada (PPP o PPI en

inglés, Dots Per Inch). Cuanto mayor sea

esta resolución, mayor será la cantidad de

datos que ésta contenga, y así se

incrementan todos los demás factores

(con sus ventajas y desventajas, como la

calidad y el peso del archivo de imagen).

Otro tipo de resolución es la resolución de muestreo, que es la que se utiliza para determinar las imágenes digitalizadas, es decir, escaneadas. Ésta se define mediante el número de muestras de que se toman por cada pulgada, y se mide en SPI (Samples Per Inch). Cuantas más muestras por pulgada ofrezca la imagen, más cercana estará a la imagen original, es decir, mayor calidad tendrá. Esta medida ya no se utiliza mucho. También encontramos la resolución de impresión como una de las principales clasificaciones dentro de este concepto. Se trata de la capacidad que tiene la impresora para la organización binaria de la imagen, es decir, los puntos de tinta o tóner por pulgada que se colocará en el papel para la impresión. Su medida son los DPI (Dots Per Inch), y a más puntos, mejor calidad de impresión. Finalmente, debemos nombrar a la resolución de semitono o trama, definida como la capacidad de impresión de tramas en escalas de grises para representar tonos continuos. Se mide en LPI (Lines Per Inch) y es más utilizada en gráfica que en Web.

Por supuesto que en nuestros proyectos Web

debemos usar lo que más nos convenga

gráficamente, por lo tanto, lo más importante

será evaluar la resolución del archivo digital, ya

que definirá su calidad de visualización 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 página lenta y fastidiosa.

Por eso valoraremos mucho el trabajo con

gráficos vectoriales y con mapas de bits no

demasiado pesados.