digital-tunnel-wallpaper1

Para entender mejor la imagen digital es indispensable conocer y entender algunos conceptos fundamentales como son el formato, la resolución o la profundidad de color. La palabra “digital” significa “representado mediante números”, haciendo referencia por tanto a la representación de imágenes en el entorno tecnológico.

Tipos de imágenes

MAPA DE BITS (o matriciales): la imagen está representada por pequeños puntos rectangulares denominados píxeles. A partir de estos píxeles se forman las imágenes, y a su vez cada píxel está representado por bits de información. Programas que manejan este tipo: Paint, Photoshop, GIMP, Irfanview, etc.

imagen-24-pixelsAunque están relacionados, no hay que confundir el tamaño de imagen con el tamaño de archivo, que es el espacio (expresado habitualmente en Kb o Mb) que ocupa el archivo informático que contiene la información de la imagen, y que es a lo que nos referimos cuando hablamos del “peso” de una imagen.

Ventajas: Fáciles de usar.

Desventajas: Resolución: mayor resolución, mayor detalle y archivos más grandes. Si disminuimos la resolución, disminuye la calidad de imagen. La pérdida de calidad es proporcional al aumento. Si imprimiéramos la imagen a mayor resolución de la que tiene, la disminución de calidad sería notable. Tamaño: número de bytes que ocupa el archivo.

Parámetros importantes para este tipo de imágenes.

  • Pixel: Unidad mínima de visualización para imágenes digitalizadas. Las imágenes digitales están compuestas por píxeles. Las cámaras digitales capturan las imágenes en píxeles. El monitor se visualiza en píxeles. Por tanto, cuantos más píxeles contenga la imagen, mayor será su definición y los detalles que contiene.
  • Resolución: Grado de detalle de una imagen digital, sea escaneada, fotografiada o impresa. La resolución se puede expresar de diversas formas, por ejemplo: ppp (puntos por pulgada), dpi (píxeles por pulgada). La resolución de un monitor se refiere al número de píxeles por pulgada y en una impresora al número de puntos por pulgada. Cuantos más puntos haya en cada pulgada lineal, mayor calidad se obtendrá. El “cambio de resolución” no afecta al tamaño de la imagen en sí.
  • Profundidad de color en bits. Hace referencia al número de bits necesario para representar cada píxel en una imagen. Cuanto mayor sea la profundidad en bits, más colores habrá en la imagen global. Se utiliza 1-bit para imágenes en blanco y negro (sin grises). Cada vez que añade otro “nivel’ de profundidad de color en bits se dobla el número de colores disponibles, es decir, 2-bits = 4 colores, 3-bits = 8 colores, etc. Un ajuste de 8-bits genera 256 colores (o tonos de gris), con resultados adecuados para la Web. La configuración de 24-bits produce 16,7 millones de colores y es la que utilizan la mayoría de las aplicaciones de gama alta, ya que ofrece color con realismo fotográfico. La configuración de 36-bits proporciona miles de millones de colores, para detalles extremadamente finos y una profundidad y claridad excelentes. La mayoría de los escáneres profesionales funcionan a 36-bits.

profundidad-de-color-1

 GRÁFICOS VECTORIALES: las imágenes son tratadas como objetos y definidas mediante fórmulas matemáticas complejas. Programas: Macromedia Freehand, Adobe Illustrator, Flash, Corel Draw, LibreOffice (Draw), Inkscape, etc. Los objetos gráficos pueden ser agrupados, transformados y compuestos en objetos previamente renderizados, y pueden recibir un estilo común.

450px-bitmap_vs_svg-svg
Fuente: wikipedia

La imagen ilustra una diferencia entre mapas de bits e imágenes vectoriales. La imagen vectorial puede ser redimensionada, tanto como se requiera, sin pérdida de calidad de imagen. Esto no es así con un mapa de bits.

Ventajas: Independientes de la resolución. En el proceso de ampliación no sufre ninguna pérdida. Los archivos tienen un tamaño pequeño.

Desventajas: complejidad de creación y tratamiento. Todos los gráficos vectoriales o vectorizados tienen que ser transformados a píxeles cuando se presentan en una pantalla o cuando se requiere su impresión.

Podéis ver un ejemplo de imagen vectorizada y en formato BMP para que observéis las diferencias, sobre todo al ampliar la imagen (ver ejemplo)

Modos de color 

El modo de color expresa la cantidad máxima de datos de color que se pueden almacenar en un determinado formato de archivo gráfico. Hay que diferenciar

ESCALA DE GRISES. Estas imágenes utilizan 256 tonalidades posibles entre el blanco y el negro para representar la imagen de blanco y negro. Si se convierte una imagen modo de color a un modo Escala de Grises y después se guarda y se cierra, sus valores de luminosidad permanecerán intactos, pero la información de color no podrá recuperarse.

RGB: Basado en tres colores primarios: rojo, verde y azul y desde ellos se crea el resto. Imágenes de 24 bits de profundidad de color. Este código de color es el utilizado para imágenes que se mostrarán en monitores de ordenador, televisiones o dispositivos móviles.

CMYK: menos conocido pero más utilizado en imprentas. Cuatro colores: cian, magenta, amarillo y negro. Imágenes de 32 bits de profundidad de color.  Este código de color es el utilizado para impresión. Los colores entre CMYK y RGB no son exactamente iguales.

rgb-y-cmykFuente de imagen: Wikipedia

PANTONE: La compañía Pantone ha definido más de 1.100 colores con un número único. Con este número único te aseguras tener el mismo color en cualquier parte. Los colores Pantone son difíciles de imitar usando CMYK o RGB, ya que los Pantone se crean usando 15 pigmentos base incluyendo negro y blanco. Están pensados para su uso en impresión.

pantone-extended-gamut-guide-banner

RAL: es un código que define un color mediante un conjunto de dígitos. Originalmente la tabla RAL constaba de 40 colores y hoy en día la cifra asciende a 213. Los códigos se definen mediante 4 dígitos, el primero de los cuales define el rango de color.

Los formatos más comunes

BMP (bitmap)

Formato muy antiguo desarrollado para aplicaciones Windows, ya casi en desuso. Las imágenes de mapa de bits se denominan así porque el formato crea un mapa de los píxeles línea a línea. El formato BMP no sufre pérdida y, por tanto, resulta adecuado para guardar imágenes que se desea manipular o ampliar posteriormente.

Ventajas: Mantiene una gran cantidad de información de la imagen.

Inconvenientes: Los archivos pueden tener un tamaño muy grande. Poco útil para su uso en la Web.

GIF (graphics interchange format)

Diseñado específicamente para comprimir imágenes y gráficos creados por ordenador. Los archivos GIF mantienen bordes nítidos. Un archivo comprimido de este modo no experimenta pérdida en la calidad de imagen, permite ser guardado una y otra vez sin pérdida de calidad y puede estar formado por hasta 256 colores (si bien, cuantos menos colores, mayor compresión).

Ventajas: Ideal para páginas Web con gráficos pequeños. Permite crear transparencias con un solo canal (podemos indicar que un color sea o no transparente).

Inconvenientes: no es recomendable para colocar fotografías de alta calidad en la Web o para archivar originales.

Admite grupos de imágenes (gifs animados) en un solo archivo. Gestiona parámetros como son el tipo de transición, el tiempo por fotograma y el ciclo (loop).

JPG o jpeg (joint photographic experts group)

Uno de los dos formatos de imagen más comunes. La compresión JPEG sufre pérdida, lo que significa que, aunque se pierde cierto detalle, ofrece relaciones de compresión excelentes. Al igual que el formato TIF, JPEG admite 16 millones de colores, pero cada vez que se modifica y guarda un archivo JPEG, se pierde algo más de detalle.

Ventajas: Ideal para grandes imágenes fotográficas, sobre todo en la Web.

Inconvenientes: La calidad disminuye cada vez que se guarda el archivo, por lo que no conviene emplearlo para archivar originales.

PNG (Portable Network Graphic)

Es un formato gráfico basado en un algoritmo de compresión sin pérdida. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de contraste.

Ventajas: Ideal en páginas Web para imágenes con grandes áreas de color plano o con pocas variaciones de color (p.e. logotipos, dibujos, etc.). Permite crear transparencias con múltiples canales (podemos indicar que un color tenga distintos grados de transparencia).

Inconvenientes: no es recomendable para colocar fotografías de alta calidad en la Web.

Diferencias entre los formatos más utilizados en la Web: jpg, gif y png

JPG GIF PNG
  • Número de colores: 24 bits color o 8 bits B/N
  • Muy alto grado de compresión.
  • Formato de compresión con pérdida.
  • No permite transparencia
  • No permite animación
  • Hasta 256 colores
  • Formato de compresión sin pérdida
  • Carga progresiva
  • Permite transparencia
  • Animación simple
  • Color indexado hasta 256 colores y no indexado hasta 48 bits por píxel.
  • Mayor compresión que el formato GIF (+10%)
  • Compresión sin pérdida.
  • Transparencia variable.
  • No permite animación

Otros formatos

TIF/TIFF (Tagged Image File Format)

Utilizado principalmente en gráficos de imprenta por su compresión sin pérdida que le permite ser guardado, todas las veces que sea necesario, sin perder calidad. Ha dejado ya de ser un formato de imagen para fotos digitales, ya que JPG permite una gran calidad con un tamaño más reducido. TIF es propiedad de la casa Adobe, por lo que permite usar este tipo de archivos con muchas de las propiedades del formato PSD, como el incluir capas.

Algunas consideraciones técnicas en la Web

El tamaño del gráfico viene determinado por su resolución, sus dimensiones, el número de colores (bits) y la compresión (jpg, gif…)..

  • Crear y guardar las imágenes a 72 ppp que es la resolución a la que el monitor del PC lo muestra todo.
  • Si es posible, reduzca la paleta de colores. Muchos editores de gráficos permiten convertir un gráfico de “miles de colores” a 256, 16 o 4 colores.
  • Elegir imágenes GIF o JPG. Las imágenes GIF son mejores para dibujos, gráficos a base de líneas y logotipos, porque es fácil reducir su paleta a un número muy reducido de colores. Las imágenes JPEG son mejores para fotografías, porque admiten color de 24 bits, y porque gracias a su compresión ofrecen una imagen más brillante que ocupa menos espacio en el disco.

 Algunos programas gratuitos para el tratamiento de imágenes

  • Irfanview: Permite modificar la orientación de una imagen, el tamaño, la resolución, etc. Dispone de filtros. No deja insertar textos ni líneas. Tiene versión portable (irfanview.com).
  • Paint.net: Dispone de una barra de herramientas que permite insertar textos, líneas, polígonos. Permite insertar transparencias y trabajar con capas. Muy completa y sencilla. Tiene versión portable (paint.net).
  • GIMP: Este programa es para un uso más avanzado. Es el “hermano gratuito” de Photoshop. Tiene versión portable (gimp).
  • Photoscape: Distintas utilidades dentro de un mismo programa. También permite generar gif´s animados. Tiene versión portable (photoscape.org).
  • PixLR: Completo editor de imágenes online (www.photoshopen.com).
  • Inkscape: completo editor de imágenes vectoriales de código abierto (inkscape.org/es).

Recordemos que siempre podemos acudir a la Web y localizar las últimas versiones de estos programas, y por supuesto localizar otros más novedosos que vayan surgiendo.

Una sugerencia

Cuando necesites situar imágenes en documentos o en presentaciones, evita utilizar los comandos de “copiar y pegar”, ya que de esta forma la imagen ocupará más y obtendrás documentos mas “pesados”. Es mas eficiente utilizar el comando “Insertar -> imagen -> desde archivo”.

Anuncios