1. IMAGENES EN HTML
.

2. 7: Imágenes
Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el grafismo. La introducción en el
texto de imágenes puede ayudar a explicar más fácilmente la información y darle un aire mucho más estético. El
abuso no obstante puede conducirnos a una sobrecarga que se traduce en una distracción para el navegante, quien
tendrá más dificultad en encontrar la información necesaria, y un mayor tiempo de carga de la página lo que puede
ser de un efecto nefasto si el visitante no tiene una buena conexión o si es un poco impaciente.
Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta:
<IMG>
La sintaxis queda entonces de la siguiente forma:
<IMG SRC=“ruta hacia el archivo">
La ruta al archivo puede ser relativa o absoluta en relación a la estructura de directorios que se maneje, puede
también ser un URL.
Aparte de este atributo, indispensable obviamente para la visualización de la imagen, la etiqueta <img> nos propone
otra serie de atributos de mayor o menor utilidad:
Atributo ALT
Dentro de las comillas de este atributo se coloca una brevísima descripción de la imagen. Esta etiqueta no es
indispensable pero presenta varias utilidades.
Primeramente, durante el proceso de carga de la página, cuando la imagen no ha sido todavía cargada, el
navegador mostrara esta descripción, con lo que el navegante se puede hacer una idea de lo que va en ese lugar.
Esto no es tan trivial si se tiene en cuenta que algunos usuarios navegan por la red con una opción del navegador
que desactiva el muestreo de imágenes, con lo que tales personas podrán siempre saber de qué se trata el grafico y
eventualmente cambiar a modo con imágenes para visualizarla.
Además, determinadas aplicaciones para discapacitados o teléfonos vocales que no muestran imágenes ofrecen la
posibilidad de leerlas por lo que nunca esta de más pensar en estos colectivos.

3. Se mostraría de la siguiente forma en el navegador, considerando que la ruta indicada efectivamente lleva a una
imagen:
Atributos height y width
Definen la altura y anchura respectivamente de la imagen en pixels.
Todos los archivos gráficos poseen unas dimensiones de ancho y alto. Estas dimensiones pueden obtenerse a partir
del propio diseñador grafico o bien haciendo clic con el botón derecho sobre la imagen vista por el navegador para
luego elegir propiedades sobre el menú que se despliega.
El hecho de expresar en nuestro código las dimensiones de nuestras imágenes ayuda al navegador a confeccionar
la página de la forma que nosotros deseamos antes incluso de que las imágenes hayan sido descargadas.
Así, si las dimensiones de las imágenes han sido proporcionadas, durante el proceso de carga, el navegador
reservara el espacio correspondiente a cada imagen creando una maquetación correcta. El usuario podrá comenzar
a leer tranquilamente el texto sin que este se mueva de un lado a otro cada vez que una imagen se cargue.
Además de esta utilidad, el alterar los valores de estos dos atributos, es una forma inmediata de redimensionar
nuestra imagen. Este tipo de utilidad no es aconsejable dado que, si lo que pretendemos es aumentar el tamaño, la
perdida de calidad de la imagen será muy sensible. Inversamente, si deseamos disminuir su tamaño, estaremos
usando un archivo más grande de lo necesario para la imagen que estamos mostrando con lo que aumentamos el
tiempo de descarga de nuestro documento innecesariamente.
Es importante hacer hincapié en este punto ya que muchos debutantes tienen esa mala costumbre de crear gráficos
pequeños redimensionando la imagen por medio de estos atributos a partir de archivos de tamaño descomunal. Hay
que pensar que el tamaño de una imagen con unas dimensiones de la mitad no se reduce a la mitad, sino que
resulta ser aproximadamente 4 veces inferior.
Siguiendo con el ejemplo anterior:

4. Atributo border
Definen el tamaño en pixels del cuadro que rodea la imagen.
De esta forma se puede recuadrar la imagen si se desea.
Por ejemplo,
<IMG SRC="/images/browsers.jpg" ALT="Diferentes navegadores...." WIDTH="175" HEIGHT="150"
BORDER="1">
Da paso a lo siguiente:
Atributos vspace y hspace
Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la
rodean, como texto, otras imágenes, etc.
Por ejemplo, a continuación un código donde se coloca texto alrededor de la imagen sin especificar los atributos en
cuestión:
<IMG SRC="/images/browsers.jpg" ALT="Diferentes navegadores...." WIDTH="175" HEIGHT="150"
BORDER="1"
Algo a la derecha!
<P>Algo debajo de la imagen!

5. Si se especifican estos atributos como sigue:
<IMG SRC="/images/browsers.jpg" ALT="Diferentes navegadores...." WIDTH="175" HEIGHT="150"
BORDER="1" HSPACE="20" VSPACE="50">
Algo a la derecha!
<P>Algo debajo de la imagen!
Se obtiene:
Atributo lowsrc
Con este atributo podemos indicar un archivo de la imagen de baja resolución. Cuando el navegador detecta que la
imagen tiene este atributo primero descarga y muestra la imagen de baja resolución (que ocupa muy poco y que se
transfiere muy rápido). Posteriormente descarga y muestra la imagen de resolución adecuada (señalada con el
atributo src, que se supone que ocupará más y será más lenta de transferir).
Este atributo está en desuso, no ha sido aceptado por el estándar HTML 4.0, aunque algunos navegadores como
Netscape lo mantienen.

6. Imágenes y Enlaces
Suele ser común incluir enlaces dentro de una imagen. En ese caso, por defecto, los navegadores le pondrán un
borde a la imagen para indicar que efectivamente es un enlace. Práctico, pero la mayoría de las veces bastante poco
estético. Por medio del parámetro BORDER se puede alterar el grosor de ese borde o incluso eliminarlo poniéndolo a
0 (cero).
Para que una imagen sirva de enlaces se usa una combinación de las etiquetas o elementos <A> e <IMG>. En este
caso, el elemento <IMG> se coloca como contenido de la etiqueta <A>
Por ejemplo, se tiene el siguiente código HTML:
<A HREF="http://www.browsers.com">
<IMG SRC="images/browsers.jpg" ALT="Diferentes navegadores...." WIDTH="175“
HEIGHT="150">
</A>
Genera la siguiente salida:
Para eliminar el borde que coloca el navegador automáticamente por el hecho de ser un enlace, se coloca el
atributo “border“ de la imagen a 0 (cero) como se había mencionado antes. Así:
<A HREF="http://www.browsers.com">
<IMG SRC="images/browsers.jpg" ALT="Diferentes navegadores...." WIDTH="175“
HEIGHT="150“ BORDER=“0”>
</A>
Y la imagen con el enlace se mostraría:

7. Alineación con respecto al texto
Para poder maquetar conjuntamente texto y gráficos, el HTML proporciona, por medio del parámetro ALIGN, las
siguientes maneras de alinear una imagen respecto del texto que la acompaña:
Valor de ALIGN Utilidad
TOP Coloca el punto más alto de la imagen coincidiendo
con más alto de la línea de texto actual.
MIDDLE Alinea el punto medio (en altura) de la imagen con la
base del texto.
BOTTOM Alinea el punto más bajo de la imagen con la base del
texto.
LEFT Coloca la imagen a la izquierda del texto.
RIGHT Coloca la imagen a la derecha del texto.

8. Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras del alfabeto excepto algunas
como la p, la g o la j.
A continuación ejemplos de uso del atributo ALIGN:
TOP
<IMG SRC="images/browsers.jpg" ALT="Diferentes navegadores...." WIDTH="175" HEIGHT="150"
ALIGN="top">
Estos son algunos de los navegadores existentes!
MIDDLE:
<IMG SRC="images/browsers.jpg" ALT="Diferentes navegadores...." WIDTH="175" HEIGHT="150"
ALIGN=“middle">
Estos son algunos de los navegadores existentes!

9. BOTTOM
<IMG SRC="images/browsers.jpg" ALT="Diferentes navegadores...." WIDTH="175" HEIGHT="150"
ALIGN=“bottom">
Estos son algunos de los navegadores existentes!
LEFT:
<IMG SRC="images/browsers.jpg" ALT="Diferentes navegadores...." WIDTH="175" HEIGHT="150"
ALIGN=“left">
Estos son algunos de los navegadores existentes!
RIGHT:
<IMG SRC="images/browsers.jpg" ALT="Diferentes navegadores...." WIDTH="175" HEIGHT="150"
ALIGN=“right">
Estos son algunos de los navegadores existentes!

10. Tipos de Imágenes
Los navegadores pueden admitir distintos tipos de imágenes como parte de un documento HTML, los más
extendidos son GIF y JPG. La razón de esto radica en una única palabra: Compresión. En Internet se aplica la
expresión "Una imagen ocupa más de cincuenta mil palabras". Mientras que todo el código HTML de una página,
con sus miles de palabras, puede ocupar unos 10 kilobytes, una fotografía típica en formato .bmp (el estándar de
Windows) puede ocupar 100.000 veces ese espacio.
Dado el gran tamaño en bytes de las imágenes y por ende el gran tiempo que toman en ser transmitidas por la
Internet, la Web utiliza solamente formatos de imágenes altamente comprimidos.
Las imágenes .gif no se guardan punto por punto, sino que el programa que las genera calcula cuáles áreas de la
imagen tienen el mismo color, y lo que guarda es la información del tamaño y forma del área. De este modo, si un
dibujo tiene el fondo blanco, no se guarda la información de cada punto del fondo, sino que se indica que todo el
fondo es blanco.
Por esa razón, el formato .gif se utiliza usualmente para dibujos, pues estos poseen grandes áreas de colores
constantes, como en el dibujo de la flecha a la izquierda. Hay un gran área azul (el fondo) y una gran área amarilla
(la flecha). Esta forma de guardar información ocupa mucho menos espacio que guardar punto por punto.
Adicionalmente, los formatos .gif tienen otro par de características interesantes: Uno de ellos es que el fondo puede
hacerse transparente, es decir, que permita ver lo que hay detrás. Asimismo, también es posible combinar varias
imágenes .gif en un solo archivo y hacer animaciones.
Por su parte, una fotografía como la de la flor que se muestra a continuación rara vez tiene grandes áreas del
mismo color, sino que usualmente está compuesta por numerosos matices de diferentes colores. En ese caso, la
estrategia del .gif no sirve y hay que usar otra.

11. Esta estrategia usualmente da muy buenos resultados, pero se debe tomar entonces la previsión de que siempre se
debe guardar el original de una fotografía .jpg y trabajar sobre las copias, pues cada vez que se hace una
modificación y se vuelve a guardar, algo de la fotografía se pierde (como cuando se sacan fotocopias muchas veces
a un documento).

12. Práctica
Utilizando un editor de texto realice las siguientes tareas:
1.- Abra el archivo creado en la sección anterior.
2.- Guardelo como “imagenes.html“.
3.- Incorpore al contenido del documento por lo menos dos imágenes, y como mínimo un enlace en alguna de ellas.
4.- Ejecute el archivo en el navegador, visualice los resultados del código creado y verifique el funcionamiento de los
enlaces que haya utilizado.