Como Agregar Imaganes En Htm

Insertar imágenes

Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráficos utilizado se pueden conseguir efectos realmente sorprendentes.

Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGHT BORDER VSPACE HSPACE. Con las nuevas implementaciones que Netscape hace del elemento, se consiguen efectos de imagen flotante y por tanto se ha hecho necesario dotar al elemento <BR> del atributo CLEAR.

Las imágenes utilizadas pueden estar en formato BMP (Bit Mapped Picture), GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group) o PNG (Portable NetworkGraphics). Estos formatos son interpretados directamente por el navegador. Las diferencias básicas entre ellos son varias:

BMP Estos gráficos soportan hasta 24 bits (16 millones de colores). Al aumentar su tamaño escalándolos, pierden calidad, es decir, se "pixelean". No acepta transparencia. Es el de mayor peso de archivo, debido a que no usa ninguna compresión.

GIF Solamente soporta 256 colores, por lo que no es adecuado para representar fotografías, pero sí es recomendado para iconos, logotipos o imágenes que tengan colores sólidos. Al aumentar su tamaño escalándolos, pierden calidad, es decir, se "pixelean". El archivo resultante es de poco peso por su algoritmo de compresión sin pérdidas. Acepta transparencia (canal alfa) únicamente en uno de los 256 colores de la paleta. Soporta animaciones.

PNG Es un formato pensado como una versión mejorada del formato GIF. En este caso, una misma imagen, sin pérdidas, ocuparía menos espacio que en formato GIF (>10%). Soporta color verdadero (hasta 64 bits con canal alfa). Las imágenes en PNG permiten transparencia variable de hasta 256 niveles. El canal alfa de PNG permite utilizar una mayor profundidad de bits para lograr efectos de semi-transparencia, como los objetos translúcidos. No soporta animaciones.

JPEG (más conocido como JPG) soporta hasta 16 millones de colores (24 bits) y comprime el tamaño del archivo final utilizando un algoritmo de compresión con pérdida. Es decir, que al convertir una imagen a este formato, una parte de la información es desechada (algo parecido a lo que ocurre con los ficheros mp3 de sonido). Los editores de gráficos permiten ajustar la cantidad de información original que se quiere perder. Es decir, que si se opta por la máxima compresión para obtener el menor peso posible, la imagen final puede ser muy deficiente. No permite transparencias ni animación.

Se puede usar cualquier otro formato como el MPG o el AVI (ambos de vídeo), pero entonces el visualizador llamará a un programa auxiliar, que previamente le habrás definido, para que sea éste el que visualice el fichero. La desventaja de las imágenes en formatos no tratados por el propio visualizador es que no verás el texto junto con la imagen, y por tanto no podrás imprimir la página compuesta. para evitar esto, se utilizan los llamados "plug-in" que consisten en pequeños programas que permiten llamar a aplicaciones específicas ejecutándose como ventanas del navegador. Un ejemplo muy común son los ficheros .pdf.

Algunos navegadores no son capaces de tratar imágenes, o aunque el navegador sí pueda, tal vez el cliente esté navegando en modo solo texto, es decir, sin ver las imágenes, lo que permite moverse más rápido. Para estos casos podemos recurrir al atributo ALT (por alternativo) para definir un texto que aparecerá en lugar de la imagen. Esto es importante cuando una imagen, además de ser un elemento decorativo o informativo, soporta un link. El uso de ALT es recomendado por el W3C.

Veamos ejemplos del uso de <IMG>:

________________________________________

Imagen alineada a la izquierda (por defecto)

<IMG SRC="sugeren.gif">texto texto texto texto

texto texto texto texto

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

________________________________________

Imagen con un texto alternativo

Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar. También se utiliza para que al colocar el puntero del ratón sobre la imagen, sin pulsar, aparezca el texto. Para verlo tienes de deshabilitar la opción de cargar imágenes de tu visualizador (sólo es posible con Netscape).

<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">

________________________________________

Imagen alineada a la izquierda.Texto alineado arriba

<IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto

texto exto texto texto texto texto texto

texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto

________________________________________

Imagen alineada a la izquierda.Texto alineado abajo

<IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto

texto exto texto texto texto texto texto

texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto

________________________________________

Imagen alineada a la izquierda.Texto alineado al centro

<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto

texto exto texto texto texto texto texto

texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto

________________________________________

Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen

<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto

texto texto texto texto texto texto texto

texto texto

...