Types of images - yourtechnologyweb

Graphic representation is all about drawings and images. While hand drawing is made on a physical support, a sheet of paper for example, with computer drawing we create digital images, that is, images that are stored on a computer. To better understand how CAD software works it is fundamental to understand how a digital image is created and the different types of digital images that exist.

Different types of digital images.

There are two very different ways in which image information can be saved in a computer. Now we’ll see the main differences between them:

Bitmap images.

Bitmap images are digital images made of a rectangular grid of little squares each of which is assigned a specific color. Those little squares that make a bitmap image are called pixels. Most of the images that we deal with in our daily life, those that we make with our mobile phone or with any camera for example, belong to this group. The reason is that this technique is the easiest way to represent real images, that is, images of people, animals, landscapes… Besides it also has many similarities with artistic drawing (mainly with pointillism) which, after all, is about adding little colored dots (or other shapes) over a paper or a canvas.

PNG and JPEG file-formats are typical of this kind of image.

I’m sure you’ve sometimes checked how when zooming in an image those pixels we talked about are perfectly visible. If it happens it is because you are looking at a bitmap image. This is what happens in the image below when zooming over the dog’s eye:

When you can directly see the pixels of a image we say that it is pixelated. This usually happens when zooming in images with a low quality. But what is it a low quality image?

The quality of a bitmap image is directly related to the number of pixels it has. The more pixels the better the image quality will be. An image made of a lot of pixels can be zoomed and still look great. For example, the image above is a grid of 560×560 pixels, that is, more than 300.000 pixels have been used to represent the dog. Therefore it is a good quality image but even like that it gets pixelated when zoomed too much.

Note: as usually bitmap images are made of thousands of pixels it is common tu use the megapixel (Mp) and not the pixel as the unit for the quality of an image. An image of 1Mp is a bitmap image with one million pixels. For example, if your mobile phone has a 16Mp camera it means that can take photos of 16 million pixels.

Going back to the previous example, if the same dog was represented in an image with a lower number of pixels it would lose some quality. This is what happens when an image is compressed. The first image of the dog is the original one while the rest have been progressively compressed till the last one, that just have 10% of the number of pixels of the original one:

If, on the contrary, a very basic shape is to be represented not so many pixels will be necessary. For example, to draw the «L» below a 50×50 pixels image has been used:

To sum up, bitmap images:

Are made of a rectangular grid of little squares called pixels. Each pixel is assigned a color.
The highest the number of pixels of an image the best its quality will be. Usually, the number of pixels is measured in megapixels (Mp), that is, millions of pixels.
A good quality image (one with a lot of pixels) can be zoomed and still look great.
A bad quality image will be pixelated as soon as a little zoom is done.
This kind of image is the best option to represent real scenes.
Bitmap images are usually stored in PNG or JPEG file formats.

Vector images (or vector graphics).

Si bien las imágenes de mapa de bits son las que más utilizamos en nuestra vida diaria, existe otro tipo de imágenes que son las que se utilizan en los programas CAD: las imágenes vectoriales.

En este caso, la forma en que se guarda la información de la imagen es completamente distinta. En una imagen vectorial no hay un conjunto de píxeles de diferentes colores, sino una descripción de los elementos geométricos que la componen. Veamos un ejemplo.

Fíjate en la siguiente imagen:

Si se tratara de una imagen de mapa de bits esta consistiría en una serie de píxeles de color naranja, blanco verde y negro. Sin embargo, existe otra forma en la que podemos almacenar la información de la imagen. Describiéndola de la siguiente manera:

Todo el fondo es naranja.
Hay un círculo blanco de diámetro igual a 80mm cuyo centro esta en la posición x=50 y = 135 (en milímetros).
Hay un pentágono regular, con el vértice apuntando hacia arriba cuyo lado mide 40mm, con un borde verde de 5mm, cuyo interior es de color naranja y cuyo centro está en la posición x=150 y = 115.
Por último, hay un rectángulo negro de 80mm de base y 40mm de altura, cuyo centro está en la posición x=130 y=35.

Como puedes ver, ha sido posible descomponer la imagen en diferentes elementos geométricos e indicar su color y ubicación. Al almacenar la información de esta manera es posible ampliar o disminuir una imagen todo lo que se quiera sin que pierda calidad.

Este tipo de imágenes deben ser guardadas en unos formatos específicos, algunos de los más empleados son: SVG, PDF y EPS.

Todos los programas CAD se basan en este tipo de imágenes para lograr diseños de buena calidad. Cada vez que añadimos un nuevo elemento en este tipo de programas, un cubo, un cilindro…, lo que estamos haciendo no es colorear un cierto número de píxeles de la pantalla, sino crear un elemento geométrico con unas características determinadas (tamaño, color, posición…). Abajo se muestra un ejemplo del programa de CAD en 3D, Tinkercad. Puedes comprobar cómo se puede acercar la imagen todo lo que se desee y la definición de las distintas partes del diseño no se va a ver afectada:

Lo mismo ocurre cuando trabajas con un programa como Word o Power Point. En este tipo de programas los textos, gráficas, formas y demás elementos son en realidad imágenes vectorizadas. Por ese motivo, por mucho zoom que hagas en la imagen, esta nunca se va a distorsionar. Abajo se muestra un ejemplo de texto en Word, a la izquierda con el zoom al 100%, y a la derecha con el zoom al 500%. Puedes comprobar cómo, pese a haberse acercado mucho la imagen de la pantalla las letras de la imagen derecha se siguen viendo perfectamente definidas:

Por el contrario, si utilizas un programa de mapa de bits (el más conocido es el Paint) podrás comprobar cómo el zoom sí que afecta a la calidad de la imagen. De hecho si haces el suficiente zoom empezarás a ver cómo el dibujo se pixela. En la imagen de la izquierda se muestra un círculo dibujado con Paint con un zoom del 100%. En este caso, al aumentar el zoom al 500% se puede apreciar perfectamente cómo la imagen está formada por píxeles:

En las imágenes de abajo se puede ver la diferencia al hacer zoom en una imagen de mapa de bits (izquierda) y en una imagen vectorial (derecha)

Inicialmente es dificil distinguir una imagen de la otra:

Pero al acercar la imagen hacia un punto se empieza a ver cómo los bordes de la imagen de mapa de bits se difuminan, mientras que en la imagen vectorial continuan perfectamanete definidos:

Y la diferencia se hace aún más evidente si se continua acercando la imagen:

Sin embargo, las imágenes vectoriales presentan un problema, al estar formadas por elementos geométricos no son adecuadas para representar imágenes reales: personas, animales, paisajes… Por eso se emplean principalmente en el diseño de logos, de carteles publicitarios… y como hemos adelantado antes, en los programas CAD.

En resumen, las imágenes vectoriales:

Contienen información acerca delos elementos geométricos que las componen: formas, colores, tamaños, posiciones…
Permiten ser ampliadas de manera indefinida sin perder calidad.
Son muy adecuadas para el diseño de logos y otras composiciones formadas a partir de elementos geométricos no muy complejos.
Se suelen guardan en formatos: SVG, PDF o EPS.
No son adecuadas para representar elementos de la naturaleza.

Vectorización de imágenes.

Por último, debes saber que es posible transformar una imagen de mapa de bits en una imagen vectorial. A ese proceso se le llama vectorización. Vectorizar una imagen consiste en descomponerla en elementos geométricos sencillos que describan las diferentes partes de la imagen lo más fielmente posible.

Existen programas online gratuitos que permiten llevar a cabo este proceso. Sin embargo, como te puedes imaginas, este proceso sólo es posible llevarlo a cabo cuando la imagen de mapa de bits contiene elementos que pueden ser fácilmente asemejados a figuras geométricas. Si tratas de vectorizar una imagen de una persona o de un animal los resultados pueden ser catastróficos.

Abajo puedes ver el resultado de vectorizar una composición creada con el programa Paint (mapa de bits). La imagen de la izquierda es una imagen de mapa de bits de tan sólo 300×300 píxeles, por eso, sobre todo en los elementos curvos, se pueden apreciar los píxeles. En la imagen de la derecha, se muestra esa misma imagen, pero vectorizada, por lo que la imagen ha pasado de ser un conjunto de pixeles a un conjunto de elementos geométricos adecuadamente distribuidos. Para ello se ha utilizado el programa Autotracer.

Puedes descargarte las dos imágenes, haciendo click en cada una de ellas, para ver la diferencia. La de la izquierda tiene formato PNG, por tanto se puede abrir con cualquier programa de visualización de fotos. La de la derecha está en formato SVG, que se puede abrir con cualquier navegador de internet (pero es necesario descargarla antes).