La etiqueta para incluir una imagen es la siguiente:
<IMG SRC="URL"> (no tiene etiqueta de cierre)
donde URL es la dirección de la imagen. La URL puede ser relativa o absoluta. Unos ejemplos aclararán este concepto:<IMG SRC="gifs/nido.gif"> se verá como:
. Esta es una dirección relativa.
Atributos de IMGLos atributos de la imagen pueden ser los siguientes:
- ALT="Texto que aparece al situar el cursor sobre la imagen"
- También muestra este mismo texto en caso de que el navegador no cargue la imagen.
- ALIGN=
- Nos indica la posición de la imagen respecto del texto. Después del signo igual, pueden ir los valores:
TOP si queremos que el texto esté alineado con la parte superior de la imagen
MIDDLE alinea el texto con la parte central de la imagen
BOTTOM alinea el texto con la parte inferior de la imagen
LEFT alinea la imagen a la izquierda de la página forzando la colocación del texto en la parte derecha y arriba
RIGHT alinea la imagen en la derecha de la página forzando la colocación del texto en la parte izquierda y arriba.
Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <br>:<br clear =left > Busca el primer margen libre (clear) a la izquierda. <br clear = right> Busca el primer margen libre a la derecha. <br clear =all > Busca el primer margen libre a ambos lados.
- WIDTH=80, HEIGTH=100
- Indican la anchura y altura de la imagen en píxels, en este caso 80x100 píxels.
Si especificamos las dimensiones de las imágenes, las páginas se cargan más rápido, debido a que el navegador reserva el espacio para ellas y sigue cargando el texto
- BORDER=2
- Añade un borde, a modo de marco, a la imagen. En este caso de 2 píxels.
- HSPACE=10 , VSPACE=15
- Especifican el espacio horizontal y vertical que separa la imagen del texto que la rodea, en este caso 10 píxels horizontales y 15 verticales
Formatos de imágenesExisten muchos formatos para guardar imágenes que tienen diferentes extensiones bmp, tiff, dib, wmf, etc. En internet se usan básicamente dos: GIF y JPG. Ambos formatos comprimen las imágenes para reducir su tamaño, de este modo se asegura una transferencia más rápida por la red. Esto es importante, ya que si la imagen se tarda en cargar, es posible que el visitante de nuestra pàgina la abandone por ello. En los casos en que es necesario poner una imagen con una resolución elevada para ver los detalles, es mejor colocar una imagen pequeña y usarla como enlace que nos conduzca a la imagen final. De ese modo el visitante ya sabe la imagen que va a cargar y puede ser más paciente.
Esto se hace como vimos en la página de enlaces<a href="URL de la imagen final"><img src="URL de la imagen que se ve con la página"></a>
Formato GIFEl formato GIF usa 256 colores y se emplea sobretodo con imágenes pequeñas como iconos. No se suele usar con fotos porque da más calidad el formato JPG. Aunque el formato GIF no tiene pérdidas de calidad en la compresión, es decir muestra la imagen tal como es en formato bmp por ejemplo, pero reduciendo su tamaño considerablemente.
Tiene dos características que lo hacen muy atractivo para el diseño de las páginas Web.
Para hacer transparente un color hay que usar editores de imágenes, como por ejemplo:
LView en http://www.lview.com (Shareware, 21 días de prueba, 1.36 Mb)
o el más profesional Adobe Photoshop
fuera una sola, de modo que da la sensación de movimiento. Estas imágenes se llamanGifs animados y como ves también se pueden hacer transparentes. Hay programas específicos para hacer Gifs animados, algunos son:
También puedes encontrar imágenes ya creadas de todos los tipos en algunas páginas de Internet, que son como bibliotecas de imágenes. Puedes mirar en
Icon Bazaar (http://www.iconbazaar.com/)
Rose's Backgrounds Archive (http://www.wanderers2.com/rose/animate.html)
Free graphics wonderland (http://www.jetlink.net/~gini/)
Rainfrog's Web Art (http://www.rainfrog.com/webart)
Fairy's Free Icons (http://www.dewa.com/freeicon)
GIF Animation Designs (http://www.webpromotion.com/stock.htmlIcon Gallery (http://cool.deu.net/galerie/icon/menue_noframe.htm)
Over the Rainbow (http://www.geocities.com/SiliconValley/Heights/1272/rainbow.html)
Formato JPGEl formato JPG usa 16.7 millones de colores, por lo que se emplea con imágenes de alta resolución. Con este formato se obtiene un grado de compresión más alto que con el GIF y además ésta se puede regular: Cuanto mayor sea la compresión, más pérdida de calidad, respecto de la imagen original. De hecho cada vez que abrimos y guardamos de nuevo una imagen en formato JPG, distorsionamos un poco la imagen.
Todas las fotos de buena calidad usan este formato.
Imágenes entrelazadas (GIF) y progresivas (JPG)Cuando se carga una imagen normal en el navegador, éste va mostrándola de arriba a abajo . Se puede conseguir que se visualize por capas. En la primera capa vemos la imagen de un modo borroso y luego se va haciendo cada vez más nítida. Esto tiene la ventaja de que se da uno cuenta enseguida, del tema de la imagen y si no es lo que buscas, puedes interrumpir la descarga. Se puede conseguir en los dos formatos y es una característica muy conveniente en las imágenes web
Ejemplos
Esta imagen tiene los atributos: align=left , hspace=10 , width=250 , hight=170 , border=1 , alt="Mono" y como quiero que después de estos comentarios el texto salte debajo de la imagen escribo:<br clear=all>
Como ves, ésto está debajo de la foto
Esta otra tiene los atributos: align=right , hspace=1 , border=5 , alt=" Aguila" width=250 , height=165. También debería de escribir <br clear=all > para que el final de página aparezca en su sitio. Como no lo hago queda a la izquierda de la imagen. Fíjate en el borde