htmpafrugell - Imágenes

imagenes

Imágenes

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.

<IMG SRC="https://img.webme.com/pic/s/scriptjavascript/cristiano2.jpg"> insertaría en el lugar del documento donde hubieras puesto la etiqueta una bonita foto de Cristiano Ronaldo con al Manchester, siempre que estuvieras conectado a Internet. Esta es una dirección absoluta, ya que la dirección no depende del directorio donde esté ubicada la página que la contiene.

Atributos de IMG

Los 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 :
 Busca el primer margen libre (clear) a la izquierda.
 Busca el primer margen libre a la derecha.
 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ágenes

Existen 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 GIF

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

Una de ellas, es que uno de sus colores se puede hacer transparente (en el subformato Gif89a), no mostrándose en la pantalla. Si se elige el color que bordea el motivo principal da la sensación de que la imagen tiene la forma de ese motivo ( en realidad todas las imágenes son rectangulares). Puedes ver ese efecto en las pequeñas imágenes que adornan este manual.
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)
Paint Shop Pro en http://www.jasc.com (Shareware, 30 días, 3.1 Mb)

o el más profesional Adobe Photoshop

Otra característica, es que se pueden ensamblar varias imágenes, que se muestran como si fuera una sola, de modo que da la sensación de movimiento. Estas imágenes se llaman Gifs animados y como ves también se pueden hacer transparentes. Hay programas específicos para hacer Gifs animados, algunos son:

GIF Construction Set en http://www.mindworkshop.com/alchemy/gifcon.html (1.46 Mb, Shareware)
WWW Gif Animator en http://stud1.tuwien.ac.at/~e8925005/ (277 Kb, Shareware)

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.html
Icon Gallery (http://cool.deu.net/galerie/icon/menue_noframe.htm)
Over the Rainbow (http://www.geocities.com/SiliconValley/Heights/1272/rainbow.html)

Formato JPG

El 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

Mono 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:
 

Como ves, ésto está debajo de la foto

Aguila Esta otra tiene los atributos: align=right , hspace=1 , border=5 , alt=" Aguila" width=250 , height=165. También debería de escribir 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