PDF de programación - Tratamiento de imágenes para páginas web

Tratamiento de imágenes para páginas web

13. Tratamiento de imágenes para páginas web

13.1. Introducción
La inclusión de imágenes en páginas web es un aspecto fundamental en el diseño. El
tratamiento previo de las imágenes antes de incluirlas es muy importante si queremos
obtener un buen resultado. Las acciones que se realizan con mayor frecuencia sobre las
imágenes consisten en recortarlas, cambiar su tamaño y formato, ajustar el brillo, el
contraste y los colores, aplicar filtros y efectos y crear transparencias.

Antes de comenzar debemos saber que existen dos formatos que podemos usar en la
web: GIF y JPG. Si nuestra imagen se haya en otro formato, tendremos que transformarla
a uno de éstos. Podremos identificar el formato de una imagen comprobando su
extensión.
Es importante que el tamaño de la imagen (la cantidad de espacio o memoria que ocupa)
sea la mínima posible ya que así la carga de la página será más ágil. Según el tipo de
imagen que sea será recomendable usar un formato u otro. Para imágenes con pocos
colores como los iconos, botones y dibujos en general usaremos el formato GIF (hasta
256 colores distintos a la vez). Para imágenes con muchos colores (miles o millones)
como las fotografías usaremos el JPG.

Ambos formatos emplean técnicas de compresión para que la imagen no ocupe
demasiado espacio de almacenamiento. Las imágenes fotográficas suelen mucho espacio
(decenas o cientos de kilobytes), por ello el JPG permite seleccionar el grado de
compresión a aplicar; sin embargo debemos andarnos con ojo, pues este formato basa su
compresión en la pérdida de calidad de la imagen que, si bien es inapreciable hasta un
60% ó 70%, si bajamos más podemos llegar a obtener una imagen muy mala. Los iconos
y dibujos suelen ser de un tamaño bastante inferior (unos pocos kilobytes) y la compresión
de los GIF es automática.

Como veremos las imágenes GIF nos permiten además usar transparencias.



13.2. XnView
XnView es un visor y un conversor de imágenes. No entran dentro de sus funciones las
propias del diseño gráfico o del retoque fotográfico, pero sí nos permite tratar las
imágenes y realizar las acciones que antes hemos comentado.

Se puede descargar desde la página http://www.xnview.com. Existen 2 versiones básicas, la
estándar, que contiene todos los idiomas (cuidado con descargar sólo la versión inglesa),
y la versión completa con algunas funcionalidades extra.

La versión usada en este manual es la 1.80.3.

Una vez instalado, lo ejecutamos y nos aparecerá el explorador de imágenes, que es muy
similar al explorador de windows.





Página 103



Tratamiento de imágenes para páginas web

13.3. El Explorador de imágenes
El Explorador nos permite gestionar las imágenes y aplicar una serie de herramientas en
conjunto.

Se divide en tres paneles, el de la izquierda nos muestra el árbol de carpetas disponibles
donde buscaremos las imágenes a tratar. En la zona central superior aparecen las
imágenes en miniatura contenidas en la carpeta seleccionada. Podemos seleccionar
cualquier imagen haciendo click sobre ella.

En la zona central inferior tenemos un espacio donde se muestra la imagen seleccionada,
aunque éste quizá no sea su tamaño real ya que si no cabe habrá sido reducida.

La línea inferior muestra la barra de estado con una serie de datos sobre la imagen
seleccionada, como el tamaño, el formato o las dimensiones.
En la parte superior encontramos cuatro barras.
• La barra de menú del explorador: donde los menús incluyen todas las acciones que

podemos realizar.



• La barra de herramientas del Explorador. Nos permite acceder rápidamente a las

opciones más importantes del menú del Explorador.



• Las pestañas de carpetas. Nos muestra las ventanas que tenemos abiertas, de esta
forma podemos acceder rápidamente a una ventana concreta para verla, cerrarla, etc.
Usualmente la primera ventana que tendremos será la del explorador.









Página 104



Tratamiento de imágenes para páginas web
• La barra de gestión de imágenes. Esta barra nos permite movernos por las carpetas

del disco, renombrar imágenes, borrarlas, ordenarlas, etc.



Qué podemos hacer con el Explorador

Para visualizar cualquier imagen, podemos hacer doble click sobre ella o bien

o pulsar la
seleccionarla (haciendo un sólo click) y pulsar el primer botón de la barra
tecla [INTRO]. El explorador dará paso al visor de imágenes que nos mostrará la imagen
en toda la ventana y nos permitirá tratarla. Esto lo veremos posteriormente. Incluso
podemos visualizar algunos tipos de fichero sencillos, como por ejemplo un documento
html o un documento de texto.

, que nos permite ver las imágenes a pantalla

Existe otro botón de visualización,
completa. Para salir sólo es necesario pulsar [ESC] o [INTRO].

El Explorador además nos permite seleccionar una o varias imágenes a la vez y moverlas
o copiarlas a otras carpetas, simplemente arrastrándolas, de la misma forma que lo
haríamos con el explorador de Windows. Esto también lo podemos hacer mediante el
menú
, así como borrarlas o renombrarlas. Si copiamos una imagen desde otra
aplicación, la podremos traer a XnView usando la opción de Importar desde el
portapapeles. Por último, las propiedades de este menú nos muestra el tamaño, las
dimensiones y otras.

, que permite realizar algunas operaciones del menú

Existe un botón,
son copiar, mover y renombrar varios ficheros de forma simultánea.

En el menú
podemos cambiar la forma de explorar imágenes, podemos ordenarlas,
filtrarlas, cambiar el tamaño de las miniaturas, y en general particularizar el explorador
para hacerlo más cómodo a nuestras preferencias.

El menú
destacar:

nos proporciona una serie de acciones entre las que podemos

, como

• Conversión por lotes de ficheros

multitud de opciones y pudiendo aplicarla a varios
Posteriormente veremos algunos ejemplos.

: para hacer una conversión de formato con
la vez.

ficheros a





Página 105



Tratamiento de imágenes para páginas web

• Transformaciones JPEG sin pérdidas

con formato JPG sin pérdidas en la operación.

: para rotar o reflejar las imágenes



• Página web

: potente opción para crear una página web automáticamente con
todas las imágenes seleccionadas en miniatura, incluidas en un frame a la
izquierda y con enlaces a las imágenes con su tamaño real. Si quisiéramos
publicar la página creada en la web, no debemos olvidar (aparte de darle el
formato adecuado) incluir las carpetas “thumb”, que contiene las miniaturas, y
“original”, que contiene las imágenes en su tamaño real, además de todos los
ficheros necesarios como los “css”.





Página 106



Tratamiento de imágenes para páginas web

• Opciones

: configuración general del programa. De la gran cantidad de
opciones disponibles podemos destacar la de Idioma, que incluye el español y el
catalán.


En el menú
encontraremos todas las ventanas que tengamos abiertas, es decir,
las que aparezcan en la barra Pestañas de carpetas. Debemos tener en cuenta que si
vamos mostrando imágenes y volvemos al explorador sin cerrarlas, el programa no las
cierra automáticamente y se irán acumulando. Para cerrarlas sólo hay que seleccionar tal
opción en el menú
, o de forma más rápida pulsando [ESC]. No nos debe preocupar
cerrar imágenes, ya que si hemos modificado alguna que no hayamos guardado y la
estamos intentando cerrar, el programa nos preguntará si deseamos guardarla en ese
momento. También es interesante conocer el atajo de teclado para conmutar entre
ventanas abiertas, ya sean de imágenes o del Explorador, éste es [CTRL] [TAB].

La última opción es la de

También podemos encontrar las acciones más usuales en el menú contextual, que
veremos si pulsamos con el botón derecho del ratón sobre cualquier imagen.

que contiene la ayuda, pero en inglés.





Página 107



Tratamiento de imágenes para páginas web

13.4. El Visor de imágenes
Como decíamos, al abrir una imagen haciendo doble click, pulsando [INTRO] o pinchando

, aparece una nueva ventana que es el Visor de imágenes. Éste nos va a permitir

en
realizar multitud de acciones sobre la imagen en particular.

Lo primero que observamos es que desaparece el panel izquierdo y la imagen ocupa
ahora toda la ventana. En la parte inferior seguimos teniendo la barra de estado con
información sobre la imagen, y en la parte superior la barra de menú, la de ventanas y la
de herramientas, pero que han cambiado respecto a las del explorador:


Las 7 opciones restantes son las mismas que teníamos en el explorador:




Qué podemos hacer con el Visor de imágenes
Lo primero es que podemos volver al Explorador en cualquier momento pinchando sobre
, con Explorar. Además, desde este mismo menú podemos

o desde



, cerrarla, guardarla

, etc.
abrir cualquier otra imagen de disco
Recordar que todas las acciones que apliquemos sobre las imágenes se perderán si no
guardamos el fichero en disco.

Antes de continuar matizaremos un punto importante. Las acciones que hagamos a partir
de ahora se aplicarán sobre toda la imagen a no ser que tengamos seleccionada una
zona específica de la misma. Para ello sólo tenemos que pinchar sobre cualquier punto de
la imagen y arrastrar el puntero del ratón sin soltar el botón.

, imprimirla

tenemos la opción importantísima de deshacer

En el menú
, que