Multimedia>>Imagen

Incluyendo imágenes en las páginas 

Cuando pulsamos el icono Insertar imagen para insertar imágenes se despliega una ventana de opciones muy completa.

La primera pestaña se utilizará para seleccionar el archivo de imagen que pretendemos incluir en la página. Al pulsar el botón correspondiente iniciaremos una navegación por el disco para buscar el archivo de imagen que queremos incluir en la página.

La configuración por defecto tiene activada la opción Texto alternativo por lo que si pulsamos Botón "Aceptar" sin haber tecleado un texto nos encontraremos con un aviso que nos recuerda la función del mismo.

Aviso de que falta texto alternativo

Cuando iniciemos la exploración de las carpetas se mostrarán las imágenes almacenadas en alguno de los tres formatos con los que hemos trabajado hasta ahora: gif, png y jpg. De todas maneras podemos utilizar la vista Código fuente para introducir directamente en el código la referencia a una imagen guardada en formato bmp que también se mostrará correctamente, pero no es recomendable hacerlo, ya que el tamaño de las imágenes bmp es muy grande al tratarse de un archivo sin pérdida y no son adecuadas para su transmisión por Internet.

Redimensionar arrastrandoLa segunda pestaña permitirá mantener el tamaño original o modificarlo introduciendo las nuevas dimensiones si seleccionamos Tamaño personalizado e introducimos los valores numéricos que queremos adjudicarle. También puedo, cuando he seleccionado una imagen y la tengo ya en la pantalla, modificar su tamaño si pincho y arrastro alguno de sus vértices. (Si lo hiciera sobre uno de los lados la modificación no respetaría las proporciones). Este procedimiento sería el equivalente gráfico de la modificación numérica de las dimensiones en la pantalla general de la imagen.

Si nos planteamos nuestra comodidad a la hora de diseñar la página está claro que es un método muy rápido, pero... ya hemos visto como existe un procedimiento bastante rápido para escalar las imágenes y hacer que el "peso" de las mismas se redujera considerablemente, así que ... si tenemos en cuenta a los posibles visitantes de nuestra página la única conclusión razonable es:

¡No lo hagas nunca! ¿Por qué tienes que obligar a quien visita la página a que descargue toda la información de la imagen original para que luego su navegador ajuste el tamaño y le muestre una miniatura?

Pestaña de propiedades de imagen La pestaña Apariencia presenta una pantalla en la que se pueden indicar el espaciado alrededor de la imagen, el grosor de los bordes y la alineación entre el texto y la imagen. 

Los iconos que representan la alineación del texto respecto a la imagen son suficientemente explicativos: la imagen que introducimos, independientemente de su tamaño, tiene la misma consideración que una letra, por lo que    habrá que tener en cuenta que las alineaciones superior, central e inferior sólo se aplicarán al texto que quepa hasta el siguiente salto de línea, ya que al producirse el salto de línea el siguiente renglón se colocará debajo del que se acaba de completar. Aunque esto se verá con detenimiento cuando se estudien los estilos podemos adelantar que es porque las imágenes, al igual que las letras formar lo que se denomina un elemento "en línea" a la hora de construir una página.

Como lo que se pretende habitualmente cuando utilizamos la alineación entre texto e imágenes es que el texto fluya alrededor de la imagen lo más común será utilizar una de las dos últimas opciones que permiten que la imagen se alinee a la derecha o la izquierda, respectivamente mientras el texto fluye por el costado libre.

En cuanto al espacio alrededor de la imagen es de cero píxeles, tanto en horizontal como en vertical, al igual que el borde sólido. Si queremos que la imagen mantenga una distancia respecto al texto que la rodea será aquí donde lo especifiquemos.

Actividad 33

Una vez que hemos incluido una imagen en nuestra página podremos volver en cualquier momento a la pantalla de propiedades para modificar alguna de las características. Para ello podemos hacer doble clic sobre la imagen, pulsar con el botón secundario del ratón sobre la imagen y elegir propiedades de la imagen, o bien utilizar la opción de menú formato propiedades de imagen.

Actividad 34

Aunque no se pueden dictar normas generales, suele ser recomendable que dejemos un espaciado horizontal alrededor de la imagen. Ten en cuenta que dicho espacio se aplicará a ambos lados de la imagen. El espaciado vertical no suele ser necesario, ya que el propio interlineado es suficiente en la mayoría de los casos.

En cuanto al borde sólido no es más que un marco (de color negro) que se coloca alrededor de la imagen. No aporta mucho estéticamente y puede acabar por dar un cierto tono fúnebre, ya que si se pone un poco grueso recuerda inevitablemente a una esquela mortuoria. Posiblemente sólo esté justificado en determinadas imágenes en las que, por sus especiales características, el marco pueda suponer un realce estético.

Si la imagen soporta un enlace el cuadro se pone de color azul o morado según hayamos visitado o no el enlace. El lenguaje gráfico de la WEB ha evolucionado lo suficiente como para que no sea necesario indicar con un recuadro que esa imagen es un enlace.

Si en algún momento pretendes localizar en el código las etiquetas que tienen que ver con las imágenes verás que tienen la siguiente forma según el modo de trabajo que estés utilizando

Si trabajas con los estilos CSS desactivados:

<img src="atencion.gif" width="28" height="25" alt="marca de aviso">

Si trabajas con los estilos CSS activados:

<img src="atencion.gif" style="width:28px; height:25px; float:right;" alt="marca de aviso">

Como ves, en el caso de trabajar con CSS los atributos de ancho, alto y alineación, se agrupan dentro del selector style. Además hay una interpretación desde diferente punto de vista de la alineación:  mientras que en el primer caso se considera el punto en el que se encuentra alineada la imagen (align="left") en el segundo se utiliza la idea de flotación, indicando el lugar en el que flotará la imagen (float: left). El resto de elementos de la etiqueta son la identificación de la fuente de imagen, esto es, el nombre del archivo, y el atributo alt  que nos indica el texto descriptivo que se mostrará durante el proceso de carga o cuando esté desactivada la visualización de imágenes.

Es muy importante que figuren los atributos de anchura y altura, porque eso permite al navegador que reserve un espacio para la imagen y continúe cargando el resto de la página aunque no haya recibido completamente la imagen. N|VU calcula automáticamente estas medidas a partir de las dimensiones de la imagen y las incluye en el código.


El recordatorio que presenta N|VU es muy claro en cuanto a la función que desempeña el texto alternativo. Sin embargo, una mala práctica tradicional, a la que ha colaborado la interpretación que hace Internet Explorer del atributo alt, ha confundido su función: Internet Explorer presenta el texto alternativo como texto emergente que se muestra al colocarse sobre una imagen, cuando si queremos conseguir ese efecto lo correcto es utilizar el atributo title. Los navegadores que se ajustan a las especificaciones del W3C sólo muestran texto emergente cuando se ha utilizado el atributo title, reservando el contenido alt para la función que se ha creado.

Para especificar el texto podemos hacerlo de varias formas: 

  1. usando Caja de título emergente en la ventana de selección de imagen 
  2. haciendo clic con el botón derecho sobre la etiqueta <img> en la barra de estado y eligiendo propiedades avanzadas. Una vez allí desplegamos los atributos, elegimos title y escribimos el texto en la caja disponible para especificar el valor
  3. añadiendo dentro de la etiqueta de la imagen el atributo title="Texto que aparecerá" desde la pestaña Código fuente
  4. esto último puede ser mucho más efectivo si, una vez seleccionada la imagen, sea en la etiqueta de la barra de estado o sobre la propia imagen, elegimos la opción de menú insertar html, ya que se muestra directamente la etiqueta que se verá afectada, sin necesidad de buscarla entre todo el código.
Actividad 35

Abre la actividad34.html y modifica las imágenes para que incluyan los atributos alt y title.

Si trabajas en Windows es muy conveniente que compruebes el comportamiento de otros navegadores cuando no existe la etiqueta title. Para ello es muy recomendable que instales Firefox y visualices con este navegadorl el resultado de las páginas que estás creando.