Preparación de imágenes
Tipos de representación de imágenes (raster y vectores) En  la  actualidad  existen  fundamentalmente  dos  tipos  de  rep...
pantalla,  de  tal forma  que la  representación  RGB  será  la  indicada si vamos  a trabajar para Internet, medios inter...
Figura 8. Comparación de un escalamiento de 7 veces el tamaño original de una porción de  una  imagen  y  el  resultado  c...
muy  común  del  uso  de vectores  es  para  generar  ilustraciones  a  partir  de  una fotografía. Ver figura 9 Figura  9...
Formatos En  la  actualidad  existen  muchos  formatos con  diferentes  tipos  de compresión para guardar las imágenes. Pa...
Figura 10. Imagen en PNG con canal alpha. Nótese los diferentes niveles de                   transparencias en los dados. ...
Upcoming SlideShare
Loading in...5
×

Imágenes Digitales. Raster y Vectoriales

1,384

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,384
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Imágenes Digitales. Raster y Vectoriales

  1. 1. Preparación de imágenes
  2. 2. 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
  3. 3. 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.
  4. 4. 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
  5. 5. 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).
  6. 6. 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)
  7. 7. 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.  Sin transparencia  Transparencia Simple  Niveles de t ransparencia  Colores continuo s  JPEG  PNG  PNG  Colores sólidos GIF  GIF  PNG  Cuadro 1. Criterios para la escogencia de formato basado en las características de  transparencia y color. 

×