Optimizar y exportar fotografías y otras imágenes en mapa de bits

Importar las imágenes

Al importar imágenes en mapa de bits a Photoshop o Gimp para incluirlas en un Sitio o diseño Web, es recomendable empezar por:

  • Escanear la fotografía revelada,
  • Escanear los negativos o
  • Importar los archivos de las fotografías desde la cámara digital.

Optimizar imágenes en mapa de bits

Es importante contar con fotografías que cuya corrección de color, contaste y retoque fotográfico sean innecesarios o ya hayan sido aplicados, para como diseñadores Web, enfocarnos en optimización del modelo de color, resolución, ajuste del tamaño y tipo de archivo para Web.

Encuadre

  • Recorte en Gimp:

Para elegir la herramienta de Recorte. Has clic en el botón  en la caja de herramientas o en el menú: Herramientas > Herramientas de transformación > Recortar en la ventana de la imagen.

Cuando cambie el cursor, has clic y arrastra formando un rectángulo que cubra únicamente las partes de la imagen que desees conservar, si tu primera selección no fue de tu agrado, puedes arrastrar las esquinas o bordes del rectángulo para cambiar las dimensiones del área seleccionada y hacer doble clic sobre la imagen para aplicar el recorte.

Sus dimensiones y proporción se muestran en la barra de estado.

Exportar para Web.

  • En Gimp:

Archivo > Exportar como… > Seleccione el tipo de archivo.

  • En Photoshop:

Archivo > Exportar para  Web, seleccione el tipo de archivo desde el menú en la parte superior de la nueva ventana.

Las extensiones recomendadas para publicar las fotografías en Internet son:

  • JPG: Es la más recomendable para fotografías por su gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores, por ejemplo sólo grises o para animaciones.
  • PNG: fotografías editadas para contener transparencia, de mayor calidad que los .gif.

Extensiones recomendadas para compartir originales:

  • PSD: Imágenes a editar en Adobe Photoshop.
  • EPS
  • XCF: Imágenes a editar en Gimp.

Es recomendable que los archivos de imágenes se transfieran comprimidos, especialmente en Zip, para evitar la corrupción de archivos.

Fuente: http://docs.gimp.org/es/

Posterización

Posterización o cartelización es la conversión de una imagen de tonos continuos como una imagen de pocos tonos diferenciados, una calidad que solía ser común en pósteres pintados o impresos a base de tintas planas, es decir, sin degradados suaves.

Espacio de color

Un espacio de color o modelo de color es un modelo para la representación matemática del color que describe la forma en la que los colores pueden representarse, usualmente compuesto de 3 o 4 valores, por ejemplo: CMYK y RGB.

CMYKLos modelos de color sin una función de mapeo asociada a un espacio de color absoluto, donde las interpretaciones de los colores en el espacio están definidos colorimétricamente sin referencias a factores externos, es prácticamente un sistema de color arbitrario sin conexión a un sistema de interpretación de color.

Crear y exportar imágenes vectoriales

Al crear imágenes vectoriales en Inkscape o Illustrator para iniciar el diseño Web, es recomendable empezar por escanear o fotografiar el boceto de la interfaz, para digitalizarla:

  1. Trazándolo con la herramienta: Pluma.
  2. Usando las formas predeterminadas como: polígonos, círculos y líneas para recrear todos sus elementos.

Exportar para Web.

Una vez digitalizada la imagen de la página de inicio y otras páginas con estilos propios, ésta debe ser dividida en secciones que contrendrán solo fondos, texto o imágenes, ésto puede ser visto a más profundidad en el video de ésta sección del VideoTaller.

Muchos programas para diseño presentan el menú: Archivo > Exportar para Web o similares, para hacer más simple la exportación a html, jpg, gif y png a partir de la imagen de interfaz.

Las extensiones recomendadas para publicar las imágenes en Internet son:

  • JPG: Imágenes complejas, que contengan gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores o con animación.
  • PNG: Imágenes que contengan transparencias, de mejor calidad que los .gif.

Es buena práctica mantener los nombres de archivos sin espacios, ni caracteres especiales y en minúsculas.

Compartir los archivos originales editables.

Las extensiones recomendadas para compartir los archivos originales son:

  • SVG.
  • EPS.
  • AI.

Es recomendable que estos archivos se transfieran comprimidos, especialmente en Zip, para evitar la corrupción de archivos.

Profundidad de color

La profundidad de color es el número de bits usados para indicar el color o el número de bits utilizado por cada componente en un solo pixel en una imagen de mapa de bits (raster image).

Debido a la naturaleza del sistema binario, una profundidad de bits de n implica que cada píxel de la imagen puede tener 2n  valores posibles y por lo tanto, representar 2n colores distintos.

La profundidad de color comúnmente se representa en bits por pixel (bpp), pero también se puede representar en bits por channel (bpc), bits por color (bpc) o bits por muestra (abreviado bps por bits per sample).

Los valores de profundidad de color suelen ser divisores o múltiplos de 8: 1, 2, 4, 8, 16, 24 y 32 debido a que 1 byte es usualmente de de 8 bits (llamados octetos), excepto en la profundidad de color de 10 o 15 bits usada por determinados dispositivos gráficos.

Color indexado.

Para profundidades de color menores o iguales a 8, los valores de los pixeles hacen referencia a tonos RGB indexados en una tabla llamada caja creadora de colorización o paleta de colores.

Algunas profundidades de color en la gama baja son:

  • 1 bpp: 21 = 2 colores: monocromo.
  • 2 bpp: 22 = 4 colores: CGA.
  • 4 bpp: 24 = 16 colores: mínima profundidad aceptada por el estándar EGA.
  • 8 bpp: 28 = 256 colores: VGA.

Las imágenes .gif utilizan la paleta de color indexado, de ahí que su límite sea de 256 colores, mientras que en fotografía digital el color es de 24 bit u 8 bit por canal de color RGB.

Color directo.

Cuando los valores de la profundidad de colores es mayor, es más práctico codificar dentro de cada pixel los 3 valores RGB (rojo, verde y azul).

Color de alta resolución o HiColor:

En la profundidad de 15 bpp

Se utilizan 5 bits para codificar la intensidad de cada uno de los 3 colores.

  • Es posible representar: 32 x 32 x 32 = 32768 colores en cada pixel.

En la profundidad de 16 bpp

Se utilizan 5, para codificar la intensidad del rojo, 5 para el azul y 6 para el verde.

Ya que  se sabe que el ojo humano es más sensible al color verde y que puede discriminar más tonos que varían en su intensidad.

  • Es posible representar: 32 x 64 x 32 = 65536 colores en cada pixel.

Color real o True Color.

Se dedica un octeto entero a representar la intensidad luminosa de cada uno de los tres tonos, lo cual permite:

  • 24 bpp: Cada pixel pueda tomar 224 = 256 x 256 x 256 = 16.777.216 colores distintos.
  • 32 bits: Se siguen usando 24 bits, pero en cuatro canales, habiendo uno adiconal llamado Alfa, que permite la transparencia en imágenes como las .png.

Procesamiento de precisión.

Las imágenes de 48 bits no parecen mejores que las imágenes de 24 bits (que ya contienen más colores de los que el ojo humano puede distinguir), pero la existencia de más sombras entre colores (65.536 en lugar de 256) significa que se pueden realizar más operaciones en la imagen sin el riesgo de notar solapamiento o posterización (pérdida de detalle).

  • 48 bpp o 16 bits por cada canal de color.
  • 64 bits puede referirse al total de bits cuando el canal Alfa es utilizado.

Modelo de color para Web

La mayoría de los dispositivos que se usan con una computadora como el monitor y escáner, usan el modelo RGB (modelo de reflexión o aditivo), excepto los que manejan tintas, como las impresoras, que suelen usar el modelo CMYK (modelo sustractivo).

RGB:

RGB son las siglas en inglés de Red, Green, Blue, que significa rojo, verde y azul.

Las imágenes en Internet usan éste modelo de color basado en los colores primarios de la luz que al mezclarse, representan el espectro visible por el humano.

Fidelidad:

El modelo de color RGB no define por sí mismo con exactitud qué rojo, verde o azul, por lo que los mismos valores RGB pueden parecer distintos en diferentes monitores en cualquier dispositivo que use éste modelo.

Resolución de una imagen para Web

La resolución de una imagen es una forma de indicar cuánto detalle puede observarse en ella, a mayor resolución, mayor detalle o calidad visual.

La resolución de las imágenes en mapa de bits es descrita con 2 números, el primero indica la cantidad de columnas de píxeles (px) y la segunda la cantidad de filas de píxeles.

Por ejemplo: indicar que una imagen es de 800 x 600 px, señala que cuenta con 800 pixeles a lo ancho y 600 a lo alto.

Megapixeles

Aunque una forma de válida de comunicar la resolución de una imagen digital es expresando el total de pixeles de la imagen, usualmente como  el múltiplo correspondiente a millón o mega-,  multiplicando la cantidad de columnas de pixeles en una imagen por la cantidad de filas.

Nombrar la resolución en megapixeles (Mpx) es una convención más usual en el ámbito de la fotografía, no así en diseño Web.

Formatos de archivo de imagen para Web

Las extensiones de imágenes para Web mas comunes son:

Imágenes en mapa de bits:

Tanto JPEG*, PNG y GIF son formatos para imágenes en mapa de bits o ráster (del inglés raster image). La imagen se representa mediante una cuadrícula de píxeles y no pueden ser aumentadas de tamaño sin que pierdan calidad, resultando en un imágenes que frecuentemente se llaman pixeleadas, pixelizadas o pixelosas.

* Aunque existen 3 variantes del estándar JPEG que comprimen la imagen sin pérdida de resolución: JPEG2000, JPEG-LS y Lossless JPEG, su uso no es generalizado.

En cambio SVG es un formato de imágenes vectorial, éste tipo de imágenes, al no estar conformadas por pixeles, se caracterizan por su capacidad de ser redimensionadas a cualquier tamaño sin que pierdan calidad.