Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : Introducción al HTML :

Capítulo 3: Inserción de imágenes

  1. Formatos de imágenes
  2. Inserción de una imagen de fondo
  3. Inserción de imágenes en el documento

1. Formatos de imágenes

Buena parte de la potencia del HTML se basa en la posibilidad de insertar imágenes en los documentos. Nuestras páginas adquieren de este modo un aspecto visual atractivo, y se convierten en una potente herramienta visual para transmitir y comunicar ideas.

Aunque algunos navegadores soportan otros formatos de imágenes, fundamentalmente se utilizan los 2 que originalmente soportaron Netscape y Mosaic (uno de los primeros navegadores):

1.1. GIF (Graphics Interchange Format)

El formato GIF (Graphics Interchange Format, Formato de Intercambio de Gráficos) es un formato propietario de CompuServe Inc. cuya especificación data de 1987. Este formato se caracteriza por limitar la profundidad del color a 256 colores y por poseer un sistema de compresión rudimentario (basado en el algoritmo LZW) que es efectivo únicamente cuando los colores de la imagen son planos (sin existencia de múltiples transiciones de color). De esta forma, es el formato ideal para iconos, diagramas y gráficas.

Otra de sus características es la posibilidad de crear imágenes GIF entrelazadas. Esto quiere decir que la información de la imagen se almacena por filas no consecutivas, permitiendo una visualización progresiva de la imagen completa pero con poca resolución. Según se va descargando la totalidad de la misma, va aumentando la resolución, hasta que se tiene la imagen final.

Pero lo que más juego ha dado del formato GIF es la posibilidad de crear pequeñas animaciones (GIFs animados). Se basa en el almacenamiento en un mismo fichero de imagen de varios fotogramas. El formato incluye la definición de los tiempos entre cada fotograma. A pesar de ser la forma más sencilla de crear animaciones, no es la más óptima en cuanto a tamaño y calidad, por lo que queda limitado a iconos y pequeños efectos visuales.

1.2. JPEG (Joint Photographic Experts Group)

El estándar JPG (Joint Photographic Experts Group) surge con la necesidad de crear un formato de almacenamiento de imágenes con calidad similar a la de una fotografía y con un alto grado de compresión (para reducir el tamaño de los archivos). De esta forma, este formato soporta 16 millones de colores y es ideal para imágenes con multitud de colores, como fotografías.

El formato permite selecciónar el grado de compresión de la imagen, lo que es ideal para lograr tamaños de archivo óptimos. El algoritmo de compresión que utiliza es con pérdidas, lo que implica que a mayor grado de compresión, menor es la calidad de la imagen. Sin embargo, y debido a las características del ojo humano, determinadas pérdidas de calidad no son apreciables, por lo que se pueden conseguir compresiones del 50% sin que se aprecie pérdida de calidad.

2. Inserción de una imagen de fondo

Para insertar una imagen de fondo basta con añadir un parámetro a la etiqueta <body>. Por ejemplo:

<body background="fondo.jpg">

Con este ejemplo indicamos que el fondo de nuestra página sea la imagen fondo.jpg. Esta imagen debe existir en la misma carpeta que contenga la página HTML. Si queremos ordenar los archivos en diferentes carpetas, podemos indicar dónde se encuentra nuestar imagen. Veamoslo con otro ejemplo:

<body background="imagenes/fondo.jpg">

En este caso, la imagen está dentro de la carpeta imagenes. También es posible enlazar con una imagen que esté en otro servidor, espicificando su URL (ver apartado 3 para una explicación del concepto de URL).

3. Inserción de imágenes en el documento

Para insertar una imagen en el documento se utiliza la etiqueta <img>. Para especificar la imagen a visualizar se utiliza el parámetro src:

<img src="logo.gif">

La imagen aparecerá en el lugar donde se encuentre la etiqueta. Mediante el uso de otros parámetros podemos especificar la alineación del texto alrededor de la imagen, el tamaño de la misma y otras características. Vamos a ver los más utilizados:

align: permite especificar la alineación de la imagen y del texto alrededor de la imagen. Puede tomar los valores left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom. Ejemplos:

<img src="logo.gif" align="middle">Texto alineado en el centro...

Texto alineado en el centro...

 

<img src="logo.gif" align="bottom">Texto alineado abajo...

Texto alineado abajo...

 

title: este parámetro permite especificar un texto alternativo, que se muestra cuando el puntero del ratón pasa por encima de la imagen. Ejemplo:

<img src="logo.gif" title="Tutorial de HTML">

alt: el argumento de este parámetro se muestra mientras se está cargando la imagen, y en caso de que no pueda cargarse permanece visible (de modo que el usuario pueda saber a qué hace referencia esa imagen). En los navegadores que no soportan imagenes (por ejemplo, Lynx) aparece el texto especificado en este parámetro en lugar de la imagen.

width / height: permiten especificar el tamaño de la imagen (ancho y alto). Si no se incluyen, la imagen se muestra a su tamaño real. Aunque se desee mostrar la imagen a tamaño real, es conveniente incluir estos parámetros para permitir que el navegador construya la página antes de haber finalizado la carga de todas las imágenes, mostrando por lo menos el texto del documento. Ejemplo:

<img src="logo.gif" width="150" height="100">

border: cuando una imagen es un enlace, por defecto, el navegador la incluye en una marco o borde (ver imagen de la izquierda). Si no se desea que aparezca este borde, debe especificarse border="0" (imagen de la derecha). También puede tomar una valor distinto de 0, en cuyo caso representa el tamaño (grosor) del borde.

 

Tutorial de HTML