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 JPG

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.

Estas son las funciones de los botones:

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 :
    

11. Convertir a blanco y negro

12. Descolorar: es �til cuando se desea utilizar la imagen en el fondo y que no interfiera con el texto.

13. Efecto de biselado.

14. 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.

15. 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.

16. Resaltar zona activa: resalta las im�genes que son hiperv�nculos.

17. Restaurar: restaura a la imagen a su estado original, si es que hicimos alg�n cambio en ella.

Sigue: Los marcos o frames.