Preparación de imágenes

Tipos de representación de imágenes (raster y vectores) 

En  la  actualidad  existen  fundamentalmente  dos  tipos  de  representación para imágenes  2D:  raster  y  vectores.  A  continuación  veremos  una  descripción  de ambos tipos de representación y su uso en aplicaciones multimedia 

Imágenes Raster (Bitmaps) Un  raster  es  una  “malla”  y  una  imagen  representada  de  esta  manera corresponde a una matriz tridimensional donde se definen el color de cada uno de los puntos (pixels) que conforman la imagen. 

Los  colores  de  estos  puntos  se  definen  típicamente  como  una  combinación lineal dentro del espacio RGB (Red, Green, Blue) 

Figura 7. “ smiley face”  representada como raster. (Tomado de www.wikipedia.org) 

En  la  figura  7  observamos  un  “smiley  face”  representado  como  raster,  en  la imagen  ampliada  podemos  notar  que  para  cada  punto  de  la malla  existe  un color  representado  en  coordenadas  RGB,  en  el  caso  de  la  figura  con porcentajes. Existen  también otras  formas  de  representar  los colores y  estas van a depender en gran medida del medio que se va a utilizar para interpretar los  datos.  Para  formatos  impresos  se  utiliza  la  representación  CMYK  o cuatricromía,  esto  se  debe  a  las  impresoras  utilizan  cuatro  colores  para imprimir  (cian,  magenta,  amarillo  y  negro)  entonces  tiene  sentido  utilizar  la mezcla  de  estos  colores  para  trabajar  con  imágenes  que  van  a  ser  luego impresas. En el caso de los monitores de computadora o los televisores, estos utilizan una combinación de rojo, verde y azul para representar los colores en la

pantalla, de  tal forma que la representación RGB será  la  indicada si vamos a trabajar para Internet, medios interactivos o para televisión. 

El  otro  aspecto  define  las  imágenes  raster  es  la  resolución  o  la  cantidad  de pixels la forman. A mayor cantidad de pixels mayor resolución tendremos. 

Existen también un parámetro de densidad comúnmente utilizado: dpi (dots per inch), que son pixels o puntos por pulgada. A mayor densidad de puntos mejor calidad  tendrá  la  impresión.  En  el  trabajo  de  impresos  en  formato  pequeño (hasta  el  tamaño  de  un  afiche  o  pendón  aproximadamente)  los  DPI  que  se utilizan  van  desde  150  a  300  siendo  estos  los  más  usados,  para  tamaños superiores  de  utilizan  dpi`s  menores.  Las  pantallas  de  computadora  y  la televisión tienen una densidad de 72 dpi. 

La combinación de estos tres factores es lo que va a determinar el peso de una imagen  raster.  El  peso  es  un  muy  importante  al  momento  de  trabajar  con imágenes  y  particularmente  para  el  desarrollo  de  sitios  web,  debido  a  su relevancia  en  la velocidad  de  carga  de  las  páginas.  Imágenes muy  pesadas generarán  sitios  muy  lentos,  pero  imágenes  con  poca  resolución  o  poca profundidad  de  color  producen  una  apariencia  muy  pobre,  ambos  factores, como  vimos  en  la  unidad  anterior,  terminarán mermando  el  éxito  de  nuestro sitio web. 

Para  lidiar  con  este  problema  veremos  más  adelante  los  distintos  tipos  de formatos  y  las  optimizaciones  que  podemos  hacer  lograr  la  mejor  relación peso­calidad de imagen. 

Imágenes vectoriales 

A diferencia de  la  imágenes de raster que son representadas por un conjunto de puntos de una “malla”,  la  imágenes basadas en vectores utilizan primitivas geométricas como puntos y curvas para definir  los diferentes elementos de  la imagen,  estas  primitivas  están  basadas  en  ecuaciones  matemáticas  lo  que tiene como consecuencia un peso mucho menor de la imagen y  la posibilidad de  escalamiento  teóricamente  infinito  sin  perder  calidad.  En  la  figura  8 podemos observar un ejemplo de este comportamiento.

Figura 8. Comparación de un escalamiento de 7 veces el tamaño original de una porción de  una  imagen  y  el  resultado  comparado  tomando  la  imagen  original  en  vectores  y  el raster (bitmap).  Tomado de www.wikipedia.org 

¿Por qué entonces no utilizamos siempre imágenes vectoriales? La respuesta es que no siempre es posible, esto se debe a la misma razón que hace a las imágenes  vectoriales  livianas  y  escalables  impide  que  puedan  reproducir  la realidad  fielmente,  es  decir,  no  existen  fotos  vectoriales.  La  realidad  es muy compleja para ser expresada como una combinación de primitivas geométricas y ecuaciones matemáticas (Para mayor información sobre este tema revisar el libro “The Algorithmic Beauty of Plants” escrito por Aristid Lindenmayer donde se  describen  diferentes  patrones  matemáticos  para  “generar”  plantas).  Sin embargo en la medida de lo posible es aconsejable trabajar con vectores. 

El otro problema con  las  imágenes vectoriales consiste en estas requieren de un  software  que  las  interprete,  como  por  ejemplo  FLASH,  y  este  no necesariamente va estar disponible en contraste con las imágenes raster que pueden ser mostradas por cualquier navegador. 

Una  práctica  frecuente  en  desarrollo  de  sitios  web  consiste  en    “vectorizar” imágenes  raster  de  baja  resolución  para  luego  regenerarlas  en  la  resolución adecuada para el proyecto. “Vectorizar” una imagen raster consiste el “calcar” la  imagen  original  utilizando  líneas  y  primitivas  geométricas.  Otra  aplicación

muy común del uso de vectores es para generar  ilustraciones a partir de una fotografía. Ver figura 9 

Figura  9.  Ejemplo  de  una  ilustración  realizada mediante  es  uso  del  dibujo  vectorial  a partir de una fotografía. Tomado de la propuesta para la página web de la fundación de neurociencias Cogniávila. 

Podemos  decir  entonces  que  ambas  representaciones  tienen  uso  en  el desarrollo  de  sitios  web  y  su  utilización  va  a  depender  de  lo  que  se  quiere mostrar: Una representación fiel de la realidad (fotografía) o una simplificación de esta (Esquema, dibujo o ilustración).

Formatos En  la actualidad existen muchos  formatos con diferentes  tipos de compresión para guardar las imágenes. Para la web los más usados son JPEG, GIF y PNG para  imágenes  raster,  imágenes  vectoriales  suelen  ser  utilizadas  en animaciones en FLASH. 

Escoger  el  formato  correcto  y  nivel  de  compresión  acorde  es  crucial  para creación  de  sitios  web,  el  compromiso  peso­calidad  de  imagen  influye directamente tanto en la calidad visual como en la velocidad de los sitios web y ambos son factores determinantes para el éxito 

La  compresión  de  imágenes  consiste  en  la  aplicación  de  algoritmos  de compresión  de  datos  en  imágenes  digitales,  estos  pueden  ser  sin  perdida “lossless”  o  con  perdida  “lossy”.  La  compresión  sin  perdidas  de  utiliza  para algunas  aplicaciones  medicas  u  otras  aplicaciones  donde  la  fidelidad  de  la imagen  sea  determinante.  En  el  caso  del  desarrollo  de  sitios  web  es  más importante la reducción del peso que la fidelidad de la imagen. La mayoría de los  formatos con perdida basan en  la  transcodificación del  formato original de mapa de bits, es decir, en  lugar de  representar  la  imagen como un matriz de puntos con coordenadas en el espacio RGB, utilizan diferentes métodos para representar  los  colores  usualmente  descartando  la  información  que  el  ojo humano  es menos  sensible  a  percibir.    Esto  trae como  consecuencia  que  el navegador debe poder  interpretar  las  imágenes que creemos utilizando estos métodos de compresión. En caso de los sitios web es seguro utilizar imágenes en  JPEG, GIF  y PNG,  porque  los  navegadores cuentas con  la  capacidad  de interpretar estos formatos. 

JPEG Su nombre viene  de “Joint Photographic Experts Group” que fue el comité que creo  su  estándar  de  compresión.  Este  formato  se  utiliza  para  comprimir imágenes con colores continuos como fotografías. 

GIF Su nombre proviene de “Graphics Interchange Format” y fue introducido por la compañía  CompuServe    en  1987.  Debido  a  la  forma  en  que  representa  las imágenes (reduciendo en espacio de color) se utiliza para comprimir imágenes con  colores  sólidos  como  logos  o  ilustraciones.  También  puede  contener información  sobre  transparencia  y  permite  hacer  animaciones.  Aunque  esto último  se  ha dejado de  usar  tanto  en  beneficio de  la  animaciones  en FLASH con menos peso y mayores posibilidades de animación. 

PNG PNG  significa  “Portable  Network  Graphics”  y  se  creo  como  resultado  de  la patente lograda por Unisys sobre el formato GIF. Al ser un formato más nuevo PNG  es más  flexible  y  eficiente    para  guardar  imágenes  con  transparencias permitiendo  codificaciones más  avanzadas  como  el  canal  alpha  que  permite tener  niveles  de  transparencia  en diferentes  lugares  de  la  imagen  (ver  figura 10)

Figura 10. Imagen en PNG con canal alpha. Nótese los diferentes niveles de transparencias en los dados. Tomado de wikipedia.org 

PNG es también un formato muy bueno para guardar imágenes con texto o con líneas marcadas comparado con el JPEG, pero con un desempeño similar al GIF. 

Criterios para la optimización de imágenes 

Basados  en  la  información  de  los  formatos  anteriormente  mencionada podemos resumir en el siguiente cuadro los criterios de escogencia de formato basados en las características de la imagen. 

Cuadro 1. Criterios para la escogencia de formato basado en las características de transparencia y color. 

Sin transparencia 

Colores continuos 

Transparencia Simple  Niveles de t ransparencia 

JPEG  PNG  PNG 

GIF  GIF  PNG Colores sólidos