• 1. Imagenes formatos
• 2. El elemento img
• 3. Altura y ancho
• 4. Alineación de las imagenes (con atributo align)
• 5. Alineación de las imagenes (con propiedad float)
  • 5.1. float: right
  • 5.2. float: left

1. Imagenes formatos

Además de texto, podemos incorporar al contenido de nuestros documentos XHTML archivos de imagenes que pueden contener fotografías, dibujos, diagramas, etc.

Hay una seria discusión acerca de que formato de imagenes es conveniente utilizar para el empleo en la web, que incluye temas variados y complejos cómo: algoritmos de compresión de imagenes, patentes, calidad, y compatibilidad. Personalmente me inclino por el uso de las imagenes libres de patentes PNG. Perto te recomiendo que amplies el tema para que puedas decidir que tipo de imagen utilizar según el caso, en los siguientes artículos de la Wikipedia:

• Formato PNG
• Formato JPEG
• Formato GIF

2. El elemento img

El elemento para insertar imagenes es img. Su principal atributo es src (de source). Este atributo lleva como valor la dirección (relativa o absoluta) de la ubicación de la imagen.

Ejemplo de uso de img:

<img src="tux.png" alt="Tux, el pinguino de Linux" />

Resultado:

Notar la barra antes de cerrar el parentesis angular. Como ya hemos mencionado esta es necesaria ya que en XHTML todos los elementos deben cerrarse aunque no contengan contenido, por eso utilizamos esta sintaxis para abrir y cerrar el elemento en la misma etiqueta.

Además hemos puesto el valor Tux, el pinguino de Linux al atributo alt, este debe explicar en palabras el contenido de la fotografía. Los agentes de usuario basados en texto mostrarán el valor del atributo en vez de la imagen, otros agentes de usuarios para no videntes podrían leer y reproducir con un sintetizador el valor del atributo. Es muy recomendable su uso, ya que además si la imagen por cualquier motivo no puede ser mostrada, se presentará el valor de alt en lugar de la imagen.

3. Altura y ancho

Podemos además específicar la altura y el ancho de la imagen, mediante el uso de los atributos height y width respectivamente.

En el ejemplo anterior mostramos cómo incorporar una imagen a nuestro documento sin específicar estos atributos, el problema de hacerlo de ese modo, es que el agente de usuario no podrá calcular el espacio que ocupará la imagen hasta que no termine de obtenerla. Esto podría resultar en una carga más lenta del renderizado final de la página. Es muy conveniente averiguar el tamaño de nuestras imagenes en píxeles y especificarlo en los atributos height y width.

Ejemplo:

<img src="tux.png" alt="Tux, el pinguino de Linux" height="298" width="249" />

El resultado es el mismo que antes:

Otro motivo para el uso de estos atributos, podría ser que querramos un cambio en las dimensiones y no usar el tamaño de la imagen original, para tal, tengamos en cuenta las siguientes consideraciones:

Si achicamos el ancho y la altura, lo haremos sólo en la apariencia del documento. El archivo mantendrá el tamaño original, por lo que podríamos estar gastando recursos innecesariamente. Lo conveniente sería editar y reajustar el tamaño de la imagen con algún software de edición de imagenes (por cierto The Gimp es muy bueno y es software GNU).

Ejemplo:

<img src="tux.png" alt="Tux, el pinguino de Linux" height="120" width="100" />

Resultado:

El caso inverso (aumentar las dimensiones) podría lograr un efecto no deseado que es la "pixelización" (algo así como una notable perdida de calidad) de la imagen. De nuevo es recomendable conseguir imagenes apropiadas y no valerse de estos atributos para obtener imagenes más grandes.

Ejemplo:

<img src="tux.png" alt="Tux, el pinguino de Linux" height="479" width="400" />

En el resultado noten los bordes "pixelados":

Observemos también que deberíamos mantener las proporciones al cambiar los valores originales de la imagen mediante height y width, si no deseamos deformar el aspecto original. Una buena idea podría ser sólo reducir o aumentar uno sólo de los valores, luego el agente de usuario calculará y asignará el valor correspondiente a esa proporción para el atributo no específicado (aunque para calcular el espacio debería obtener la imagen primero, con la consecuente perdida de tiempo en el renderizado final del documento).

Ejemplo:

<img src="tux.png" alt="Tux, el pinguino de Linux" height="100" width="300"/>

El resultado es la deformación de la imagen:

Con un valor ausente:

<img src="tux.png" alt="Tux, el pinguino de Linux" height="100" />

Ahora se mantiene la proporción ya que el valor ausente de width es calculado automáticamente:

4. Alineación de las imagenes (con atributo align)

El elemento img también soporta el atributo align, su uso no es recomendado, y se recomienda el uso de la propiedad float de CSS. Sin embargo esta propiedad aún no es soportada por todos los navegadores, veremos ejemplos del uso del atributo align.

NOTA: Para mantener este documento acorde al estrícto uso de elementos XHTML 1.0, se mostrarán en otra página los usos del atributo align

Uso del atributo align (en otra pagina)

5. Alineación de las imagenes (con propiedad float)

Para acomodar las imagenes sin el uso del atributo align, podemos valernos del atributo style que permite especificar propiedades CSS de un elemento, en este caso img.

Veamos algunos ejemplos:

5.1. float: right

<p><img src="tux.png" alt="Tux, el pinguino de Linux" height="100" style=“float:right” />....</p>

Si en lugar de los 3 puntos ponemos algo de texto, obetendríamos este resultado:

Tux es el nombre de la mascota oficial del kernel Linux. Tux es un pequeño pingüino de aspecto risueño. La idea de que la mascota de Linux fuera un pingüino provino del mismo Linus Torvalds, creador de Linux. Según se cuenta, cuando era niño le picó un pingüino, y le resultó simpática la idea de asociar un pingüino a su proyecto. Existen dos versiones sobre el origen de su nombre. La primera sugiere que el nombre surge del hecho de que los pingüinos parecen vestir un esmoquín (en inglés tuxedo). La segunda es que las letras que componen Tux provienen de las palabras Torvalds Unix.

5.2. float: left

<p><img src="tux.png" alt="Tux, el pinguino de Linux" height="100" style=“float:left” />....</p>

De nuevo un resultado parecido, pero alineada la imagen en el otro extremo:

Tux es el nombre de la mascota oficial del kernel Linux. Tux es un pequeño pingüino de aspecto risueño. La idea de que la mascota de Linux fuera un pingüino provino del mismo Linus Torvalds, creador de Linux. Según se cuenta, cuando era niño le picó un pingüino, y le resultó simpática la idea de asociar un pingüino a su proyecto. Existen dos versiones sobre el origen de su nombre. La primera sugiere que el nombre surge del hecho de que los pingüinos parecen vestir un esmoquín (en inglés tuxedo). La segunda es que las letras que componen Tux provienen de las palabras Torvalds Unix.