Gráficos digitales: Vectoriales y Mapas de Bits

Las computadoras procesan y despliegan las imágenes de dos maneras diferentes los gráficos digitales: gráficos vectoriales y los gráficos de mapas de bits o gráficos raster.

Gráficos vectoriales

Están formados por líneas formadas por ecuaciones matemáticas. Cada línea esta delimitada por dos puntos llamados nodos. Las líneas curvas son llamadas curvas Bézier y obtienen su forma gracias a unas pequeñas asas adjuntas a los nodos.

Los gráficos vectoriales son muy ligeros, es decir, pesan muy pocos bytes. También son independientes de la resolución, o sea, no se distorsionan cuando los agrandas. Desafortunadamente los colores que puede representar un vector son limitados a color de relleno y color de contorno.

Los utilizamos en textos, logotipos, dibujos, CAD, diseños para corte por navaja, láser o CNC.

En el siguiente video de Peter Nowell nos muestra como se crean las curvas Bézier.

A veces el crear este tipo de gráficos digitales puede resultar un poco engorroso, ya que las curvas se crean arrastrando las asas de una forma magnética. Una manera práctica de crear estas curvas es dividir imaginariamente el vector en tercios y jalar las asas a la altura de los tercios.

Gráficos de mapas de bits o ráster

Este tipo de gráficos digitales esta formado por una matriz es decir, una cuadrícula, de pixeles. Cada pixel puede almacenar un color diferente. Los gráficos de mapas de bits son muy pesados ya que deben de almacenar el color de cada pixel del cual está formada. Como están formados de pieles, están limitados a formas rectangulares además que al agrandarse los pixeles comienzan a hacerse más visibles. Esto ocasiona que la imagen se pixeleé y pierda definición.

Profundidad de Color

Podemos llamar profundidad de color a la cantidad de colores que se pueden crear en base a los nmero que se pueden representar en determinados bits de almacenamiento. Esto es porque cada pixel dentro de las imágenes raster almacena un color.

Las computadoras se basan en el sistema binario, es decir, ceros y unos. 8 bits representan un Byte y éste puede almacenar hasta 256 números del sistema decimal. Si asignamos un color a cada numero podemos decir que una imagen de 8 bits puede representar únicamente 256 colores. Este tipo de profundidad de color es el que utilizaba por ejemplo el NES.

La profundidad de color más utilizada es la RGB/8 que tiene 3 canales. Esta significa Rojo, Verde y Azul en 8bits. Es decir, 256 niveles de Rojo, 256 niveles de Verde y 256 niveles de Azul. 256 × 256 × 256 = 16,777,216 colores en 3 bytes por pixel.

Resolución de la imagen

La resolución es el tamaño del pixel. La unidad mas común para medir el tamaño del pixel son los puntos por pulgada, o dpi por sus siglas en inglés. A mayor resolución mas pequeño es el pixel y viceversa. Esto es porque en una pulgada caben cierta cantidad de pixeles según sea la resolución. Las pantallas de las computadoras tienen diferentes tamaños y resoluciones por lo que se toma una medida estándar de 72dpi, excepto por las pantallas Apple retina que deben de llevar 220dpi. Por otro lado las impresiones deben de llevar al menos 300dpi para que sea una imagen definida.

Resolución de una imagen de mapas de bits

¿Cómo hacer para imprimir una imagen y no salga pixelada?

Es común que bajemos imágenes de Internet y al querer imprimirlas salgan pixeladas. Esto es porque, como mencione anteriormente, las imágenes para pantalla tienen pixeles más grandes (72dpi) y para que una impresión salga nítida se requieren pixeles más pequeños(300dpi).

Entonces para hacer que una imagen no salga pixelada lo que hay que hacer es buscar una imagen que tenga muchos pixeles y sea al menos 4 veces mas grande de lo que queremos. Luego esta imagen se hace pequeña y se ajusta al tamaño deseado. Al hacer esto la imagen hace mas chicos los pixeles y por consiguiente aumenta la resolución y nuestra impresión saldrá nítida.

Sistemas de compresión.

Como las imágenes de mapas de bit son muy pesadas es necesario reducir su tamaño en bytes para poder traspasarlas por Internet más rápidamente además de ahorrar espacio. Existen diferentes algoritmos de compresión que son sumamente efectivos en determinadas condiciones. Vamos a verlos a detalle.

JPEG o JPG (Joint Photographers Experts Group)

El sistema de compresión JPG utiliza un algoritmo llamado Interpolación. Mediante este algoritmo se detectan zonas de colores similares y crea una matriz de pixeles en la cual toma los extremos y elimina el resto. Al abrir la imagen solo se abren los pixeles marcados como polos o extremos y el resto lo calcula matematicamente. De esta manera se ahorra muchísimo espacio pero se sufre una perdida de calidad. Se puede ajustar el nivel de compresión sacrificando calidad para disminuir el peso.

GIF ( Graphics Interchange Format)

Los GIF utilizan un algoritmo de compresión llamado Indexación. En la Indexación se hace una comparación de todos los colores similares que existen en la imagen, después los agrupa y los mezcla dando un solo color. En total puede hacer un grupo máximo de 256 colores. De esta manera elimina la información de color ahorrando espacio pero perdiendo calidad. Los GIF soportan transparencia y múltiples cuadros lo que les permite simular animación.

PNG(Portable Network Graphics)

El formato PNG utiliza un sistema de compresión sin perdida de calidad utilizando un algoritmo lógico de repetición de patrones. El PNG permite tambien guardar metadatos mas complejos y transparencias de alta calidad.

¿Cuándo debo utilizar JPG, GIF o PNG?

Debido a sus características, cada algoritmo funciona mejor en ciertos gráficos. Lo primero que hay que tener en consideración es la cantidad de colores, un JPG puede reproducir mas de 16 millones de colores mientras que el GIF solamente 256. Asi que si tenemos una fotografía con muchas flores y pequeños detalles lo ideal es elegir JPG. Si por el contrario nuestra imagen es un gráfico de ventas con ulgunas barras y una flecha roja, al tener pocos colores lo ideal es utilizar GIF. Por último, si queremos un gráfico que tenga mucha calidad y tenga tranparencia muy nitida se puede usar PNG aunque la compresión no sea tan efectiva. El PNG es ideal para pequeños iconos.