Imagen analógica y digital
Una imagen analógica es cualquier documento impreso con métodos tradicionales sobre un soporte físico. Fotografías de carrete, diapositivas o negativos.
Una imagen digital es aquella obtenida o creada en forma de archivo informático. Como imágenes escaneadas o creadas con un programa.
Dentro de las imágenes digitales existen dos tipos: las imágenes vectoriales y las imágenes en mapa de bits (o formadas por píxeles).
Imagen en mapa de bits
Las imágenes en mapa de bits se forman a base de píxeles. Un píxel es un cuadrado de color que en conjunto con otros forma una imagen. La palabra píxel viene de la contracción picture element o elemento de imagen. Al ser una nomenclatura y de origen anglosajón, se agrupan en pulgadas que veremos más adelante en el tema de la resolución.
En la imagen vemos cómo se aprecia el píxel si hacemos zoom.
Los píxeles tienen la ventaja de poder formar degradados suaves, transiciones de cualquier tipo, emulando así desde imágenes fotográficas hasta el más simple dibujo.
Aparentemente los píxeles son imperceptibles al ojo humano porque son de un tamaño muy muy pequeño. Cuanto más grande es el píxel, más se aprecia y la imagen tiene menor calidad, y viceversa.
En este ejemplo vemos como el círculo negro se ve más definido cuanto menor es el tamaño del píxel (es decir, cuanto más grande es la resolución).
Formatos de imagen en mapa de bits
Los formatos de imagen en mapa de bits o a base de píxeles más comunes son:
LOS CLÁSICOS:
JPG
JPEG o JPG (Joint Photographic Experts Group o Grupo Conjunto de Expertos de Fotografía) que es el más extendido y triunfa en la web por su relación calidad/peso, ya que una imagen en .jpg pesa poco y se ve bien. Además permite compresión (destructiva) para ajustar la calidad y el peso y también puede usarse en impresión cuando está en su máxima calidad.
GIF
El formato GIF (Graphics Interchange Format o Formato de Intercambio de Gráficos) es el único que permite animación con varias imágenes reproduciéndose de manera sucesiva. Es un formato ligero y también permite transparencia, pero en este caso sus bordes son muy poco definidos y con dientes de sierra. Es principalmente usado para la web, redes sociales y Whatsapp y su uso en imágenes estáticas es recomendable cuando hay colores planos sin mucho degradado y detalle.
PNG y APNG
Tenemos también el PNG (Portable Network Graphics o Gráficos de red portátiles) que a diferencia del .jpg pesa más ya que aporta mayor calidad a la imagen. No permite compresión y puede estar en 8 o 24 bits, lo que influye en su calidad. Además es uno de los dos formatos que permite que el fondo de la imagen sea transparente, dejando sus bordes nítidos y limpios incluso con sombreados o luces.
Además, el APNG es un formato PNG que permite animación. Es un sustituto del GIF ya que pesa menos y su calidad es mayor, pero todavía falta tiempo para destronar al rey de la animación en imagen.
TIF
TIF o TIFF (Tagged Image File Format o Formato de archivo de imagen etiquetado) es el formato de imagen en mapa de bits de mayor calidad y tamaño o peso. Se utiliza para imprenta y también permite compresión, destructiva cuando se comprime en .jpg, y no destructiva cuando se comprime en LZW. También permite transparencia y ser guardado por capas, pero no puede ser usado en web.
EL VIEJUNO:
WBMP
Cabe mencionar también el Wireless Bitmap, un formato de archivo de imágenes monocromo optimizado para el uso en web. Son en blanco y negro así que el tamaño de la imagen es mínimo. Un pixel negro se expresa mediante un 0 y uno blanco a través de un 1.
LOS NUEVOS CHICOS DEL BLOQUE
Aquí podéis leer más sobre estos dos tipos de archivos:
WEBP o WEPPY
Diseñado por Google en 2011, este formato tiene más calidad y menos peso que el JPG (puede tener compresión con o sin pérdida y metadatos), permite transparencia como el PNG y animación como el GIF. Es un todo en uno que ya está muy presente en la web… Y más que lo veremos.
Comparativa de la misma imagen en tres formatos. (Imagen de okbinteractive studio)
AVIF
Pero en 2019 Alliance for Open Media (Organización sin ánimo de lucro que tiene detrás a Netflix, Amazon, Google y Apple) creó el que será el rey indiscutible… De momento. Es más ligero incluso que Webp, y también permite transparencia y animación. En definitiva, la mejor opción que puedes usar para web, siempre que los navegadores lo admitan, aunque eso es solo cuestión de tiempo.
Comparativa de la misma imagen en tres formatos. (Imagen de okbinteractive studio)
Softwares
Los programas de edición de imágenes en mapa de bits más comunes son Adobe Photoshop y Affinity Photo (ambos de pago) y los gratuitos Gimp y Krita. También hay editores de mapa de bits online como Photopea.
¿Cómo distinguimos una imagen vectorial de una en mapa de bits?
La principal diferencia radica en sus bordes. Si vemos una imagen en mapa de bits y vectorial juntas, y la primera tiene una buena resolución, no habrá manera de distinguirlas a simple vista. Pero si hacemos zoom y nos fijamos en los bordes, veremos que la imagen compuesta de píxeles empieza a crear escalones o dientes de sierra mientras que la imagen vectorial se verá con un borde nítido y perfectamente definido.
Imagen en mapa de bits e imagen vectorial.
¿Cuándo usar una imagen vectorial y una en mapa de bits?
El principal motivo suele ser el uso definitivo que va a tener esa imagen. Así, un logotipo siempre se hará en formato vectorial, ya que no sabemos qué usos va a tener a lo largo de su vida por lo que puede ir impreso desde en un bolígrafo a una valla publicitaria. Como los archivos vectoriales pueden ampliarse sin límites, sería un error hacerlo en mapa de bits ya que al ampliarlo se “pixelaría”.
Por ejemplo, si necesitamos hacer un cartel y en él sale una foto, un texto y un logotipo, la fotografía deberá ir en formato de mapa de bits, y el texto y el logotipo en formato vectorial.
En la web, todos los elementos considerados gráficos como logotipos, pictogramas e incluso animaciones vectoriales (o lotties) deben ir en vectorial (SVG) y el resto de imágenes en mapa de bits, dependiendo del uso (JPG para imágenes fotográficas, PNG para transparentes y GIF para animaciones no vectoriales).
Rasterizar, vectorizar y destramar
Rasterizar: (Del inglés raster, sin traducción exacta, podríamos interpretarlo por “rastrillar” o peinar), es pasar una imagen vectorial a mapa de bits. En el proceso tendremos en cuenta la resolución o bien la definición si es para web. Programas como Photoshop o Illustrator al exportar lo hacen automáticamente.
La línea roja representa un triángulo vectorial. Cuando la rasterizamos se convertirá en píxeles.
Vectorizar: Justo lo contrario, es pasar una imagen en mapa de bits a vectorial. La mayoría de las veces se hace a mano, ya que hay procesos digitales como el “Calco interactivo” de Illustrator, pero no son del todo precisos y requieren de un posterior retoque. Siendo a veces más efectivo y rápido el proceso manual, siempre que tengamos un buen manejo del software de dibujo.
Destramar: Es un concepto asociado al escáner. Cuando una imagen que ha sido impresa se escanea, generalmente se nota la trama de puntos que surge de imprimirla. El destramado es un difuminado de los puntos de trama que hace que dé la sensación de continuidad. Este efecto se puede aplicar directamente desde el escáner o después con Photoshop.
