Imágenes en HTML

Es sabido por todos, que en un documento HTML, pueden incluirse tanto texto como imágenes, o incluso como veíamos en la parte de hiperenlaces pueden actuar como hiperenlace a otro documento.

En Internet básicamente se trabaja con 2 formatos de imagen, que son el formato .JPG y el .GIF (aunque últimamente y debido a problemas de copyright y de derechos de autor de la compresión empleada por el formato GIF, entra también a formar parte del universo imaginístico el nuevo formato .PNG).

También pueden emplear otros formatos de imágenes, pero el hacerlo, presupone que muchos de nuestros visitantes tengan un navegador que reconozca dicho formato que deseamos emplear, o el plug-in adecuado para que sea reconocida omo imagen en formato distinto a los anteriormente enunciados (hasta la fecha, se reconocen como universles, en todos los navegadores, los formatos .GIF y .JPG y los más modernos soportan ya .PNG). El poner imágenes no soportadas en modo estándar por la mayoría de los navegadores, hace que nuestros usuarios hayan de instalar el pulg-in coreespondiente, muchos de los cuales no estarán dispuestos a hacerlo, perdiendo �clientela� que visite nuestra página.

GIF es un formato inventado por Unisys, la cual a empezado a cobrar por el algoritmo de compresión a las compa�ías comerciales, por lo que se inventó el formato .PNG, mejor que el .GIF y totalmente gratuito, aunque hasta la fecha, como a los usuarios de a pie no se nos cobra por el uso del GIF, se sigue empleando ampliamente en Internet por el público en general.

GIF es un formato que no soporta imagen de más de 256 colores, lo que lo hace ideal para logotipos e imágenes con no demasiado colorido. GIF además permite realizar las operaciones especiales, indicadas a continuación:

• Permite crear fondos transparentes, lo que permite sustituir uno de los colores por una máscara especial que hace que se muestre el fondo sobre el que se apoya la imagen. A este formato de imagen transparente se le conoce como GIF89a no entrelazado.

  NOTA: el formato normal GIF, sin reconocimiento de transparencia de fondo, se le conoce como GIF87.

  
  
• Permite crear animaciones dentro de una imagen de forma que varias imágenes se comprimen en el mismo archivo .GIF, y al ser visualizado por el navegador, muestran la peque�a animación que encierra la imagen. Esto también está incluido en las características del formato GIF89a.
  
  
• Permite también por otra parte crear un efecto de difusionado de la imagen, que conforme se va cargando en nuestro navegador, va mostrando la imagen más nitidamente, hasta alcanzar la resolución total de la misma, de forma que hasta que no esté cargada en su totalidad, nos da una idea de la misma, sin tener que esperar a que toda ella sea cargada. Este formato es el denominado GIF89a entrelazado.

  NOTA: Para manipulado de las imágenes GIF para su uso en Internet (transparencia, animación y difuminado), se emplean programas de dominio público (shareware) que se hayan en Internet:

  Transparencia (PC)	Lview Pro
  Gif animado (PC)	Gif Construction Set
  Difuminado (PC)	Paint Shop Pro

JPEG es un formato de almacenamiento de imágenes; es de dominio público, así como su algoritmo de encriptación y compresión. La ventaja de este aspecto con respecto al GIF87 (es decir GIF normal de todo sin ningún tipo de efecto), es que mientras que el GIF87 sólo permite hasta un máximo de 256 colores (8 bits), JPG permite hasta un máximo de 16 millones de colores (24 bits), lo que la hace ideal para el almacenamiento de fotografías escaneadas, ya que su algoritmo de compresión supera conmucho a otros formatos de 24 bits, como puede ser .BMP.

El formato .JPG al igual que el GIF89a, también permite el disuminado progresivo de la imagen, mediante el formato JPEG entrelazado, pero no así las animaciones ni las trasparencias que permitía el GIF89a.

Esta es la duda de muchos usuarios. Mi consejo es que emplees el formato GIF para imágenes que no tengan más de 16 colores a 256 (ya sean fondos, iconos, barras, ...), y el formato JPEG para imágenes de entre 256 y 16 millones de colores.

Después, si lo que quieres es dasr una mayor vistosidad a tus páginas con imágenes transparentes o peque�as animaciones, la opción es clara, GIF89a (que no debemos de olvidar que tampoco soporta imágenes de más de 256 colores).

Otra buena opción, es la de almacenar las miniauras en formato GIF, y las imágenes grandes de estas imágenes, con mayor calidad y resolución, en formato JPEG.

La inclusión de imágenes en un documento HTML precisa de la directiva abierta <IMG> (image). Hace uso de varios atributos, el más importante y fundamental SRC que sirve para indicar la dirección en la que se encuentra la imagen que se está empleando. Soporta cualquier tipo de imagen, pero no debemos de olvidar que la soporta el atributo, pero no así todos los navegadores. Es decir, podemos poner cualquier formato pero esto no supone que en el navegador se visualice. Ya hemos dicho que los formatos reconocidos universalmente por todos los navegadores es .GIF y .JPG.

<IMG SRC=�ruta_de_imagen/imagen.gif o imagen.jpg�>

Al igual que con los hiperenlaces, podemos hacer referencias absolutas o relativas a las imágenes (Ver hiperenlaces).

mostraría la imagen �icono.gif� que se halla en el mismo directorio que el documento .html actual.

muestra la imagen icono.gif que se halla en un directorio llamado �iconos� que se halla en el mismo directorio que el documento .html actual.

muestra la imagen �icono.jpg� que se halla en la URL del servidor �lucas.cdf.udc.es� en el directorio �jgorriz� del mismo.

La directiva <IMG> posee varios atributos como son:

• SRC=�imagen�

  Indica el nombre del fichero gráfico a mostrar (GIF o JPEG en principio que es el reconocido universalmente por todos los navegadores), ya visto anteriormente.

• ALT=�texto�

  Muestra un texto alternativo a la imagen que mostramos para las personas que no tengan navegadores gráficos o empleen un navegador en modo texto como puede ser el Lynx. También es bueno ponerlo en general, ya que muchos de los usuarios, desactivan la opción de ver imágenes en el navegador, y este texto alternativo a la imagen les hará tener una idea de la imagen a la que el texto sustituye.

• ALIGN=�TOP | MIDDLE | BOTTOM�

  Indica como se ha de alinear el texto que siga o preceda a la imagen que mostremos. TOP coloca el comienzo de texto en la parte superior de la imagen, MIDDLE a la altura de la parte central de la misma y BOTTOM alinea el texto en el pie de imagen. Por defecto la alineación varía con el tipo de navegador empleado.

• BORDER=�tama�o numérico�

  Indica un valor numérico para el borde de una imagen que se visualiza como un marco alrededor de la misma en la pantalla del navegador: Cuando dicha imagen actúe como hiperenlace, si ponemos BORDER=0, no se verá dicho borde, y sólo se sabe que es imagen con hiperenlace si pasamos el ratón por encima de la misma, y el puntero cambia de forma a una mano con el dedo índice, indicativa de que es hiperenlace. Por defecto y la imagen no es enlace, es 0, pero si actúa como enlace el valor por defecto es 1.

• HEIGHT=�tama�o numérico�

  Indica el alto de la imagen en puntos (pixels) o en porcentaje. Se emplea para variar el tama�o de la imagen original, así como para indicar al navegador el tama�o de pantalla que debe de reservar para dicho gráficoen altura.

• WIDTH=�tama�o numérico�

  Indica el ancho de la imagen en puntos (pixels) o en porcentaje. Se emplea para variar el tama�o de la imagen original, así como para indicar al navegador el tama�o de pantalla que debe de reservar para dicho gráfico en anchura.

  TRUCO: Un truco para que nuestra página cargue antes las imágenes, es indicar al navegador con estos 2 últimos atributos el tama�o en ancho y alto real de la imagen, de forma que el navegador les asigne su espacio real a la hora de visualizarlos, y mientras las va cargando, cargue también el resto del documento HTML. De no hacerlo así, el navegador no sabrá exactamente el tama�o de la imagen real, y la irá cargando; mientras no finalice su carga, como no sabe el tama�o real que ocupará la imagen (ya que no se o hemos indicado con los atributos correspondientes), no seguirá bajando el resto de la página, hasta que finalice de bajar las imágenes, lo que retarda la carga de la página HTML completa con texto y gráficos.

• HSPACE=�valor de margen�

  Indica un margen horizontal que debe existir entre la imagen y el texto que lo circunde (si lo hubiera). Este valor separa, tanto al texto que precede como al que sigue a la imagen.

• VSPACE=�valor de margen�

  Al igual que el anterio, pero para márgenes verticales de la imagen.

  TRUCO: Hay una forma muy sencilla de crear �espacio vacío� en nuestras páginas, lo que puede resultar muy conveniente de cara a construir márgenes o crear determinados efectos en a pantalla. Podemos hacerlos de 2 formas: con WIDTH y HEIGHT definimos el espacio que debe de ocupar la imagen. Si ésta es transparente o de un sólo color, el efecto será el de un cuadro vacío o sólido, según nuestras necesidades; con HSPACE y VSPACE no cambia el tama�o de la imagen, con lo que podemos definir un gran espacio para ela y visualizarla o no, si optamos por hacer un fondo transparente.