2.J. Imagen

El procesamiento digital de imágenes, entendido como el conjunto de técnicas que se aplican a las imágenes digitales con el objetivo de mejorar su calidad u optimizarla para algún fin concreto, es una de las actividades más habituales en el mundo de las tecnologías de la información y de la comunicación.

Junto a aspectos relativos a formatos y software, trataremos también la digitalización de imágenes análogicas a través de su escaneado.

Contenido

• 1. Tipos de imágenes digitales y formatos
  • 1.1. Formatos de imagen vectorial
  • 1.2. Formatos de imagen mapa de bits
• 2. Software gratuito y sitios "on line" de tratamiento de imágenes
  • 2.1. Programas gráficos en MAX
• 3. Preparación de imágenes para web, correo electrónico y multimedia
  • 3.1. Optimización de fotografías
    • 3.1.1. Actividad práctica de optimización (I)
      • 3.1.1.1. Optimizar con FastStone Image Viewer
  • 3.2. Optimización de otras imágenes
    • 3.2.1. Actividad práctica de optimización (II)
      • 3.2.1.1.Optimizar con Fast Stone Image Viewer

A grandes rasgos, hay dos tipos de imágenes digitales:

• Imágenes vectoriales
• Imágenes de mapa de bits
  

Las imágenes vectoriales son imágenes constituidas por objetos geométricos autónomos (líneas, curvas, polígonos...), definidos por ciertas funciones matemáticas (vectores) que determinan sus características (forma, color, posición, tamaño...)

Las imágenes de mapa de bits están formadas por una serie de puntos (píxeles), cada uno de los cuales contiene información de color y luminosidad. Salvando la diferencia, podemos compararla con un mosaico y sus teselas, o con una foto tradicional sobre papel constituida por multitud de diminutos granos de plata.

Las imágenes vectoriales se crean con programas de diseño o dibujo vectorial (Adobe Ilustrator, Corel Draw, Inkscape…) y suelen usarse en dibujos, rótulos, logotipos... Su principal ventaja es que una imagen puede ampliarse sin sufrir el efecto de “pixelado” que tienen las imágenes de mapa de bits al aumentarse.

En la imagen (vectorial) del ratón de la izquierda puede apreciarse que al ampliar una zona no hay perdida de detalle, mientras que en la fotografía del busto de Nefertiti (mapa de bits) al ampliar mucho una zona, se observan los píxeles y la imagen se degrada.

Las imágenes de mapa de bits presentan una mayor gama de colores y de tonos que las vectoriales, por lo que son el tipo de imágenes usado en fotografía y, se crean con las cámaras de fotos, los escáneres y con programas de edición de imagen y dibujo (Adobe Photoshop, Gimp, etc.) Las imágenes de mapa de bits generan archivos que ocupen mucha más memoria (bytes) que las imágenes vectoriales.

Para poder reproducirse o utilizarse en un ordenador u otros dispositivos las imágenes vectoriales y de mapa de bits se guardan en archivos o ficheros (conjunto de datos que se almacenan en algún medio –disco duro, DVD, lápiz de memoria…–) Cada archivo gráfico, se identifica además de por su nombre, por su extensión, que indica el tipo o formato de que se trata.

Algunos formatos de imagen vectorial son:

• AI. Formato nativo del programa de dibujo vectorial Adobe Illustrator. Permite incluir imágenes de mapa de bits.

• CDR. Es el formato del programa Corel Draw.

• DrawML. Formato para imágenes vectoriales para web desarrollado para la creación de organigramas y esquemas.

• DXF. Formato desarrollado por la empresa Autodesk para permitir el intercambio de archivos de dibujo entre diferentes programas de CAD. Soporta hasta 256 colores.

• EMF. Formato reconocido por casi todas las aplicaciones de dibujo vectorial y compatible con Windows y MS Office.

• EPS. Formato muy usado por su flexibilidad ya que puede usarse en imágenes vectoriales o en imágenes mapa de bits.

• ODG. Formato nativo del programa Open Office Draw. También permite imágenes mapa de bits en su interior.

• SVG. Formato abierto usado por el programa Inkscape. Fue desarrollado por W3C (organización que crea estándares para la web). Soporta: tecnología CSS2, corrección de color y otros efectos.

• SWF. Formato del programa Adobe flash.

• WMF. Formato de Microsoft, usado por ejemplo en los cliparts del procesador de texto MS Office. Suele ser el de muchas imágenes prediseñadas de catálogos de clipart, pero no suele usarse a nivel profesional. No admite mapa de bits.

Cuando trabajamos con imágenes de mapa de bits, es muy importante elegir bien el formato adecuado. Veamos algunos ejemplos:

• Al publicar fotografías en una página web o al enviarlas por correo electrónico, para que la transferencia no sea excesivamente larga, es muy importante el peso o Kbytes del archivo de imagen. En este caso, es recomendable el uso de formatos que utilicen compresión.

• Para imprimir fotografías, donde el peso del archivo no tiene tanta importancia, se podrán usar otros formatos que ofrezcan más calidad que los utilizados para web. Lo mismo ocurre al hacer fotografías con las cámaras, la elección del formato se hará en función de lo que se desea obtener y de los procesos que desee realizar a posteriori el fotógrafo.

Para efectuar una elección adecuada de un formato de imagen, conviene valorar previamente:

• El contenido de la imagen: foto, dibujo, gráfico, logotipo…

• La calidad que se desea obtener en función de su destino: publicación en la web impresión en impresora doméstica, impresión profesional...

• El tamaño que tendrá el archivo resultante.

A continuación vamos a ver los formatos de imagen de mapa de bits más comunes, y al final se indicará cual elegir en función de las valoraciones señaladas.

Formatos de imágenes de mapa de bits

BMP. Formato introducido por Microsoft y usado originariamente por el sistema operativo Windows para guardar sus imágenes. Se utiliza para generar imágenes de poco peso, por ejemplo, fondos de escritorio.

EPS. Formato desarrollado por Adobe que permite guardar imágenes de mapa de bits o imágenes vectoriales. Se usa frecuentemente en impresión profesional y en maquetación para hacer intercambio de archivos entre programas (por ejemplo de quarkxpress a page Maker). Si un archivo EPS contiene una imagen vectorial, al abrirlo en un programa de edición de imágenes (por ejemplo, Photoshop) el gráfico vectorial se transforma en mapa de bits, se rasteriza.

GIF. Formato bastante antiguo desarrollado por Compuserve con el fin de conseguir archivos de tamaño muy pequeños. Admite solo 256 colores por lo que no es adecuado para imágenes fotográficas pero si es muy apropiado para logotipos, dibujos, etc. Permite crear animaciones (gif animado) y transparencias.

Gif animado y ejemplo de dibujo -logotipo- sobre fondo transparente.
Generalmente las zonas transparentes se muestran como un damero.

Una imagen con zona transparentes puede aplicarse a fondos diferentes.

En el ejemplo, el gif se ha aplicado a dos fondos distintos:como membrete y a un banner

También es posible aplicar transparencias a gif animados.

Gif utiliza sistemas de compresión "propietarios" que tienen reservados derechos de utilización.

JPEG. Es uno de los formatos más conocido y usado para fotografías digitales ya que admite millones de colores. Lo admiten la mayor parte de las cámaras fotográficas y escáneres y es muy utilizado en páginas web, envío de fotografías por correo electrónico, presentaciones multimedia y elaboración de vídeos de fotografías.

JPEG admite distintos niveles de compresión, de forma que:

• A más compresión menor calidad y archivos más pequeños (menos Kbytes)
• A menos compresión mayor calidad y archivos más grandes (más Kbytes)

La compresión que hace JPEG, es "con pérdidas", por lo que afecta a la calidad de imagen. Cada vez que se abre y manipula una foto JPEG en un ordenador, la imagen al comprimirse y descomprimirse se degrada, por lo que conviene no guardarlas en JPEG si se van a modificar. En este caso usar TIFF o BMP para editarlas y convertirlas a JPEG al final. Si no queda más remedio que editar en JPEG, manipularlas con cuidado y no excesivamente.

Ejemplo de imagen JPEG preparada para web

PNG. Formato creado con el fin de sustituir a GIF. Utiliza sistemas de compresión gratuitos, y admite muchos más colores que GIF. También admite transparencias pero no animaciones. Al admitir más colores es posible crear imágenes transparentes con mayor detalle.

Imagen transparente con sombra. Izquierda PNG muestra la sombra y GIF -derecha- no.

Las versiones anteriores a Internet Explorer 5.0 no admiten PNG, y los ordenadores que dispongan de versiones antiguas no podrán mostrar este formato.

PSD. Es el formato por defecto del editor de imágenes Adobe Photoshop y por tanto es un formato adecuado para editar imágenes con este programa y otros compatibles. Admite millones de colores, capas, canales....

RAW. Formato “en bruto”, es decir, que contiene todos los píxeles de la imagen captada, tal y como se han tomado. Es el formato que ofrece la mayor calidad fotográfica y suele ser admitido por cámaras de gama media y alta (réflex, y compactas) indicadas para fotógrafos aficionados avanzados y profesionales.

Las cámaras que guardan las fotos en otros formatos (Tiff y JPEG) procesan la imagen captada para dar una interpretación de ella (balance de blanco, niveles de luminosidad, contraste…). En el formato RAW, los píxeles no se procesan y se mantienen en bruto para ser procesados posteriormente por un software específico conocido como “revelador RAW”.

Un archivo RAW, no sufre ninguna compresión, por lo que mantiene el máximo detalle de la imagen a costa de ocupar mucho espacio (Mbytes).

Los distintos fabricantes de cámara suelen llamar a los archivos RAW con distintos nombres. Por ejemplo, las cámaras Nikon los denominan archivos NEF.

TIFF. Formato utilizado para el escaneado, la edición e impresión de imágenes fotográficas Es compatible con casi todos los sistemas operativos y editores de imágenes. Admite millones de colores, capas, canales alfa… y también lo incluyen algunas cámaras y la mayoría de los escáneres.

XCF. Es el formato nativo del programa GIMP. Este formato almacena toda la información de la imagen incluyendo la relativa a las diferentes capas, canales, selecciones actuales, etc.

Recomendación uso de formatos

• Web, multimedia, correo electrónico, vídeo:
  • • Fotografias: JPEG
    • dibujos y logotipos: JPEG, GIF, PNG

• Impresión: TIFF, PSD, JPEG

• Fotografía:
  • • Aficionado: JPEG
    • Profesional y aficionado avanzado: RAW

Ejemplo comparativo del peso de una imagen en distintos formatos

• Imagen en formato TIFF: 357 Kbytes
• Imagen en formato BMP: 226 Kbytes
• Imagen en formato PSD: 125 Kbytes
• Imagen en formato JPEG (resolución máxima o mínima compresión): 119 Kbytes
• Imagen en formato JPEG (resolución alta o poca compresión): 71 Kbytes
• Imagen en formato JPEG (resolución media o compresión media): 64 Kbytes
• Imagen en formato JPEG (resolución mínima o compresión máxima): 52 Kbytes
• Imagen en formato GIF (256 colores): 29 Kbytes
• Imagen en formato GIF (128 colores): 26 Kbytes
• Imagen en formato GIF (64 colores): 23 Kbytes

A continuación se indican algunas herramientas gratuitas (programas y sitios web) útiles para editar, trabajar u obtener imágenes.

Adobe Photoshop Online

Versión en línea del programa Adobe Photoshop. Para acceder es necesario crear una cuenta de usuario gratuita que permite almacenar hasta 2 GB de fotos. Está desarrollado en Flash y se puede acceder a él desde cualquier ordenador por medio de un navegador de internet.

Enlaces:

• Adobe Photoshop Online
• Tutorial

ArtRage

Programa de dibujo. Dispone de una versión gratuita (starter edition) totalmente funcional pero con menos funciones que otra versión de pago (Studio). Tiene un manejo muy intuitivo y soporta los siguientes formatos: BMP, JPG, GIF, TIFF, PNG, PSD y PTG.

Enlaces:

• Página web oficial
• Página de descarga
• Tutorial

Bancos de imágenes

Generalmente bajo licencia Creative Commons (CC)

• Mediateca (Educamadrid) http://mediateca.educa.madrid.org/
• Banco Imágenes ITE (Ministerio Educación) http://recursostic.educacion.es/bancoimagenes/web/
• Colecciones fotos Creade (Ministerio Educación) https://www.mepsyd.es/creade/IrASubSeccionFront.do?id=27
• Mediateca Madrid I+D: http://www.madrimasd.org/cienciaysociedad/mediateca/

Blogs de fotografía.

Dos buenos blogs para estar al tanto de la actualidad fotográfica.

• Dzoom: http://www.dzoom.org.es/
• Xatakafoto: http://www.xatakafoto.com/

Curso de fotografía

Un buen curso de fotografía en línea. Autor: Armando Muñoz (Ministerio de Educación)

Dirección: http://recursostic.educacion.es/apls/informacion_didactica/1077

FastStone Image Viewer

Programa visualizador, gestor y editor de imágenes en castellano. Entre otras cosas permite múltiples opciones de edición: recortar y redimensionar imágenes, cambiarlas de formato, modificar sus valores de color, conversión a blanco y negro, eliminación de “ojos rojos” y otros efectos. También permite crear presentaciones con efectos de transición. Admite múltiples formatos.

Enlaces:

• Página web oficial
• Página de descarga
• Tutorial (en inglés)

FastStone Photo Resizer

Programa sencillo que automatiza la modificación de imágenes. Permite hacer operaciones muy diversas como redimensionar, rotar, cortar partes de las fotos, cambiar el color, el brillo, la saturación, la preeminencia de tonos primarios, etc. También puede añadir textos, marcas de agua y marcos. Permite hacerlo a una sola imagen o a muchas a la vez.

Enlaces:

• Página web oficial
• Página de descarga

GIMP

Editor de imágenes muy completo. Es un programa libre y gratuito. Está englobado en el proyecto GNU.

Enlaces:

• Página web oficial
• Página de descarga
• Tutorial

Inkscape

Editor de gráficos vectoriales de código abierto, con características similares a otros programas propietarios (Adobe Illustrator, Freehand, CorelDraw, Xara…) utiliza el formato estándar de la W3C: SVG (Scalable Vector Graphics).

También admite la posibilidad de usar formatos de imagen de mapa de bits como PNG, JPG, BMP o TIFF, sistemas de capas, figuras predeterminadas, etc.

También permite editar en XML, además de tener casi todas las herramientas propias de cualquier editor de imagen vectorial.

Enlaces:

• Pagina web oficial
• Descarga del programa
• Tutoriales

Optimizadores de imagen automáticos

En internet pueden encontrarse muchas herramientas en línea cuya misión es "optimizar" o reducir el peso y/o el tamaño de las imágenes para hacerlas más adecuadas para páginas web, correo electrónico, etc. Suelen ser muy sencillas de utilizar, de forma que basta con seleccionar la imagen a "optimizar", elegir algunos ajustes y pulsar el botón optimizar. Algunos de estos sitios son:

• Image Optimization: http://www.sitereportcard.com/imagereducer.php
• Online Image Optimize: http://tools.dynamicdrive.com/imageoptimizer/
• Online Image Resize: http://online-image-resize.kategorie.cz/
• Resizeyourimage: http://www.resizeyourimage.com/

Picasa

Gestor y editor de imágenes de Google. Al ejecutarlo, analiza el disco duro (o los directorios que se elijan) y cataloga las imágenes por directorio y/o fecha. Además de permitir gestionar y visualizar las imágenes ofrece varias funciones de edición, de creación de webs y presentaciones.

Enlaces:

• Página web oficial
• Tutorial

piZap

Editor de imágenes en línea que permite agregar efectos divertidos, emoticones, textos y adornos. No requiere registro y es muy fácil de utilizar.

Enlaces:

• Página web oficial
• Página de acceso

SUMO Paint

Editor de imágenes online (basado en flash) que se parece a Photoshop. Para dibujar o editar una imagen no es necesario registrarse. También ofrece, previo registro gratuito mostrar nuestras imágenes a la comunidad de usuarios.

Enlaces:

• Página web oficial
• Página de acceso

Webs alojamiento de fotos y arte

Relación de directorios que se dedican a alojar imágenes (fotografías y arte en general). Estos sitios web suelen permitir: ver, almacenar, ordenar, buscar y compartir fotografías (algunos también videos) online, crear álbumes fotográficos…

Generalmente permiten alojar cualquier formato de imagen para web (jpg, gif, png y otros) y, el tamaño o resolución de las imágenes y el número de usuarios (comunidad), dependerá de cada uno.

Introducción

Cuando hacemos fotos con una cámara o escaneamos una imagen, podemos estar generando archivos de unos pocos Kbytes o de bastantes “megas” o MB. Esto dependerá de diversos factores (resolución, profundidad de píxel, tamaño de imagen, color o blanco y negro…) Actualmente, con las resoluciones de las cámaras modernas, lo más común es que las fotos que tomemos tengan entre 1 y bastantes megas.

Al utilizar estas fotos e imágenes en internet (páginas web, blogs, envío por correo electrónico...) o en algún medio audiovisual o multimedia (presentación, vídeo...) hay que prepararlas u optimizarlas previamente.

Muchos de nosotros hemos comprobado, y sufrido, cómo una página web con bastantes imágenes se ralentizaba o, como un mensaje de correo electrónico con una presentación de fotos adjunta, parecía que no se iba a descargar nunca.

Un concepto que usamos al hablar de imágenes es el de tamaño. Este término puede ocasionar confusión ya que solemos emplearlo para cosas diferentes: normalmente decimos que una imagen tiene un tamaño de 13 x 18 cm o 1024 x 768 píxeles, pero también decimos que una imagen tiene un tamaño de 3 Mbytes. Este uso impreciso de la palabra no suele causar mayores problemas, pero para los objetivos del curso sí que es importante matizar, ya que son dos características diferentes de una imagen.

De esta forma, en este tema, cuando hablemos del tamaño nos referiremos sólo a las dimensiones de la imagen: 13 x 18 cm, 1024 x 768 píxeles; y cuando se hable del espacio que ocupa la imagen en el dispositivo de almacenamiento –disco, memoria…- (3 Mbytes o 149 Kbytes) lo definiremos como peso.

De esta manera, podemos decir que una imagen es:

• Grande cuando tiene un tamaño igual o mayor a 1024x768 píxeles
• Mediana cuando el tamaño va de 320x240 a 1024x768 píxeles
• Pequeña cuando el tamaño es menor que 320x240 píxeles
• Muy pequeña cuando es menor que 100x100 píxeles

O que es:

• Pesada si tiene 1 MB o más
• De peso mediano si va de 300KB a 1 MB
• Ligera si su peso es menor de 300KB
• Muy ligera si el peso es inferior a 100KB

Al reducir de peso las imágenes (de mapa de bits) hacemos que tengan menos bytes y, por tanto, que:

• Ocupen menos espacio en un dispositivo de almacenamiento. Por ejemplo, el disco duro de un servidor de internet acogerá más imágenes en un mismo espacio.

• La transferencia de datos por una red sea más veloz, acelerando así la descarga de imágenes y la navegación por internet.

Aligerar ≠ Optimizar

Puede darse que el caso que al “aligerar” de peso una foto, la reduzcamos también de calidad. Al optimizar, lo que pretendemos es reducir el peso lo máximo posible, pero sin que la imagen sufra pérdida de calidad aparente.

Veamos un ejemplo.

Observa atentamente las dos imágenes siguientes e intenta descubrir diferencias de calidad:

Una vez comparadas, crees que...

a) Ambas tienen un peso similar

b) La imagen 1 pesa más

c) La imagen 2 pesa más

Para salir de dudas, puedes ver tú mismo el peso de cada una haciendo clic con el botón derecho sobre ellas y seleccionando "Ver información de la imagen" o "Propiedades (Properties)" en el menú contextual. El peso se ve en Tamaño (Size of file).

Efectivamente… La respuesta correcta es la b: la imagen 1 pesa 173,9 KB y la 2, 19,13 KB.... Pasamos de una fotografía ligera a otra muy ligera, y ambas tienen una calidad similar.

A efectos prácticos, esto significa que la imagen 2 se descargará más rápidamente y/o que en un dispositivo de almacenamiento, como el disco duro de un servidor de internet podremos tener muchas imágenes y no tendremos necesidad de contratar más espacio.

Si en lugar de fotografías (en formato JPEG), la optimización se hace a otro tipo de imágenes con menos detalles la reducción de peso puede ser mayor. Veámoslo con otro ejemplo:

De la imagen BMP a la GIF se ha reducido el peso más de 20 veces y ambas son muy parecidas.

En el primer caso, hemos utilizado una fotografía digital, para usar, por ejemplo, en un blog. Las fotografías, como ya se dijo, conviene guardarlas en formato JPEG, ya que, de los formatos útiles para web y multimedia es el que mejor calidad ofrece. En este caso se ha utilizado un tipo de optimización.

En el segundo caso, se ha empleado la imagen de una captura de pantalla de una zona de un programa, para utilizar, por ejemplo, en la web o en la presentación de diapositivas de un curso. Este tipo de imágenes tienen muchos menos colores y detalle que las fotografías y admiten otro tipo de optimización.

Veamos en los puntos siguientes como optimizar fotos y otros tipos de imágenes.

Si has usado alguna vez una cámara de fotos digital, habrás visto que el número de imágenes que puede almacenarse en la tarjeta de memoria varía según:

• la capacidad de la tarjeta,
• el formato de imagen,
• su resolución…

Si se dispone de varias tarjetas de muchos “gigas” el número de fotos que podemos tomar no resultará ser un problema y podremos utilizar un formato de alta calidad como RAW o TIFF a una elevada resolución (archivos de mucho peso).

Si por el contrario tenemos una sola tarjeta y de no mucha capacidad, para procurar que quepan el mayor número de fotos, deberemos “optimizar” el espacio, y hacer que las imágenes que se guarden tengan poco peso para una calidad dada. En este caso utilizaríamos el formato JPEG, a la calidad deseada (alta, media o baja) en función del destino (*) que se vaya a dar a la imagen y la capacidad de la tarjeta.

Hay quien, por desconocimiento, "cuelga" en una web/blog o, envia por correo electrónico fotos tal cual se han "sacado" de la tarjeta de memoria de la cámara. Gran error, ya que aunque se hayan hecho a baja resolución, normalmente, esas fotos "en bruto" pesan demasiado para su uso en internet y/o en multimedia, y es conveniente optimizarlas.

Recuerda que por optimizar nos referimos a reducir el peso de una fotografía sin que ésta pierda calidad. Para ello, vamos a actuar sobre varias características de las fotografías: su tamaño, la resolución , el formato de imagen y su compresión.

Tamaño

Un aspecto muy importante al optimizar es el de las dimensiones que debe tener la fotografía. Volviendo al ejemplo que se ha puesto antes, a veces recibimos fotos por correo electrónico que son excesivamente grandes y para poder verlas hay que navegar por el mensaje ya que exceden los límites del marco.

Las dimensiones que debemos dar a una foto, dependen del uso que vayamos a darla. Veamos algunos ejemplos: si las fotografías se van a usar como fondo de pantalla o en presentaciones a pantalla completa, el tamaño dependerá del monitor:

• Monitores de 14" y 15": 800x600 píxeles
• Monitores de 17": 800 x 600 ó 1024x768 píxeles
• Monitores de 21": a partir de de 1024x768 píxeles

En este caso se deberá tener también en cuenta la proporción o relación de aspecto del monitor: 4:3, 16:9 o panorámico.

En el resto de las ocasiones usar imágenes de un tamaño similar resulta inútil y molesto, ya que para poder verlas al completo aparecerán unas barras de desplazamiento. Para hacernos una idea de posibles tamaños veamos algunos de los tamaños fotográficos más usuales para copias en papel (tamaño en píxeles indicados para una resolución de salida 72 ppp):

• 283x392 píxeles (10x13 cm)
• 307x425 píxeles (10x15 cm)
  
• 340x470 píxeles (12x16 cm)
  
• 369x510 píxeles (13x18 cm)
  
• 425x588 píxeles (15x20 cm)
  
• 510x705 píxeles (18x24 cm)

Tres tamaños de imagen diferentes

El tamaño del píxel dependerá de las características del dispositivo donde se observe la imagen, de su resolución.

Resolución (de salida o impresión)

Las imágenes normalmente se observan en dos soportes diferentes: impresas en papel o en un monitor o televisor. En este contexto, al optimizar imágenes, deberemos tener en cuenta la resolución del dispositivo donde se van a ver.

Mientras que para las imágenes que vemos en un monitor, nos basta con el tamaño expresado en píxeles ancho x píxeles alto (por ejemplo 510x705 píxeles), para impresión y otros tipos de salida la resolución de impresión es un concepto muy importante que nos indica el número de pixeles que hay en una pulgada –ppp–, o en un centímetro –ppcm– (una pulgada equivale a 2,53 centímetros: 1” ≈ 2,53 cm).

Este será un ajuste que habrá que realizar en función del tipo dispositivo de impresión (su resolución) y suele  ajustarse normalmente a valores comprendidos entre 180 y 300 o más ppp) La definición de una imagen depende en gran medida de la resolución.

Para imágenes que se van a ver en monitores y televisores la resolución de salida, cuando se ajusta, suele hacerse a valores comprendidos entre 72 y 96 ppp (sobre todo el primero), que son "en principio" los valores de puntos por pulgada de monitores y televisores de hace algún tiempo. En estos casos es mejor ajustar teniendo en cuenta el tamaño (por ejemplo 283x392 píxeles)

Formato de imagen y compresión

Como ya vimos, el formato para imágenes fotográficas más adecuado para internet es JPEG, ya que admite millones de colores -suficiente para mostrar los detalles y matices de la fotografía más exigente- y distintos grados de compresión.

JPEG se aprovecha de algunas características del ojo humano, de forma que al ver varias imágenes comprimidas con distinto nivel de compresión, nos resulta imposible o muy difícil notar diferencias. Veamos un ejemplo.

JPEG 1 = 62,71 KB		JPEG 2 = 47,85KB
JPEG 3 = 11,04 KB		JPEG 4 = 4,84 KB

Las cuatro imágenes superiores:

• Se han guardado en formato JPEG
• Tienen un tamaño de 302 x 227 píxeles
• Tienen una resolución de 72 ppp

Sin embargo, al guardarlas se ha procedido a aplicar diferentes grados de compresión:

• A la primera imagen se le ha dado la mínima compresión posible -máxima calidad de JPEG.
• A la segunda imagen se le ha dado poca compresión -alta calidad.
• A la imagen 3 se le ha aplicado una calidad y compresión media.
• A la imagen 4, una gran compresión y baja calidad.

Como se observa las diferencias de peso son notables, pero... ¿son muy apreciables las diferencias de calidad?...

Aunque si ampliamos la imagen sí que se podrían notar diferencias.

A la izquierda se muestra la ampliación de una zona de la imagen JPEG 1 y a la derecha la ampliación de la misma zona en la imagen JPEG 4.

El grado de compresión a aplicar al guardar una imagen JPEG dependerá de varios aspectos: del tipo de imagen, de los detalles que tiene, de la calidad que deseamos obtener... Por lo general, para la mayoría de las ocasiones podremos dar niveles de compresión medios o grandes (calidad baja). En cualquier caso antes de publicar una fotografía, es conveniente comprobar cómo queda tras su optimización, y si es necesario, reducir el grado de compresión.

---

(*) No requieren la misma calidad las fotografías que sólo van a verse en una pantalla de ordenador o en un televisor, que las fotos que van a imprimirse, en cuyo caso, además, se deberá tener en cuenta el tamaño y el método de impresión.

Una vez descargada la imagen en tu ordenador.

1. Ejecuta el programa FastStone Image Viewer.

2. En la ventana de exploración , localiza la ubicación donde se ha guardado la imagen que vamos a optimizar.

3. Haz doble clic sobre la imagen. La foto se mostrará a pantalla completa.

4. Desplaza el cursor del ratón hacia el borde izquierdo de la pantalla. FastStone Image Viewer mostrará una paleta de menús.

Nota: El programa mostrará diferentes paletas según donde se situe el cursor del ratón (arriba, derecha...)

5. Selecciona la opción "Redimensionar / Muestrear"

En la paleta que se abre se muestran las características de tamaño y resolución de la imagen.

6. Ajusta los parámetros de tamaño y resolución. En esta práctica: resolución 72 ppp y tamaño 340 x 255 píxeles. Para ello:

a) selecciona tamaño de impresión, y en resolución escribe en lugar de 96, 72.

b) A continuación, selecciona Píxeles, y en Anchura escribe 340. La altura se reajustará automaticamente.

c) Haz clic en OK para aceptar los cambios.

La imagen ya está optimizada en parte (tamaño y resolución), ahora ya solo falta guardarla en JPEG con un nivel adecuado de compresión.

Al aceptar (OK) en Redimensionar / Muestrear, se ve la imagen, ahora con el nuevo tamaño.

7. Vuelve a desplazar el cursor del ratón a la izquierda para ver de nuevo la paleta de menús.

Ahora selecciona "Guardar como"

Elije JPEG y da otro nombre a la imagen. Esto suele ser recomendable para mantener la foto original, y que la optimizada sea una copia. Quien sabe, si algún dia volveremos a necesitar esa imagen para otras aplicaciones. Por ejemplo, imprimirla.

Haz clic en la opción "Avanzados"

En la ventana que aparece:

• Activa la opción Lock Preview de la parte inferior izquierda.

• En la zona central, arrastra el tirador de calidad (Quality) hacia la izquierda para aplicar más compresión. A la derecha del todo se obtiene la menor compresión posible y mayor calidad, mientras que a la izquierda mayor compresión y menor calidad.
  

• Las imágenes muestran la apariencia original antes de aplicar la compresión y como queda después de aplicarla.

• Tambien puede observarse el peso de las imagenes original y con la nueva compresión.

Prueba con una compresión que ronde los 50 - 70 y haz clic en OK.

Y ya has optimizado la fotografía. Para volver al explorador de FastStone Image Viewer, pulsa la tecla Esc, del teclado.

En la vida real existen millones de colores, y las fotografías al tratar de capturar la realidad, la representan también con miles o millones de tonos. Sin embargo, hay otras imágenes, como los dibujos, gráficos, logotipos…, (por ejemplo, las capturas de pantalla de un programa de ordenador que vamos usar en una presentación para unas clases) que pueden tener como mucho 256 o bastantes menos colores.

En este caso, cuando las imágenes tienen menos detalle y colores que las fotografías, el proceso de optimización puede variar en algún aspecto; y mientras que las características de tamaño y resolución siguen siendo aplicables, el formato puede variar.

Para optimizar estas imágenes sin que se aprecie pérdida en su calidad, podemos utilizar formatos que almacenen menos colores que JPEG, y así, reducir algo más el peso del archivo. Los formatos utilizados para estos fines son: GIF y PNG.

GIF

• Admite paletas de color de 2 hasta 256 colores (color de 8 bits) La paleta de colores gif debe seleccionarse en función de los tonos de la imagen: a menor número de colores, más compresión y menos peso.

• GIF usa un tipo de compresión sin pérdida de calidad.

• Al optimizar fotografías a formato GIF, es posible que se eliminen colores de la imagen.

• Cómo ya se dijo al ver los formatos de imágenes de mapa de bits, GIF admite transparencias lo que permite fusionar la imagen con el color de fondo de una página Web.
  

• También se utiliza para crear sencillas animaciones

PNG

Hay dos formatos diferentes: PNG-8 y PNG-24

PNG-8

• Alternativa a GIF menos conocida utilizado para los mismos fines

• Admite transparencia pero no animaciones.

• No lo admiten algunos navegadores antiguos, por lo que es preferible no usarlo si la imagen va distribuirse entre muchos usuarios.

• Emplea una técnica compresión más avanzada, lo que permite crear archivos entre un 10 y un 30% más ligeros que GIF.

• Al optimizar se puede también elegir el número de colores de la imagen y controlar cómo se traman en un navegador.

      PNG-24

• Utiliza la misma compresión sin pérdida que PNG-8 y admite color de 24 bits, por lo que también podría usarse en fotografías, pero las imágenes PNG-24 suelen tener mayor peso que las imágenes JPEG. Sí admite transparencia. Pero tampoco lo admiten navegadores antiguos.

• Aunque es un buen formato para fotografías es recomendable usarlo sólo con éstas cuando las fotos tengan zonas transparentes.

Sigue los pasos 1 a 6 indicados anteriormente para optimizar fotografías (en JPEG).

7. Vuelve a desplazar el cursor del ratón a la izquierda para ver de nuevo la paleta de menús, y en "Guardar como" elije ahora GIF o PNG y da otro nombre a la imagen. Tanto si eliges un formato como el otro, haz clic en la opción "Avanzados". Se mostrarán las ventanas de Parámetros de GIF o PNG. Ambas son parecidas.

En la ventana que aparece:

• Par ver los efectos (tonos de la imagen, peso...) de los ajustes que haces, activa la opción Lock Preview de la parte inferior izquierda.

• En la zona central, selecciona el número de colores que ofrece el formato en función de la imagen que estás optimizando:

GIF: B/W (blanco y negro - 2 tonos, 4, 8, 16, 32, 64, 128 ó 256
PNG: B/W, 256 (o PNG-8) ó 16M (o PNG-24)

Aplica si quieres tramado (Interlaced), al ver imágenes entrelazadas en un navegador para que se carguen más rápido, aparecen primero con baja resolución, y ésta aumenta paralelamente a la descarga de las mismas.

En PNG, puedes ajustar el grado de compresión del archivo entre ninguna y de 1 a 9.

Los ajustes deberán realizarse siempre en función de la imagen que se optimiza y del resultado que se desea obtener. En ocasiones, convendrá hacer pruebas para ver que ajustes dan mejor resultado.

• En las ventanas superiores se muestra la apariencia de la imagen original antes de aplicar la compresión y como queda después de aplicarla.

• En la parte inferior puede observarse el peso de las imaágenes original y con los ajustes realizados.

Una vez hechos todos los ajustes haz clic en OK.

Para volver al explorador de FastStone Image Viewer, pulsa la tecla Esc, del teclado.