Atributos de la etiqueta IMG

Portada | Diseñando con HTML | Trabajando con imágenes | Atributos de la etiqueta IMG

[ Trabajando con imágenes ] [ Coloreando el fondo y el texto ]

Atributos de la etiqueta <IMG>

A la etiqueta <IMG> se le pueden añadir varios atributos para controlar la manera en que un navegador administra una imagen. Estos atributos son los siguientes:

	width="x" Permite al navegador predeterminar el ancho, en pixles, que tendrá tu imagen.
	height="x" Junto con el atributo width, el navegador puede preparar el espacio necesario para tu imagen antes de que se muestre.
	border="x" Para añadir o eliminar un borde, donde la x será un valor numérico.
	align="xxx" Puedes alinear una imagen horizontal y/o verticalmente en una página usando este atributo.
	*alt="descripción_de_la_imagen"* El atributo alt te permite describir la imagen para los navegadores de sólo texto, así como etiquetar la imagen antes de que se cargue en una página.
	hspace="x" horizontal space, se usa para añadir espacio vacío, con un valor numérico, en la coordenada horizontal de una imagen.
	vspace="x" vertical space, controla el espacio de la imagen en las coordenadas verticales.

NOTA

Para información sobre los atributos ISMAP y USEMAP usados para el mapeado de imágenes, mira el capítulo "Diseñando gráficos especiales".

Vamos a ver más profundamente cada uno de estos atributos.

***WIDTH* y *HEIGHT***

Dos consejos básicos para el uso de estas etiquetas:

Pon siempre los atributos width y height en tu etiqueta IMG. Esto ayuda al navegador a administrar los datos de imágenes a lo largo de la página.
Nunca uses valores imprecisos de width y height en tu imagen. Estos valores deben ser siempre exactos, o harás que el navegador muestre imágenes distorsionadas en la pantalla.

Pero puedes estar pensando: he visto páginas WEB con imágenes pequeñas que al pulsar sobre ellas se hacen más grandes. Esto es una gran idea, inteligente, pero muy problemática.

Esto es debido al tamaño que ocupa la imagen descargada del servidor. Normalmente, se suelen poner imágenes de pequeño tamaño (30 kb por ejemplo) que al pulsas sobre ellas aparece una imagen mucho mayor (digamos, 150 kb). Para hacer la imagen primera, la pequeña, NO hay que usar los valores width y height. Si intentamos hacer una imagen de 150 kb más pequeña usando los valores width y height, seguirá ocupando 150 kb. En vez de eso, hay que reducirla de tamaño usando programas como Adobe Photoshop, con la utilidad de cambiar el tamaño de imagen. Para los usuarios de FrontPage, también pueden hacer estos 2 pasos: primero redimensionar la imagen y hacerla más pequeña, y segundo pulsar sobre el botón "Nuevo Muestreo" en la barra de herramientas Imagen.

En resumidas cuentas, aquí tienes ejemplos de estos atributos usados de forma adecuada:

	Usando píxeles: <IMG SRC="maxilogo.gif" WIDTH="160" HEIGHT="32"> <IMG SRC="maxilogo.gif" WIDTH="100" HEIGHT="32">
	En porcentaje Es muy poco utilizado, y solo vale para casos muy concretos, por ejemplo, para hacer líneas horizontales con imágenes. Aquí tienes un ejemplo con la imagen anterior, pero distorsionada: <IMG SRC="maxilogo.gif" WIDTH="80%" HEIGHT="32">

Para ver el ancho y alto exactos de tu imagen, míralos con tu programa de imágenes (en el capítulo "Herramientas para gráficos del Web"). Otro método es abrir las imágenes con Explorer 5.0, en el cual las imágenes aparecerán en las "Propiedades" tras pulsar con el botón derecho sobre ella, o con Netscape en el cual las dimensiones aparecen en la barra de título del programa.

NOTA

Cuando diseñes tus gráficos, deberías de darles el tamaño adecuado para la web. Puedes aprender cómo hacer esto en el capítulo "Creando gráficos profesionales para el web".

Bordes de imagen

Los bordes alrededor de las imágenes están predeterminados en los navegadores, especialmente si la imagen está enlazada con otra imagen o un archivo. Si no está enlazada, lo predeterminado es que no tenga borde. Los bordes pueden quedar totalmente antiestéticos según el diseño de la página.

Para asegurarte de que tus gráficos nunca muestren bordes, hay que usar el valor 0 en el atributo border=

Esto dirá a los navegadores que no muestren ningún tipo de borde alrededor de tu imagen, especialmente útil para aquellos navegadores antiguos que muestren bordes alrededor de las imágenes de forma predeterminada.

Aquí tienes unos ejemplos de sustituir el 0 por otro valor numérico en este atributo:

Alineación

Hay muchas maneras de alinear una imagen dentro de la página. Horizontalmente, está predeterminada la alineación a la izquierda para una imagen y cualquier otro tipo de objeto solitario. Puedes usar el valor de alineación left (útil en casos en el que el texto rodea a la imagen, por ejemplo), o el valor right. Ejemplos:

NOTA

Debes usar otro método para centrar las imágenes, por ejemplo, la etiqueta DIV (mira el tema de las hojas de estilo), o centrando el párrafo:

Mientras que la alineación horizontal se hace con los valores de left y right, la alineación más empleada, también puedes usar el atributo align para alinear una imagen verticalmente.

Como estándar, los navegadores soportan estos tres valores:

	top Este coloca la imagen en la parte más superior de la línea de texto (valor por defecto)
	middle La imagen ahora estará alineada con el centro de la línea de texto
	bottom Con este valor, la imagen será alineada con la parte inferior de la línea de texto

Hay otros valores específicos de los navegadores, por ejemplo texttop (en la parte de arriba del texto más alto o imagen que esté en la línea de textp), absmiddle (alinea la imagen con la mitad más absoluta del texto o imagen que le rodee), baseline (igual que bottom) y absbottom (el cual alinea la parte de abajo de la imagen con la parte más baja de la imagen o texto que le rodee).

Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="TOP"> está alineada.

Esta imagen está alineada

Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="MIDDLE"> está alineada.

Esta imagen está alineada

Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="BOTTOM"> está alineada.

Esta imagen está alineada

Estos valores son útiles algunas veces, pero no muy usados. De hecho, el alineamiento vertical de las imágenes usando el atributo align está reservado a situaciones en las que se requiere alineación precisa. En el HTML 4.0, tales alineamientos se hacen mejor con tablas o, sobre todo, hojas de estilo.

El atributo ALT

Este importante atributo te permite colocar una descripción a las imágenes. Por ejemplo:

Dibujo de una bandera
Para aquellos casos individuales donde no estén disponibles los gráficos (si se usan navegadores de sólo texto con imposibilidad de mostrar imágenes, recursos limitados de Internet, o aquellas personas que navegan por la web con la opción de mostrar gráficos desconectada, el atributo alt ofrece una estupenda forma de escribir una visión natural de lo que es la imagen.

El descripción de alt aparecerá en otras dos circunstancias. Una es un página en la que se cargan los gráficos. La descripción se mostrará antes de que se cargue el archivo asociado. Esta es una manera muy interesante de mantener informados a los navegantes de lo que posteriormente verán. Las descripciones definidas con este atributo también aparecen cuando el puntero del ratón pasa por encima de la imagen (pruébalo en el ejemplo de la bandera anterior). Esta información visual extra puede ser interesante para un diseño web.

Deberías usar este atributo con una única excepción: cuando una imagen tiene un único píxel en alguna de sus dimensiones usada para corregir algunas colocaciones en el diseño del web. En este caso, el atributo alt puede ser dejado en blanco o simplemente eliminado. Muchos desarrolladores de webs prefieren dejar este atributo en su lugar pero sin ninguna información entre las comillas.

Espaciado horizontal y vertical

Los valores para hspace y vspace son numéricos. Para que podamos ver bien el efecto, vamos a usar unos valores muy altos para estos atributos.

Una bandera <IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0" ALT="Dibujo de una bandera">

Una bandera Dibujo de una bandera

Una bandera <IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0" ALT="Dibujo de una bandera" HSPACE="20">

Una bandera Dibujo de una bandera

Una bandera <IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0" ALT="Dibujo de una bandera" VSPACE="20">

Una bandera Dibujo de una bandera

El uso de estos 2 atributos es particularmente útil cuando se coloca texto alrededor de las imágenes. Esto se llama texto envolvente dinámico, o imágenes flotantes. Tienes algo más de esta técnica en la próxima sección.

Para comentarios, usar las direcciones e-mail de contacto

Atributos de la etiqueta <IMG>

WIDTH y HEIGHT

Bordes de imagen

Alineación

El atributo ALT

Espaciado horizontal y vertical

***WIDTH* y *HEIGHT***