Cap�tulo 7
Las im�genes
web
Al
trabajar con im�genes en un sitio web es importante saber que los archivos que
se manejan en Internet son de dos clases: los .jpeg y los .gif, ambos son
archivos de imagen comprimidos.
Los
primeros se utilizan para fotograf�as, las cuales al utilizar este formato
comprimido, ocupan menos memoria al costo de bajar un poco la calidad.
El
formato .gif, se utiliza para t�tulos, logotipos, y gr�ficos con menos de 256
colores. Tambi�n se pueden usar para fotos pero la calidad ser� peor. A
diferencia del formato jpeg, el gif no hace disminuir la calidad de la imagen.
Vemos
a continuaci�n dos im�genes en cada uno de los formatos mencionados.
Imagen
jpeg
Imagen
gif
Insertando
Im�genes
El
proceso para insertar una imagen es muy simple:
1
Sit�en el cursor en el lugar en que desean insertar la imagen.
2
Vayan a: Insertar/Imagen/Desde archivo o Im�genes. Si eligen im�genes,
aparecer� la galer�a de im�genes predise�adas de Microsoft Office de donde
podr�n buscar im�genes por varias categor�as. Una vez seleccionada la imagen,
clic en ella y elijan insertar en el men� emergente.
3
Si eligen Desde archivo, se abrir� una ventana en donde se mostrar�n
todos los archivos del sitio Web. Esto es por si la imagen que desean insertar
ya se encuentra dentro del sitio Web (dentro de la carpeta del mismo). Si esto
no es as�, hagan clic en el icono de la carpeta, para buscar en las carpetas de
su computadora la imagen a insertar.
4
Una vez insertada la imagen, es posible que esta haya desplazado el texto
a su alrededor, lo cual se puede corregir o ajustar...
Acerca
del Tama�o de las im�genes
Como
ya dije antes, el tama�o de los archivos gr�ficos en una p�gina Web debe ser
peque�o para optimizar el tiempo de descarga de la p�gina. Si ustedes abren la
imagen en alg�n editor como PhotoShop o el Microsoft Opto Editor, deber�n
elegir ver la imagen al 100% para saber cual es el tama�o real de la imagen que
se ver� en la p�gina. Con esto lograr�n un mayor control de la misma.
Otro
punto importante es que nunca es conveniente insertar una imagen grande y luego
achicarla mediante los manejadores de la misma (los peque�os cuadraditos que
aparecen en los bordes para cambiar el tama�o), ya que si hacemos esto, se
achica la imagen que se ve en pantalla pero no el tama�o del archivo.
Para
cambiar el tama�o abran la imagen en el editor y modifiquen el zoom hasta el
tama�o deseado. Una vez hecho esto, f�jense el valor que eligieron de zoom. En
PhotoShop vayan a Image/Image size, en los cuadros de la unidad, seleccionen
Percent y f�jense que est� tildada la casilla Constrain Proportions. A
continuaci�n tipeen en cualquiera de los cuadros de Height o Width (pero solo
en uno) el valor del zoom, con lo cual la imagen se reducir� al tama�o
deseado. Para ver los resultados, seleccionen zoom 100% y guarden la imagen, con
el mismo nombre o con otro para saber que es un archivo distinto. Si usan el
Microsoft PhotoEditor el proceso es similar, deben ir a Imagen/Cambiar tama�o y
fijarse que NO est� tildada la casilla Permitir distorsi�n una vez hecho esto,
var�en el porcentaje de Alto o Ancho.
Ubicaci�n
Para
ubicar la imagen con precisi�n deben ir al men� Formato/Ubicaci�n, y le
aparecer� el siguiente cuadro de di�logo:
Ning�n
estilo de Ajuste: la imagen se
ajustar� como un car�cter m�s.
Izquierda: La
imagen se alinear� a la izquierda y se rodear� con texto.
Derecha: Similar
al anterior.
Ning�n estilo de ubicaci�n:
en este caso, no se podr� mover la
imagen de la ubicaci�n que tiene, para hacerlo, seleccionen:
Relativo: en este caso pueden especificar
los valores de ubicaci�n y tama�o en los cuadros de di�logo, asi como el
orden Z, es decir, la profundidad de la imagen con respecto a los dem�s objetos
de la p�gina, es decir, atr�s o adelante del texto, o de otras im�genes.
Absoluto: utilicen este m�todo para
ubicar una imagen con total libertad, pero en este caso, el texto no se ajustar�
a ella.
Barra
de herramientas imagen
Si
seleccionan la imagen, les aparecer� una barra de herramientas de imagen. Si no
la ven, vayan a Ver/Barras de herramienta/Im�genes.
Barra
de herramientas imagen
1
Insertar imagen desde archivo
2
Escribir texto sobre una imagen existente: con esto, se
transforma a la imagen en GIF y se crea un archivo de texto y otro con la imagen
del texto que se superpone a la imagen original.
3
Vista en miniatura autom�tica:
con esto se crea una copia
del archivo de imagen de menor tama�o y de r�pida descarga. Para ver la imagen
a tama�o normal, habr� que hacer clic en ella y se descargar� autom�ticamente.
No hace falta insertar ning�n hiperv�nculo ya que FrontPage hace todo autom�ticamente.
Esto es �til cuando hacemos una �galer�a de fotos� con muchas de ellas.
4
Ubicaci�n absoluta.
5
Traer al frente o enviar atr�s.
6
Rotar 90�, o espejar.
7
Contraste (m�s,
menos)
8
Brillo (m�s o
menos)
9
Recortar: con esta herramienta podemos eliminar parte de una imagen que no
precisemos, con lo cual tambi�n reduciremos su tama�o. Hagan clic en la
esquina de la porci�n de imagen que desean conservar y desplacen el mouse hasta
lograr un cuadrado. Para recortarla, vuelvan a hacer clic en el bot�n recortar
en la barra de herramientas.
10
Establecer color transparente:
haciendo clic en un color de la imagen, este se volver� transparente. Solo se
puede elegir un solo color. A continuaci�n vemos un ejemplo de imagen
transparente y otra que no lo es :
|
|
|
|
Imagen con fondo transparente |
Imagen sin fondo transparente |
11
Descolorar:
es �til cuando se desea utilizar la imagen en el fondo y que no interfiera con
el texto.
12
Efecto de biselado.
13
Nuevo muestreo:
cuando modificamos el tama�o de la imagen con los manejadores, dije que no se
modificaba el tama�o del archivo, pero si luego de achicarla, apretamos este
bot�n, se har� un nuevo muestreo y se reducir� el archivo de modo que el tama�o
normal sea el que hemos modificado nosotros con los manejadores.
14
Zonas activas (rectangular,
el�ptica o poligonal): arrastrando el mouse para dibujar una zona activa,
estamos creando una imagen de hiperv�nculo, con lo cual se nos desplegar� el
cuadro de di�logo de hiperv�nculos pidi�ndonos que escribamos la direcci�n
del mismo. Para insertar una zona activa poligonal, deben hacer clic en cada
esquina del pol�gono y luego cerrarlo haciendo clic.
15
Resaltar zona activa:
resalta las im�genes que son hiperv�nculos.
16 Restaurar: restaura a la imagen a su estado original, si es que hicimos alg�n cambio en ella.
Una imagen puede valer m�s que mil palabras, pero �vale 10 segundos de tiempo de descarga? H�gase esta pregunta antes de a�adir una imagen al Web basado en Microsoft FrontPage�. Los gr�ficos Web de hoy d�a son casi todos archivos .jpg o .gif. La elecci�n del tipo de archivo influir� mucho en el tama�o del gr�fico.
El modo m�s sencillo de reducir el tama�o de un archivo de gr�ficos es reducir el tama�o del gr�fico en s�.
Puede reducir el tama�o de un gr�fico recort�ndolo en FrontPage, es decir, moviendo la parte superior, los lados o la parte inferior del gr�fico para eliminar partes que no son necesarias.
Otro modo de reducir el tama�o de un gr�fico es ajustar su tama�o de manera proporcional.
Como regla general, no utilice nunca un gr�fico que sea mayor que el tama�o mostrado en el sitio Web. Por ejemplo, si crea un gr�fico a 800 x 400 p�xeles, no muestre ese gr�fico a 200 x 100 p�xeles. Aunque el gr�fico se muestra con un tama�o inferior, el archivo se sigue descargando a tama�o completo y el explorador reduce el tama�o de presentaci�n en pantalla.
El formato de archivo JPEG funciona mejor con un n�mero elevado de colores en gr�ficos de calidad fotogr�fica. Puede comprimir de manera considerable los archivos .jpg sin que se produzca una degradaci�n importante de la calidad. Sin embargo, la compresi�n de las im�genes JPEG s� produce p�rdidas. Esto quiere decir que algunos datos de la imagen se pierden durante la compresi�n, de manera que la calidad de la imagen empeora a niveles de compresi�n elevados.
Las siguientes figuras muestran una fotograf�a original no comprimida, tomada del contenido de Microsoft PhotoDraw�, as� como versiones comprimidas de la fotograf�a, con el tama�o de archivo y el tiempo de descarga a una velocidad de conexi�n de 28,8 Kbps.
 Foto original (200 x 161 p�xeles) 10 KB, 12 segundos |
||
 Al 20% de compresi�n 8 KB, 5 segundos |
 Al 70% de compresi�n 6 KB, 2 segundos |
 Al 90% de compresi�n 3 KB, 1 segundo |
Como puede ver, a una compresi�n del 20%, el archivo se reduce a menos de la mitad del original y el tiempo de descarga tambi�n es menos de la mitad. Con una compresi�n del 70%, sigue sin haber una degradaci�n considerable de la imagen y el tiempo de descarga se reduce en gran medida. A una compresi�n del 90%, las bandas de color son visibles y, aunque el archivo ocupa la mitad que un archivo comprimido al 70%, el tiempo de descarga es s�lo 1 segundo menos. La compresi�n al 90% no presenta ninguna ventaja.
El Asistente para uso espec�fico de Microsoft PhotoDraw y el Save for Web Wizard de Microsoft Image Composer proporcionan vistas previas de una imagen. Estas vistas muestran distintos grados de compresi�n y el tiempo de descarga a velocidades de conexi�n determinadas por el usuario, y pueden ayudarle a decidir si compensa descargar m�s r�pidamente las im�genes aunque se pierda nitidez.
El formato de archivo GIF funciona mejor con gr�ficos que contienen un n�mero limitado de colores y constan de l�neas o texto. Los archivos en formato GIF suelen descargarse r�pidamente, ya que normalmente contienen 256 colores, el mismo n�mero de colores que muestran muchos equipos. Si convierte una imagen de formato JPEG a formato GIF, perder� la informaci�n de color.
En el formato GIF, los colores se guardan en filas horizontales. Las �reas que contienen colores s�lidos se comprimen a la proporci�n m�xima. Los colores organizados horizontalmente producen archivos m�s peque�os y descargas m�s r�pidas. Por ejemplo, un archivo que contiene dos listas de colores horizontales ocupa menos de la mitad de un archivo que contiene dos listas de colores verticales.
Las siguientes figuras muestran el mismo gr�fico de una bandera en orientaci�n horizontal y vertical.
 Tama�o de archivo - 6 KB. |
 Tama�o de archivo - 9 KB. |
Para girar un gr�fico en Front Page:
Cuando guarde un gr�fico en un formato GIF en la mayor�a de los programas de gr�ficos, tiene la opci�n de guardar el archivo como entrelazado. El entrelazado es una t�cnica que muestra un archivo en porciones horizontales, de manera similar a una persiana veneciana. La ventaja de utilizar el entrelazado es que una imagen aparece r�pidamente, aunque con baja resoluci�n y, a continuaci�n, se convierte en una imagen completa. Los archivos entrelazados son de mayor tama�o que los archivos no entrelazados.
Muchos programas de gr�ficos proporcionan la opci�n de comprimir archivos .gif mediante compresi�n LZW. A diferencia de la compresi�n de archivos .jpg, en la compresi�n de archivos .gif no se producen p�rdidas. Esto quiere decir que los datos no se pierden durante la compresi�n, de manera que la imagen no se deteriora.
Cuando optimice un gr�fico, tenga en cuenta las siguientes sugerencias:
